- Posts: 5
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Tab layout - Work in progress
- Karel_UTwente
- Topic Author
- Offline
- New Member
Less
More
10 years 3 months ago - 10 years 3 months ago #104389
by Karel_UTwente
Tab layout - Work in progress was created by Karel_UTwente
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;
karel-kroeze.nl/ls/index.php/788729/lang/en/newtest/Y
This is my personal test page, so feel free to try and break things. I'ld actually appreciate that.
What works so far:
What needs to be done:
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).
The jQuery code, in template.js;
Hope you enjoy, and I would love some feedback!
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;
karel-kroeze.nl/ls/index.php/788729/lang/en/newtest/Y
This is my personal test page, so feel free to try and break things. I'ld actually appreciate that.
What works so far:
- Basic tabs (using jQuery to create and move HTML elements around where needed)
- Restricting sizes somewhat dynamically (if there are too many groups the tab 'headers' tend to overflow, breaking the illusion. I currently set a max-width on all tabs if the total width is too big.)
- Highlighting of tabs that have some kind of error on submit
What needs to be done:
- Extensive error checking to see if I've broken anything (so far everything seems fine)
- 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).
Code:
<li class='tab'><a>{GROUPNAME}</a></li>
The jQuery code, in template.js;
Code:
$(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"); }); });
Hope you enjoy, and I would love some feedback!
Last edit: 10 years 3 months ago by Karel_UTwente.
The topic has been locked.
- mfaber
- Offline
- Junior Member
Less
More
- Posts: 22
- Thank you received: 6
10 years 3 months ago #104395
by mfaber
Replied by mfaber on topic Tab layout - Work in progress
Sounds interesting! Couldn't have a look: error, no permission...
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10116
- Thank you received: 3597
10 years 3 months ago #104402
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Tab layout - Work in progress
Same here - no access to the survey.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- Karel_UTwente
- Topic Author
- Offline
- New Member
Less
More
- Posts: 5
- Thank you received: 0
10 years 3 months ago #104410
by Karel_UTwente
Replied by Karel_UTwente on topic Tab layout - Work in progress
I've fixed the access, the survey itself is really rather crappy, 5 groups of 1 question each, most don't have descriptions etc, it's just a proof of concept really.
The topic has been locked.
- Ben_V
- Offline
- Platinum Member
Less
More
- Posts: 1128
- Thank you received: 329
10 years 3 months ago #104412
by Ben_V
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Replied by Ben_V on topic Tab layout - Work in progress
HI,
Very nice approach and valuable job.. so thank you for sharing it
For the "more intuitive placement of the submit buttons", maybe upper-right corner as available with @mofog (bootstrap based) responsive template
.
Very nice approach and valuable job.. so thank you for sharing it
For the "more intuitive placement of the submit buttons", maybe upper-right corner as available with @mofog (bootstrap based) responsive template
.
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The topic has been locked.
- mfaber
- Offline
- Junior Member
Less
More
- Posts: 22
- Thank you received: 6
10 years 3 months ago #104428
by mfaber
Replied by mfaber on topic Tab layout - Work in progress
This is sweet! A great alternative to the jump index when doing lengthy face2face interviews using LimeSurvey. Would love to see a template with this functionality!
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13684
- Thank you received: 2497
10 years 2 months ago #105336
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Tab layout - Work in progress
Hi,
Some CSS issue with my FireFox. Maybe you can add some clearfix somewhere ?
See screenshot.
Denis
Some CSS issue with my FireFox. Maybe you can add some clearfix somewhere ?
See screenshot.
Denis
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Attachments:
The topic has been locked.
- vitor
- Offline
- New Member
Less
More
- Posts: 12
- Thank you received: 0
9 years 7 months ago #112631
by vitor
Replied by vitor on topic Tab layout - Work in progress
I tried putting in my template and not worked, you would have a template with this implemented?
The topic has been locked.
- vitor
- Offline
- New Member
Less
More
- Posts: 12
- Thank you received: 0
9 years 7 months ago #112632
by vitor
Replied by vitor on topic Tab layout - Work in progress
you have a template with this implemented?
The topic has been locked.
- Ben_V
- Offline
- Platinum Member
Less
More
- Posts: 1128
- Thank you received: 329
9 years 7 months ago #112723
by Ben_V
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Replied by Ben_V on topic Tab layout - Work in progress
Hi Vitor,
there is no need of specific template... You just have to modify 2 files as suggested by @Karel_UTwente
startgroup.pstpl and template.js
By the way:
1) Remind that "It only works with a all-in-one survey"
2) First make a try with "default" template
3) Clear your browser cache (very important)
.
there is no need of specific template... You just have to modify 2 files as suggested by @Karel_UTwente
startgroup.pstpl and template.js
By the way:
1) Remind that "It only works with a all-in-one survey"
2) First make a try with "default" template
3) Clear your browser cache (very important)
.
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The following user(s) said Thank You: vitor
The topic has been locked.
- vitor
- Offline
- New Member
Less
More
- Posts: 12
- Thank you received: 0
9 years 7 months ago #112741
by vitor
Replied by vitor on topic Tab layout - Work in progress
Thank you, I had not put "survey all-in-one"
helped me a lot, I'm thankful :laugh:
helped me a lot, I'm thankful :laugh:
The topic has been locked.
- Ben_V
- Offline
- Platinum Member
Less
More
- Posts: 1128
- Thank you received: 329
9 years 7 months ago #112747
by Ben_V
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Replied by Ben_V on topic Tab layout - Work in progress
You're welcome
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The topic has been locked.