LimeSurvey forums :: Topic: Change image depending on value of Multiple numerical input (1/1)

Welcome, Guest

TOPIC: Change image depending on value of Multiple numerical input

Change image depending on value of Multiple numerical input 9 months 1 week ago #85350

adishardis
OFFLINE
Silver Donor
Posts: 57
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 9 months 5 days ago #85519

tpartner
NOW ONLINE
LimeSurvey Team
Posts: 2949
Thank you received: 448
Karma: 254

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

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 9 months 5 days ago #85525

adishardis OFFLINE Silver Donor Posts: 57 Karma: 0	Thank you!
	The administrator has disabled public write access.

Forum

English support forums

Can I do this with LimeSurvey?

Change image depending on value of Multiple numerical input