Welcome, Guest
Username: Password: Remember me

TOPIC: Change image depending on value of Multiple numerical input

Change image depending on value of Multiple numerical input 2 years 2 weeks ago #85350

  • adishardis
  • adishardis's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 58
  • 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.

Re: Change image depending on value of Multiple numerical input 2 years 2 weeks ago #85519

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4206
  • Thank you received: 790
  • Karma: 360
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Change image depending on value of Multiple numerical input 2 years 2 weeks ago #85525

  • adishardis
  • adishardis's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 58
  • Karma: 0
Thank you! :)
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.099 seconds
Donation Image