Develop Reference

jquery UI slider, change event show *too much recursion*

$( "#slider-1" ).slider({
min: 1,
step: 0.01,
max: 3,
value: 2,
animate:"slow",
orientation: "horizontal",
change: function (event, ui) {
$(this).slider('value', Math.round(ui.value));
ui.preventDefault();
}
})
This show too much recursion error in console how fix it.
thanks in advance.

I fixed that issue myself, by changing the code as below.
var rounded_value='';
$( "#slider-1" ).slider({
min: 1,
step: 0.01,
max: 3,
value: 2,
animate:"slow",
orientation: "horizontal",
change: function (event, ui) {
if(rounded_value!=ui.value){
rounded_value=ui.value;
$(this).slider('value', Math.round(ui.value));
}
return false;
}
})

Javascript Function Global Variable undefined?

I want to create some gauges, but my Gauge object remains undefined.
var doesntwork;
function create_gauge(name, id, min, max, title, label) {
name = new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
create_gauge(doesntwork, "g2", 0, 100, "Füllstand", "%");
console.log(doesntwork); //undefined
why? can't i pass variables to a function?

No, you only pass values, not variable references or pointers.
For that simple example, returning would seem more appropriate.
var works;
function create_gauge(id, min, max, title, label) {
return new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
works = create_gauge("g2", 0, 100, "Füllstand", "%");
console.log(works);
However, I'm sure this is probably overly simplified. There are "reference types" in JS, so if works held an object, you could pass the value of the object reference and have the function populate a property of the object.
var works = {};
function create_gauge(obj, id, min, max, title, label) {
obj.data = new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
create_gauge(works, "g2", 0, 100, "Füllstand", "%");
console.log(works.data);

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
}
...

Avoid decimal values in dijit/form/HorizontalSlider

In dijit/form/HorizontalSlider on change I am getting values in a textbox. The values are decimal, like 51.66777777. I want only 51.
<div id="horizontalSlider"></div>
<input type="text" id="sliderValue" data-dojo-type="dijit.form.TextBox" style="width:190px;" onkeyup="getSliderTxtBoxValue();">
var slider = new HorizontalSlider({
name: "horizontalSlider",
value: 1,
minimum: 1,
maximum: 500,
discreteValues: 10,
intermediateChanges: true,
style: "width:200px;",
onChange: function(value){
dom.byId("sliderValue").value = value;
}
}, "horizontalSlider");
See Also:
http://dojotoolkit.org/reference-guide/1.8/dijit/form/HorizontalSlider.html

Have you ever seen Spinal Tap? This one goes to 11!
Here is the code that will work:
value: 0,
minimum: 0,
maximum: 500,
discreteValues: 11,
You want 11 because you want 11 discrete values:
0,50,100,150,200,250,300,350,400,450,500
I created a fiddle for this problem.

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);
}
});
});