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 4 years 2 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 4 years 2 months ago #85519

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6567
  • Thank you received: 1477
  • Karma: 579
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 4 years 2 months ago #85525

  • adishardis
  • adishardis's Avatar
  • Offline
  • Premium Lime
  • Posts: 69
  • Karma: 0
Thank you! :)
The administrator has disabled public write access.
Time to create page: 0.267 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form