I am using jquery knob knob on my site to create some nice visuals. I wish to change the color using a click event. I have provided a simplified fiddle of what I am trying to achieve. I have been trying for several hours and now have to ask for help

DEMO /

HTML

<input type='text' id='dial' value='0' />

<a id="chgColor" href="#">Change color on click</a>

jQuery

$(function () {
    $('#dial').knob({
        min: '0',
        max: '25000',
        fgColor: '#f00'
    });
    $('#dial').val(10927).trigger('change');
});

$('#chgColor').click(function(e){
    e.preventDefault();
    $('#dial').knob({
        min: '0',
        max: '25000',
        fgColor: '#000'
    }); 
});

I am using jquery knob knob on my site to create some nice visuals. I wish to change the color using a click event. I have provided a simplified fiddle of what I am trying to achieve. I have been trying for several hours and now have to ask for help

DEMO http://jsfiddle/JW2gP/62/

HTML

<input type='text' id='dial' value='0' />

<a id="chgColor" href="#">Change color on click</a>

jQuery

$(function () {
    $('#dial').knob({
        min: '0',
        max: '25000',
        fgColor: '#f00'
    });
    $('#dial').val(10927).trigger('change');
});

$('#chgColor').click(function(e){
    e.preventDefault();
    $('#dial').knob({
        min: '0',
        max: '25000',
        fgColor: '#000'
    }); 
});

• javascript
• jquery
• jquery-knob

Share Improve this question Follow asked Feb 21, 2014 at 22:57 user1320260user1320260 1

• 1 What is it exactly what you want to do? The left part of the circle changes when I click it. Or do you want other functionality? – user2609980 Commented Feb 21, 2014 at 23:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

VIOLA (and here in fiddle, finally found my creds: http://jsfiddle/bhilleli/JW2gP/66/)

$(function () {
    $('#dial').knob({
       min: '0',
       max: '25000',
       fgColor: '#f00'
    });
    $('#dial').val(10927).trigger('change');
});

$('#chgColor').click(function(e){
   e.preventDefault();

   $('#dial').trigger(
     'configure',
      {
        min: '0',
        max: '25000',
        "fgColor":"#001"
    }
);
});