I have once received a nice script from Tpartner for having the functionality of clickable images as answers (no radio buttons and the option to click on the image).
This is just working fine in LS 1.91, but in 1.92 it is not working.
I know there is no support on workarounds but just wondering if someone sees why this is not working anymore.
Maybe I just miss a small thing what is different in 1.92?
And otherwise this is the code:
Code:
<script type="text/javascript" charset="utf-8">function Custom_On_Load(){
$(document).ready(function(){// Insert the images into the labels
$('label[for="answer65848X42X146A1"]').html('<img title="Option 1" src="../plaatjes/smile.jpg"/>');
$('label[for="answer65848X42X146A2"]').html('<img title="Option 2" src="../plaatjes/smile.jpg"/>');// A function to handle the behavior of images in select/radio questions function labelImageEffects(qid){////////// Set your border colors here ///////// var uncheckedBorder ='#fff';var checkedBorder ='#0F0';var hoverBorder ='#066';/////////////////////////////////////////////// // Find the initial state of the radio buttons and style labels accordingly
$('#question'+ qid +' td.answer label.answertext').each(function(i){var id = $( this ).attr('for');if( $('#question'+ qid +' td.answer input#'+ id +'').attr('checked')==true){
$(this).css({'border':'10px solid '+ checkedBorder +''});}else{
$(this).css({'border':'10px solid '+ uncheckedBorder +''});}});// Hide the radio buttons
$('#question'+ qid +' input.radio').hide();// Label pointer and width styles // $( '#question' + qid + ' td.answer label.answertext' ).css({'cursor':'pointer', 'width':'auto'});
$('#question'+ qid +' td.answer label.answertext').css({'cursor':'pointer','width':'auto','height':'auto','display':'inline-block'});// Dennis - extra for the inline-block outline// Fix list text-indent
$('#question'+ qid +' li').css({'text-indent':'0'});// Hover label border styles
$('#question'+ qid +' td.answer label.answertext').hover(function(){// On mouseover var id = $( this ).attr('for');
$(this).css({'border':'10px solid '+ hoverBorder +''});},function(){// On mouseout var id = $( this ).attr('for');if( $('#question'+ qid +' td.answer input#'+ id +'').attr('checked')==true){
$(this).css({'border':'10px solid '+ checkedBorder +''});}else{
$(this).css({'border':'10px solid '+ uncheckedBorder +''});}});// Checked label border styles
$('#question'+ qid +' td.answer label.answertext').click(function(event){
$('#question'+ qid +' td.answer label.answertext').css({'border':'10px solid '+ uncheckedBorder +''});
$( this ).css({'border':'10px solid '+ checkedBorder +''});// IE hack to check the affiliated radio button var id = $( this ).attr('for');
$('#question'+ qid +' td.answer input#'+ id +'').attr('checked',true);});}// Call the image effects function
labelImageEffects(146);});}</script>
^- Can you help us by extending the manual and adding some of these examples there?
Best regards/Beste Grüße,
Dr. Marcel Minke
survey-consulting.com
offlinesurveys.com
Feel free to contact me by email for professional LimeSurvey support!
But it is exact the same script and template I am using at 1.91.
The non working example just shows me the text I have added in the labels.
Seems the following is just not working anymore:
Sorry, but without being able to compare the different source codes, it is hard to help from here.
Best regards/Beste Grüße,
Dr. Marcel Minke
survey-consulting.com
offlinesurveys.com
Feel free to contact me by email for professional LimeSurvey support!
It works fine here using the latest Google Chrome version. I can click the image and the radio button gets ticked.
Which browser did you test?
Did you try clearing your cache?
Best regards/Beste Grüße,
Dr. Marcel Minke
survey-consulting.com
offlinesurveys.com
Feel free to contact me by email for professional LimeSurvey support!
I have tested it as well with all browsers, also Chrome.
Please note - it is the third screen/question, the first is just fine.
The second screen doesn't matter.
Thanks for clarifying. Indeed, only the first question works fine.
Hard to say why at the first one it works fine. Maybe it's just some wrong IDs or the like, I can't say. Tony (tpartner) is the JavaScript expert, maybe he can help you out.
Best regards/Beste Grüße,
Dr. Marcel Minke
survey-consulting.com
offlinesurveys.com
Feel free to contact me by email for professional LimeSurvey support!
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){// Insert the images into the labels
$('label[for="answer65848X42X146A1"]').html('<img title="Option 1" src="../plaatjes/smile.jpg"/>');
$('label[for="answer65848X42X146A2"]').html('<img title="Option 2" src="../plaatjes/smile.jpg"/>');// A function to handle the behavior of images in select/radio questions function labelImageEffects(qid){////////// Set your border colors here ///////// var uncheckedBorder ='#fff';var checkedBorder ='#0F0';var hoverBorder ='#066';/////////////////////////////////////////////// // Find the initial state of the radio buttons and style labels accordingly
$('#question'+ qid +' td.answer label.answertext').each(function(i){var id = $( this ).attr('for');if( $('#question'+ qid +' td.answer input#'+ id +'').attr('checked')==true){
$(this).css({'border':'10px solid '+ checkedBorder +''});}else{
$(this).css({'border':'10px solid '+ uncheckedBorder +''});}});// Hide the radio buttons
$('#question'+ qid +' input.radio').hide();// Label pointer and width styles // $( '#question' + qid + ' td.answer label.answertext' ).css({ 'cursor':'pointer', 'width':'auto' });
$('#question'+ qid +' td.answer label.answertext').css({'cursor':'pointer','width':'auto','height':'auto','display':'inline-block'});// Dennis - extra for the inline-block outline// Fix list text-indent
$('#question'+ qid +' li').css({'text-indent':'0'});// Hover label border styles
$('#question'+ qid +' td.answer label.answertext').hover(function(){// On mouseover var id = $( this ).attr('for');
$(this).css({'border':'10px solid '+ hoverBorder +''});},function(){// On mouseout var id = $( this ).attr('for');if( $('#question'+ qid +' td.answer input#'+ id +'').attr('checked')==true){
$(this).css({'border':'10px solid '+ checkedBorder +''});}else{
$(this).css({'border':'10px solid '+ uncheckedBorder +''});}});// Checked label border styles
$('#question'+ qid +' td.answer label.answertext').click(function(event){
$('#question'+ qid +' td.answer label.answertext').css({'border':'10px solid '+ uncheckedBorder +''});
$( this ).css({'border':'10px solid '+ checkedBorder +''});// IE hack to check the affiliated radio button var id = $( this ).attr('for');
$('#question'+ qid +' td.answer input#'+ id +'').attr('checked',true);});}// Call the image effects function
labelImageEffects(146);});</script>
Cheers,
Tony Partner Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
tpartner wrote: Expression Manager in 1.92 is screwing up your (perfectly valid)JavaScript.
With EM, you need a space after all opening curly braces and before all closing curly braces.
Tony, I think we should either put a warning at the JavaScript workarounds page or overwork the Workarounds listed there (or both)!?
What do you think?
Best regards/Beste Grüße,
Dr. Marcel Minke
survey-consulting.com
offlinesurveys.com
Feel free to contact me by email for professional LimeSurvey support!
I would be very interested in this.... are there instructions for multiple choice. Once the bug they found from my survey gets fixed I would like to implement this.
Topic Author
