Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: vertical slider

vertical slider 1 year 4 months ago #107291

I'm sorry but that did not make any difference...?
The administrator has disabled public write access.

vertical slider 1 year 4 months ago #107293

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5082
  • Thank you received: 1046
  • Karma: 438
Try with these - I have just successfully imported them into a fresh instance of 2.05.

File Attachment:

File Name: Demo_Verti...rs_3.zip
File Size:75 KB


File Attachment:

File Name: limesurvey...1234.lss
File Size:23 KB

This message has attachments files.
Please log in or register to see it.

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.
The following user(s) said Thank You: fvanderstarre

vertical slider 1 year 4 months ago #107299

Great! Thx...
How can I change the slider background color (not the handle but the slider itself)?
The administrator has disabled public write access.

vertical slider 1 year 4 months ago #107304

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5082
  • Thank you received: 1046
  • Karma: 438
Add something like this to the end of template.css:

.ui-slider.vertical-slider {
	background: none pink;
}
 
.ui-slider.vertical-slider .ui-slider-range {
	background: none red;
}

This message has an attachment image.
Please log in or register to see it.

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.

vertical slider 1 year 4 months ago #107907

Now I'd like to make the slider look like a thermometer.
We use a javascript workaround for that in our current setup (1.90), see below and attached image.
I haven't been able to work out how to do it your way though.....
Any help much appreciated!



<script type="text/javascript" charset="utf-8">
var surveyid = 12185;

$(document).ready(function() {
// call the init slider routine for each element of the .multinum-slider class
$(".multinum-slider").each(function(i,e) {
var basename = e.id.substr(10);
$('#slider-'+basename).slider( "option", "range", "min" );
$('#slider-'+basename).slider( "option", "orientation", "vertical" );

var divTag1 = document.createElement("div");
divTag1.id = "slider-range-"+basename;
divTag1.className = "ui-slider-range ui-slider-range-min ui-widget-header";
document.getElementById("slider-"+basename).appendChild( divTag1 );

var divTag2 = document.createElement("div");
divTag2.id = "thermo1";
divTag2.className = "thermo";
divTag2.innerHTML = "<img src=\"/cru/upload/surveys/"+surveyid+"/thermo3.jpg\" alt=\"thermo\" />";
document.getElementById("container-"+basename).appendChild( divTag2 );
})
});

This message has an attachment image.
Please log in or register to see it.

The administrator has disabled public write access.

vertical slider 5 months 3 weeks ago #117923

  • jcleeland
  • jcleeland's Avatar
  • Offline
  • Moderator Lime
  • Posts: 27
  • Thank you received: 1
  • Karma: 8
I made the following modifications so this would work in 1.91+ (for anyone stuck with a super-old version of LimeSurvey)
// NO EDITING REQUIRED BELOW HERE
 
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
 
	$.fn.lsVerticalSlider = function(options) {  
 
		// The defaults, extended and modified with any passed in the function call
		var opts = $.extend( {
			minValue		:0, 
			maxValue		:100, 
			startValue		:'',
			step			:1,
			height			:150, 
			recordStart		:false,
			showMin			:false,
			showMax			:false
		}, options);
 
		return this.each(function() { 
 
			var $this = $(this);
 
			// Some classes for the question and sub-questions
			$this.addClass('vertical-slider-question');
			$('li', $this).addClass('vertical-slider-sub-question');
 
			// Loop through the sub-questions
			$('li', $this).each(function(i){
 
				//Get the ID for this answer
				//var firstInput = $(this).find("input:first-child");
				var itemID = $(this).find("input:first-child").attr('id').replace(/answer/, '');
				// Check for pre-existing answer
				if($('#answer'+itemID).val() != '') {
					opts.startValue = $('#answer'+itemID).val();
				}
 
				// Insert the slider elements
				$('#answer'+itemID).after(
					'<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
						<div class="vertical-slider-max"></div> \
						<div class="vertical-slider-min"></div> \
					</div> \
					<div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
					<div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
						<div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
					</div>'
				);
 
				// Show min/max if option is set
				if(opts.showMax) {
					$('.vertical-slider-max', $this).text(opts.maxValue);
				}
				if(opts.showMin) {
					$('.vertical-slider-min', $this).text(opts.minValue);
				}
 
				// Initiate the slider
				$('#vertical-slider-'+itemID).slider({
					orientation: 'vertical',
					range: 'min',
					min: opts.minValue,
					max: opts.maxValue,
					value: opts.startValue,
					step: opts.step,
					slide: function(event, ui) {
						$('#answer'+itemID).val(ui.value);
						$('#slider-callout-'+itemID).text(ui.value);
						setTimeout(function() { 
							$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
						}, 10);
					},
					create: function(event, ui) {
						// Initial values and positions
						if($('#answer'+itemID).val() != '') { // Pre-existing answer
							$('#slider-callout-'+itemID).text(opts.startValue);
						}
						else if(opts.recordStart) { // Record the start value (if option is set)
							$('#answer'+itemID).val(opts.startValue);
							$('#slider-callout-'+itemID).text(opts.startValue);
						}
						else {
							$('#slider-callout-'+itemID).hide();
						}
						$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
					}
				});
			});
		});
 
	};
})( jQuery );
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.162 seconds