I think it would be easier to hide the existing callouts and insert new ones for the text.
Here's a jQuery plugin to do that with sliders that have values between 1 and 10.
1) Add this to template.js:
Code:
$(document).ready(function(){
// Call the sliderCallOutText plugin for all slider questions (with default text)
$('.multinum-slider').sliderCallOutText();
});
////////// NO EDITING REQUIRED BELOW HERE //////////
// A jQuery plugin to replace the slider callout values with text
(function( $ ){
$.fn.sliderCallOutText = function(options) {
// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
text_1 : 'One',
text_2 : 'Two',
text_3 : 'Three',
text_4 : 'Four',
text_5 : 'Five',
text_6 : 'Six',
text_7 : 'Seven',
text_8 : 'Eight',
text_9 : 'Nine',
text_10 : 'Ten'
}, options);
return this.each(function() {
if($(this).hasClass('multinum-slider')) { // Only works for sliders
// Add some classes
$(this).closest('.numeric-multi').addClass('customSlider textLabels');
// Hide the original and add a new callout
$('.slider_callout', this).hide().after('<div id="slider-text-callout"></div>');
function updateCallOutText(thisSlider, slidervalue) {
var parentLi = thisSlider.parents('li:eq(0)');
var id = thisSlider.attr('id').replace(/slider-/, '');
var sVal = slidervalue/$('#slider-param-divisor-'+id).attr('value');
var callOutText = '';
switch(sVal) {
case 1 :
callOutText = opts.text_1;
break;
case 2 :
callOutText = opts.text_2;
break;
case 3 :
callOutText = opts.text_3;
break;
case 4 :
callOutText = opts.text_4;
break;
case 5 :
callOutText = opts.text_5;
break;
case 6 :
callOutText = opts.text_6;
break;
case 7 :
callOutText = opts.text_7;
break;
case 8 :
callOutText = opts.text_8;
break;
case 9 :
callOutText = opts.text_9;
break;
case 10 :
callOutText = opts.text_10;
break;
default:
callOutText = 'No text found!';
}
$('#slider-text-callout', parentLi).text(callOutText);
setTimeout(function() {
var textWidth = $('#slider-text-callout', parentLi).width();
var handleleft = $('.ui-slider-handle', parentLi).position().left;
$('#slider-text-callout', parentLi).css({ 'left':(handleleft-textWidth/2)+'px' });
}, 10);
}
// Listeners for slider changes
$('.ui-slider', this).bind('slide', function(event, ui) {
updateCallOutText($(this), ui.value);
});
$('.ui-slider', this).bind('slidechange', function(event, ui) {
updateCallOutText($(this), ui.value);
});
// Initial slider callout text (if slider was previously moved)
if($('.slider_callout', this).text() != '') {
var selection = $('.ui-slider', this).slider('value');
updateCallOutText($('.ui-slider', this), selection);
}
}
});
};
})( jQuery );
2) And add something like this to the end of template.css (this is for the default template):
Code:
#slider-text-callout {
font-size: 85%;
font-weight: 400;
height: 20px;
overflow: hidden;
position: absolute;
text-align: center;
top: -25px;
min-width: 100px;
width: auto;
}
If you want non-default text, change this:
Code:
// Call the sliderCallOutText plugin for all slider questions (with default text)
$('.multinum-slider').sliderCallOutText();
To something like this:
Code:
// Call the sliderCallOutText plugin for all slider questions with some custom text
$('.multinum-slider').sliderCallOutText( {
text_1 : 'ein',
text_2 : 'zwei',
text_3 : 'drei',
text_4 : 'vier',
text_5 : 'fünf',
text_6 : 'sechs',
text_7 : 'sieben',
text_8 : 'acht',
text_9 : 'neun',
text_10 : 'zehn'
});
Topic Author
