Hi guys I've spent hours trying to solve this small problem, I want to use this jQuery knob to trigger different jQuery animations at each point. I can't seem to detect the value?

<script>
    $(document).ready(function(){
        $('.knob').bind('change', function(){
            var newvalue = $(this).val();
            if (newvalue == 50) {
                alert("newvalue is 50!");
            }; 
        });
    });
</script>

<input class="knob" data-width="530" data-min="0" data-max="67" data-angleOffset="0" data-thickness=".1" data-displayPrevious="true">

How could I do this? Hope you can help!

Hi guys I've spent hours trying to solve this small problem, I want to use this jQuery knob to trigger different jQuery animations at each point. I can't seem to detect the value?

<script>
    $(document).ready(function(){
        $('.knob').bind('change', function(){
            var newvalue = $(this).val();
            if (newvalue == 50) {
                alert("newvalue is 50!");
            }; 
        });
    });
</script>

<input class="knob" data-width="530" data-min="0" data-max="67" data-angleOffset="0" data-thickness=".1" data-displayPrevious="true">

How could I do this? Hope you can help!

• javascript
• jquery

Share Improve this question Follow edited Jul 6, 2012 at 17:01 epascarello 208k2020 gold badges205205 silver badges244244 bronze badges asked Jul 6, 2012 at 16:56 JoeJoe 45733 gold badges88 silver badges2626 bronze badges 3

• You need to fetch the value of the input tag. Look at the DOM to see how it's set up. – TheZ Commented Jul 6, 2012 at 17:00
• I am trying to do that in the code above? – Joe Commented Jul 6, 2012 at 17:04
• try giving your input a type attribute? – DA. Commented Jul 6, 2012 at 17:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

$(".knob").knob({
    change: function (value) {
        console.log("changed to: " + value);
    }
});

A little bit late but ran into the same question, I ended up with this:

$('.dial').trigger('configure', {
    'change': function (v) {
        console.log('new value' + v);
    }
});

Looking at the example here, it passes the value as the first argument.

$('.knob').bind('change', function(val){ console.log(val); });

you can control the font-size of the labels by:-

$(".knob").css('font-size','15px');
you can set the font size of your own choice like 20px,30px,etc.

if you are getting the chart build dynamically then here is the javascript/jquery code for you

********javascript**************
var a = document.getElementsByClassName("knob");
for (var i = 0; i
if (a[i].value > 400) a[i].style.fontSize = "15px";
}
again here you can set the font - size of your choice.

* * * * * * * jquery * * * * * * * * * * * * * * * * * * * * *
var a = $('.knob');
a.each(function () {
    if (this.value > 99999) this.style.fontSize = "15px";
    if (this.value > 9999 && this.value <= 99999) this.style.fontSize = "17px";
    else if (this.value > 999 && this.value <= 9999) this.style.fontSize = "20px";
});

apply as many conditions as you want and change the font size.

use this:

         $('.dial').knob({
                change: function (value) {
                    this.$.attr('value',Math.round(value))
                },
                release : function (value) {
                    this.$.attr('value',Math.round(value))
                }
            })

now you can just get $input.val to get the value whenever you want.Smart ain't it?