TOPIC: Tab layout - Work in progress

So, last week one of the researchers asked me if I could create a tab interface for a survey (apparently clicking through groups or having a long long list of questions was too tedious). Knowing that jQuery is already implemented, and having used the tabs() function of jQuery to create such interface elements before, I decided to take the challenge.

After googling quite a bit I couldn't find any working examples of such a lay-out, so I went of to create my own. Of course, it wasn't quite as easy as I'ld hoped, the template engine doesnt allow the modifications in HTML structure required by jQuery's tabs, and since we're not allowed to mess with the actual code, I had to find a few jQuery/javascript workarounds. A working (the tech, not the survey, that's crappy) example can be found here;

Better handling of tab 'header' sizes, make the active tab's header full-width, and a better way to view truncated tabs

More intuitive placement of the submit buttons, so users won't accidentaly submit before having seen all tabs

I justed wanted to put this out there, both to get some feecback for myself, and hopefully to inspire/help others to create their own.

Technical details;
It only works with a all-in-one survey (obviously). I currently add a line to the start-group template, and the bulk of the work is done by some custom jQuery/javascript. Also, there's quite a bit of CSS for various layout things, and visual feedback on tabs containing 'error' questions.

In startgroup.pstpl, I've added the <li>tag required by jQuery's tabs (easier to add it there than to find the name with jQuery, although in future I'll probably do this through jQuery to keep all the code in one place).

<liclass='tab'><a>{GROUPNAME}</a></li>

The jQuery code, in template.js;

$(document).ready(function(){//Tabular format hack//create an ul element before the groups start.
$("#group-0").before("<ul id=\"headers\"></ul>");//find and move list items
_tabNum =0;// limesurvey numbers group divs group-0 to group-x, use this to create links, and move the li's to the right spot.
$("li.tab").each(function(){
$(this).find("a").attr('href','#group-'+_tabNum).appendTo("#headers");
_tabNum++;});//create tabs, open the first tab.
$("#limesurvey").tabs({ selected:0});// check to see if we're not exceeding the width of the survey page.
_tabWidth =0;
$("li.tab").each(function(){// go through all the tabs and add up the widths, +2 for each set of borders
_tabWidth += $(this).width()+2;});if(_tabWidth > $(".innerframe").width()){// if the tabs are indeed wider than the innerframe....
$("li.tab").css("max-width", $(".innerframe").width()/_tabNum-10);// enforce max width, with a bit of a margin because CSS is weird (and my CSS is a mess)
$("li.tab").each(function(){$(this).attr("title", $(this).find("a").html())})// add title mouseover tag with name of group, need to find a better solution, maybe jQuery or css mouseover tags}// provide some visual clues in the event of errors
$(".input-error").each(function(){// find tab labels for groups containing errors, and make them blink (css).
$("a[href*='"+$(this).closest(".ui-tabs-panel").attr("id")+"']").parent().addClass("blink-me");});});