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

TOPIC: vertical slider

vertical slider 2 years 3 weeks ago #107291

  • fvanderstarre
  • fvanderstarre's Avatar
  • Offline
  • Senior Lime
  • Posts: 71
  • Thank you received: 6
  • Karma: 1
I'm sorry but that did not make any difference...?
The administrator has disabled public write access.

vertical slider 2 years 3 weeks ago #107293

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5765
  • Thank you received: 1252
  • Karma: 512
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
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.
The following user(s) said Thank You: fvanderstarre

vertical slider 2 years 3 weeks ago #107299

  • fvanderstarre
  • fvanderstarre's Avatar
  • Offline
  • Senior Lime
  • Posts: 71
  • Thank you received: 6
  • Karma: 1
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 2 years 3 weeks ago #107304

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5765
  • Thank you received: 1252
  • Karma: 512
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;
}

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.

vertical slider 2 years 1 week ago #107907

  • fvanderstarre
  • fvanderstarre's Avatar
  • Offline
  • Senior Lime
  • Posts: 71
  • Thank you received: 6
  • Karma: 1
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 );
})
});
The administrator has disabled public write access.

vertical slider 1 year 1 month 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.556 seconds