Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:
  • Seite:
  • 1
  • 2

THEMA: vertical slider

vertical slider 1 Jahr 2 Wochen her #107291

I'm sorry but that did not make any difference...?
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: vertical slider 1 Jahr 2 Wochen her #107293

  • tpartner
  • tpartners Avatar
  • ONLINE
  • LimeSurvey Team
  • Beiträge: 4719
  • Dank erhalten: 952
  • Karma: 410
Try with these - I have just successfully imported them into a fresh instance of 2.05.

Dateianhang:

Dateiname: Demo_Vertical_Sliders_3.zip
Dateigröße: 75 KB


Dateianhang:

Dateiname: limesurvey_survey_51234.lss
Dateigröße: 23 KB
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: fvanderstarre

vertical slider 1 Jahr 2 Wochen her #107299

Great! Thx...
How can I change the slider background color (not the handle but the slider itself)?
Der Administrator hat öffentliche Schreibrechte deaktiviert.

vertical slider 1 Jahr 2 Wochen her #107304

  • tpartner
  • tpartners Avatar
  • ONLINE
  • LimeSurvey Team
  • Beiträge: 4719
  • Dank erhalten: 952
  • Karma: 410
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;
}

Capture_2014-04-08.png
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

vertical slider 1 Jahr 22 Stunden her #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!

thermo_slider.jpg


<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 );
})
});
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: vertical slider 1 Monat 2 Wochen her #117923

  • jcleeland
  • jcleelands Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 27
  • Dank erhalten: 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 );
Der Administrator hat öffentliche Schreibrechte deaktiviert.
  • Seite:
  • 1
  • 2
Moderatoren: ITEd
Ladezeit der Seite: 0.207 Sekunden
Donation Image