- Posts: 29
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
Topic Author
realy
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { /*********** Display multiple questions side by side ***********/ //////// Define question attributes for later use //////// // Give questions row specific attributes so we can easily manipulate them by row $('#question583,#question1145, #question1146').attr('name', 'qRow1'); // Give questions column specific attributes so we can easily manipulate them by column // I know, not the correct use of "rel" attribute but...too bad! $('#question583').attr('rel', 'qCol1'); $('#question1145').attr('rel', 'qCol2'); $('#question1146').attr('rel', 'qCol3'); //////// Survey layout manipulation //////// // Fix the width of the survey $( 'table.outerframe' ).css({ 'width': '900px' }); // Wrap each row in a div // This is kinda verbose but IE won't let me use jQuery shortcuts var el = document.createElement('div'); el.setAttribute('id','inlineWrapper1'); document.body.appendChild(el); $('div[name="qRow1"]').wrapAll($('#inlineWrapper1')); el.setAttribute('id','inlineWrapper2'); document.body.appendChild(el); $('div[name="qRow2"]').wrapAll($('#inlineWrapper2')); el.setAttribute('id','inlineWrapper3'); document.body.appendChild(el); $('div[name="qRow3"]').wrapAll($('#inlineWrapper3')); el .setAttribute('id','inlineWrapper4'); document.body.appendChild(el ); $('div[name="qRow4"]').wrapAll($('#inlineWrapper4')); // Style the wrapper divs $( '#inlineWrapper1, #inlineWrapper2' ).css({ 'width': '850px', 'margin': '0 auto 0 auto', 'clear': 'both' }); // Get all the questions to sit politely side by side $( 'div[name="qRow1"], div[name="qRow2"]' ).css({ 'float': 'left' }); //////// Column manipulation //////// // Set the column widths - can be set individually if necessary // Must add up to less than 100% $( 'div[rel="qCol1"]' ).css({ 'width': '12%' }); $( 'div[rel="qCol2"], div[rel="qCol3"]' ).css({ 'width': '30%' }); //////// Question manipulation //////// // Hide the answer element in boilerplate questions $( 'div.boilerplate td.answer' ).parent().hide(); // Hide the question text elements in non-boilerplate questions $('div.multiple-opt td.questiontext, div.text-short td.questiontext, div.list-dropdown td.questiontext, div.yes-no td.questiontext, div.numeric td.questiontext').parent().hide(); // Push the question tables to 100% $( 'div[name="qRow1"] table, div[name="qRow2"] table' ).css({ 'width': '100%' }); // Get everything to line up nicely vertically $( 'td.questiontext, td.answer p' ).css({ 'text-align': 'center' }); // Adjust cell heights so everything lines up nicely horizontally $( 'td.answer, td.questiontext' ).css({ 'height':'35px' }); // Checkbox question styles $( 'div.multiple-opt ul' ).css({ 'text-align': 'center', 'font-size': '90%', 'margin': '0', }); $( 'div.multiple-opt ul li' ).css({ 'text-align': 'center', }); // Yes-no question styles $( 'div.yes-no ul' ).css({ 'text-align': 'center', 'font-size': '90%', 'margin': '0', 'padding-bottom': '5px' }); $( 'div.yes-no td.answer' ).css({ 'padding-bottom': '0' }); // Short-text question styles $( 'div.text-short input' ).css({ 'width': '125px', 'margin-left': '0' }); // Numeric question styles $( 'div.numeric input' ).css({ 'width': '125px', 'margin-left': '0' }); $( 'div.numeric p.tip' ).css({ 'display': 'none' }); // Get rid of the margins around select boxes $( 'p.question' ).css({'margin':'0'}); // Reduce the space caused by the question help table $( 'div[name="qRow1"], div[name="qRow2"]' ).css({ 'margin-bottom': '-8px' }); }); </script>
Topic Author
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { var qText = 11; var qArray = 22; // Fix the width of the survey $( 'table.outerframe' ).css({'width': '900px'}); // Wrap the 2 questions ina container div and style it $('#question'+qText+', #question'+qArray+'').wrapAll('<div class="inlineWrapper" />'); $('.inlineWrapper').append('<div style="clear:both" />'); $('.inlineWrapper').css({ 'width': '75%', 'margin':'0 auto 10px auto', 'background-color':'#FFFFFF' }); $('.inlineWrapper *').css({ 'padding': '0', 'margin':'0' }); // Hide the question and the help text $('#question'+qText+' td.questiontext, #question'+qArray+' td.questiontext').parent().hide(); $('#question'+qText+' > table:eq(1), #question'+qArray+' > table:eq(1)').hide(); $('#question'+qText+' td.survey-question-help, #question'+qArray+' td.survey-question-help').parent().hide(); //Hide the answer cell of the array $('#question'+qArray+' table.question thead tr').children(":first").hide(); $('#question'+qArray+' table.question tbody tr').children(":first").hide(); $('#question'+qArray+' col').attr('width', ''); // Push all question tables to 100% $('#question'+qText+' table, #question'+qArray+' table').css({'width': '100%'}); // Get the 2 questions to sit politely side by side $('#question'+qText+', #question'+qArray+'').css({'float':'left'}); $('#question'+qText+'').css({'padding':'15px 0 5px 25px'}); $('#question'+qText+'').css({'padding-top':'27px'}); // Adjust here for wrapped array labels $('#question'+qArray+'').css({'padding':'5px 0 10px 0'}); $('#question'+qArray+' table.question td').css({'padding':'4px'}); $('#question'+qText+' table:first').attr('align', 'left'); $('#question'+qText+' label').css({ 'display':'inline', 'width':'auto', 'margin-right':'10px' }); // Set the widths of the 2 questions $('#question'+qText+'').css({'width': '35%'}); $('#question'+qArray+'').css({'width': '58%'}); }); </script>
Topic Author
Topic Author
You have a span in your banner element that's not closed properly and the resulting HTML error may be messing up IE.
Code:
<h2><span style='font-size:26px;font-family:"Times New Roman"; color:#003366' >SocPiMu10</h2>
Topic Author
Topic Author
<table class="question-wrapper"> <tr> <td class="questiontext"> <span class="asterisk"></span><span>Offer</span><br /><span class="questionhelp"></span> </td> </tr> <tr>
Topic Author