Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: Change image depending on value of Multiple numerical input

Change image depending on value of Multiple numerical input 3 years 11 months ago #85350

  • adishardis
  • adishardis's Avatar
  • Offline
  • Premium Lime
  • Posts: 69
  • Karma: 0
Hi,

on a standalone html form that I made I have a slider with a picture to the left and right of the slider.

and with a simple script i "capture" the value from the slider and have the images change accordingly.

Like this:
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("#slider").change(function() {
    sVal = $(this).val();
    if(sVal <= 49) {$('#theImage1').attr('src','http://xxx.com/img/img1.png');
    }
    if(sVal > 49 && sVal <= 100) {$('#theImage').attr('src','http://xxx.com/img/img2.png');
    }
});
});//]]>  
</script>
 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("#slider").change(function() {
    sVal = $(this).val();
    if(sVal <= 49) {
$('#theImage2').attr('src','http://xxx.com/img/img3.png');
    }
    if(sVal >= 50 && sVal <= 100) {
        $('#theImage2').attr('src','http://xxx.coms/img/img4.png');
    }
});
});//]]>  
</script>

To get this to work with limesurvey and Multiple numerical input I'm thinking I have to have the slider ID and the value variable sVal.

Would greatly appreciate any help on the matter!

Cheers
/Adam
The administrator has disabled public write access.

Change image depending on value of Multiple numerical input 3 years 11 months ago #85519

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6214
  • Thank you received: 1376
  • Karma: 539
I would use the slidechange event of the slider - docs.jquery.com/UI/Slider#event-change.

Something like this (where "QQ" is the question ID:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		$('#questionQQ .ui-slider').bind('slidechange', function(event, ui) {
 
			var id = $(this).attr('id').replace(/slider-/, '');
 
			var sVal = ui.value/$('#slider-param-divisor-'+id).attr('value');
 
			if(sVal <= 49) {
				$('#theImage1').attr('src','http://xxx.com/img/img1.png');
			}
			if(sVal > 49 && sVal <= 100) {
				$('#theImage').attr('src','http://xxx.com/img/img2.png');
			}
		});
 
	});
 
</script>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Change image depending on value of Multiple numerical input 3 years 11 months ago #85525

  • adishardis
  • adishardis's Avatar
  • Offline
  • Premium Lime
  • Posts: 69
  • Karma: 0
Thank you! :)
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.291 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form