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

TOPIC: Change Slider Layout with JavaScript?

Change Slider Layout with JavaScript? 3 years 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.

Change Slider Layout with JavaScript? 3 years 9 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: 3 years 9 months ago by KingKorn.
The administrator has disabled public write access.

Change Slider Layout with JavaScript? 3 years 9 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.

Change Slider Layout with JavaScript? 3 years 9 months ago #86238

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6126
  • Thank you received: 1359
  • Karma: 534
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.
The administrator has disabled public write access.

Change Slider Layout with JavaScript? 3 years 9 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: 3 years 9 months ago by KingKorn.
The administrator has disabled public write access.

Change Slider Layout with JavaScript? 3 years 9 months ago #86254

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6126
  • Thank you received: 1359
  • Karma: 534
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.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.325 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form