Welcome, Guest
Username: Password: Remember me

TOPIC: Change Slider Layout with JavaScript?

Change Slider Layout with JavaScript? 1 year 10 months ago #86112

  • KingKorn
  • KingKorn's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 26
  • Karma: 0
Hello,

I'd like to do three things with javascript to a typical multiple numerical question with slider layout:

1) Replace the handle with a custom image,

2) hide the selected value and

3) change the width of the slider bar.

Can you please tell me how to achieve this? I don't want to change the template.css as there are a lot of different slider types in my questionnaire, so I don't want to change a global setting.

Thanks and best regards, Hanno
The administrator has disabled public write access.

Re: Change Slider Layout with JavaScript? 1 year 10 months ago #86141

  • KingKorn
  • KingKorn's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 26
  • Karma: 0
Ok, I was able to change everything by altering the template.css (by looking at this helpful tutorial: www.22surveys.com/blog/?p=48). Yay! :) Sadly, I need the image URL to include an INSERTANS value - and it seems, INSERTANS isn't working when used in the template.css. :(

So how can I overwrite a slider handle of a multiple numerical input question with a custom image using e.g.JavaScript or maybe a question specific css entry (I found only this, but wasn't able to make it work: www.limesurvey.org/forum/can-i-do-this-w...-input?lang=en#85519)?

Thanks and best regards, Hanno



/edit: And I have another question: I'd like the Next function to be disabled until a certain value is set with the slider. I've found the following javascript template (www.limesurvey.org/forum/can-i-do-this-w...pleted?lang=en#65467) and modified it for my needs - but as I seem to have no knowledge at all of javascript (except for copy'n'pasting it somewhere - sorry!) - can you help me to figure out what's wrong please? The returned value for the slider is always Null. :(
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		// Adjust the ID, maximum value and message as necessary
		var qID = 1644801;
		var mVal = 5;
		var msg = 'balfasel beispieltext.';
 
		// Interrupt the Next/Submit function
		$('form#limesurvey').submit(function(){	
 
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
 
			// Get the slider value
			var slider = Number($('#question'+qID+' div.slider_callout').text());
 
			// alert('DEBUG-ALERT - Slider-Value: ' + slider);
 
			// Alert and abort submit if slider is not greater than mVal
			if(slider > mVal) {	
				alert (msg);
				return false;
			}
			else {
				return true;
			}
		});
 
	});
 
</script>
Last Edit: 1 year 10 months ago by KingKorn.
The administrator has disabled public write access.

Re: Change Slider Layout with JavaScript? 1 year 10 months ago #86211

  • KingKorn
  • KingKorn's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 26
  • Karma: 0
Alright, I managed somehow and the code below does exactly what I wanted (blocking the Submit Button until a certain value is set with the slider). I was not able to find a way to dynamically change the slider handle with javascript, though. Any ideas?
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		// Interrupt the Next/Submit function
		$('form#limesurvey').submit(function(){	
 
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
 
			// Get the slider values
			var slider1 = Number($('#slider-callout-SSSXGGGXQQQ').text());
 
			// Alert and abort submit if slider is not within acceptable range
 
				if(slider1 > 5) {	
				alert ('blafasel beispieltext');
				return false;
				}
				else {
					return true;
				}
		});
 
	});
 
</script>
The administrator has disabled public write access.

Re: Change Slider Layout with JavaScript? 1 year 10 months ago #86238

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 748
  • Karma: 341
You should be able to change the slider handle background for a specific question with something like this where "QQ" is your question ID:
#questionQQ .ui-slider-horizontal .ui-slider-handle {
	background: transparent url(yourImage.png) 0 0 no-repeat;
}
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 Slider Layout with JavaScript? 1 year 10 months ago #86242

  • KingKorn
  • KingKorn's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 26
  • Karma: 0
thanks for your kind help, tpartner. i've tried your suggestion but it didnt work. :(
Last Edit: 1 year 10 months ago by KingKorn.
The administrator has disabled public write access.

Re: Change Slider Layout with JavaScript? 1 year 9 months ago #86254

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 748
  • Karma: 341
Can you activate a sample survey for us to check?
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.
Moderators: ITEd
Time to create page: 0.228 seconds
Donation Image