Develop Reference

JQuery UI Slider resume after stopping on condition using return false

This is the slider element with the call. I was trying to stop it on condition which was successful but after that it's stuck. I tried to add else{ return true; } but then as expected it doesn't run the rest. If I move the if else block at end the codes run then condition fires which is not what I desire.
$(".hdrHt").slider({
orientation: "horizontal",
range: "min",
max: 22,
min: 8,
value: 15,
create: function(){ $(this).find('.headHandle').text( $(this).slider("value")+'%'); },
slide: function(e,ui){
var hfs=currentVid.find('.ovlDivs').css('font-size').replace('px',''),hht=currentVid.find('.headerDiv').css('height').replace('px','');
if((parseInt(hfs)+10)>parseInt(hht)){ return false; }
currentVid.find('.middleDiv').css('height',(100-parseInt(currentVid.find('.ftrHt').slider("value"))-ui.value)+'%');
currentVid.find('.headerDiv').css('height',ui.value+'%'); $(this).find('.headHandle').text(ui.value+'%');
}
});

Ok I gave up too quickly it was easy.. But still if you have a cleaner solution please go ahead.
var stopPt=8;
$(".hdrHt").slider({
orientation: "horizontal",
range: "min",
max: 22,
min: 8,
value: 15,
create: function(){ $(this).find('.headHandle').text( $(this).slider("value")+'%'); },
slide: function(e,ui){
if(ui.value>stopPt){
currentVid.find('.middleDiv').css('height',(100-parseInt(currentVid.find('.ftrHt').slider("value"))-ui.value)+'%');
currentVid.find('.headerDiv').css('height',ui.value+'%'); $(this).find('.headHandle').text(ui.value+'%');
}
var hfs=currentVid.find('.ovlDivs').css('font-size').replace('px',''),hht=currentVid.find('.headerDiv').css('height').replace('px','');
if((parseInt(hfs)+15)>parseInt(hht)){ stopPt=ui.value; return false; }
}
});

Reverse direction of Kendo UI Linear Gauge

Using a Kendo UI Datawiz component (Linear gauge) in my project. It's supposed to be an indicator for depth, where surface is at 0 (top) and bottom should be at x (bottom). Currently I have not figured out how to 'reverse' the direction of the gauge, causing it to start at 0, and move downwards towards x at bottom.
Does anyone know how to achieve this?
Here's my gauge:
function createGauges() {
var value = $("#depthBar").val();
$("#depthBar").kendoLinearGauge({
pointer: {
value: 28,
shape: "arrow"
},
scale: {
majorUnit: 20,
minorUnit: 2,
min: -40,
max: 60,
vertical: true,
directions:
}
});
}
$(document).ready(function() {
createGauges();
});

Aaand, I've found the answer. Actually missed a tiny piece of code in the docs;
...
scale: {
majorUnit: 1000,
minorUnit: 500,
min: 0,
max: 12000,
vertical: true,
reverse: true
}
...

How to disable jQuery slider control unless radio button is checked

I am looking to disable the functionality of the jQuery UI sliders until a radio button is checked. Pretty straight forward but I have not had any luck with the things I have tried so I am looking to get some help. For convenience: http://jsfiddle.net/nlem33/L5cY6/11/
$('#slider1').slider({
min: min_value,
max: max_value,
step: 1,
slide: sliderHandler,
stop: function (event, ui) {
}
});
var min_value = 0;
var max_value = 630;
$('#slider2').slider({
min: min_value,
max: max_value,
step: 5,
slide: sliderHandler,
stop: function (event, ui) {
}
});

You can initialize them disabled and then enable them when a radio button is clicked:
$('#slider1').slider({
min: min_value,
max: max_value,
step: 1,
disabled: true, // <= disabled on init
slide: sliderHandler,
stop: function (event, ui) {
}
});
// Enable function :
$(':radio').click(function() {
$('#slider1, #slider2').slider('enable');
});
http://jsfiddle.net/L5cY6/23/

Loading Value of Input into Slider Options

I need the variable "value" in my slider plugin to be the integer value of a input in the form:
$(function () {
$("#calcSlider").slider({
min: 0,
max: 90,
step: 5,
value: /* ACCESS HERE!!!!!! */,
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
I need value: to be the value in calcSup or ${form.calcSup}, but that is a string. I need it parsed to a int:
<input type="text"
id="calcSup"
name="calcSup"
value="${form.calcSup}"
size="3"
readonly="readonly" />

Maybe you are looking for the parseInt function, more details can be found here:
http://www.w3schools.com/jsref/jsref_parseint.asp
$(function () {
$("#calcSlider").slider({ min: 0,
max: 90,
step: 5,
value: parseInt($('input#calcSup').val()),
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
<input type="text" id="calcSup" name="calcSup" value="${form.calcSup}" size="3" readonly="readonly"/>

If you're going to parse the value to an integer, don't forget to include the radix so it doesn't wind up getting confused for base-8 or something.
$("#mySlider").slider({
// Set initial value to that of <input type="text" id="bar" value="23" />
value: parseInt( $("#bar").val(), 10 ),
// Update <input type="text" id="foo" /> anytime we slide
slide: function ( event, ui ) {
$("#foo").val(ui.value);
}
});
Demo: http://jsbin.com/oceqab/edit#javascript,html

This might be what you are looking for:
$(function () {
$("#calcSlider").slider({ min: 0,
max: 90,
step: 5,
value: parseInt($("#calcSup").val()),
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});

How to convert anonymous function to a regular one?

Total JS noob here. I have the following line that implements the jQuery Slider:
<script type="text/javascript">
$(document).ready(function () {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: function (event, ui) { $("#lblInfo").text("left"); } });
});
</script>
Basically on the slide event, the #lblInfo gets its text set to left. This works fine. However, I'd like to convert the inline anonymous function that handles the slide event into a regular function.
Can someone help out?

<script type="text/javascript">
function handleSlide(event, ui) {
$("#lblInfo").text("left");
}
$(document).ready(function () {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: handleSlide
});
});
</script>

<script type="text/javascript">
function myfunc(event, ui) {
}
$(document).ready(function () {
myfunc(event, ui)
});
</script>
would do it. It's obviously not an ideal solution as it still uses the anonymous but should solve any issues you have where you need to manipulate the function manually

Just define a named function:
function doSlide(event, ui)
{
$("#lblInfo").text("left");
}
$(document).ready(function() {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: doSlide
});
});

$(document).ready(function myFunction() {
// do something
});