jquery knob cursor width in percentage

Question

i am using jquery knob and in my use case I want the cursor width in percentage so that when the width is 100% cursor occupies the whole circle, however it only takes numeric value as input, what are my options ?

   $(function() {
        $(".dial1").knob({
            'bgColor': 'green',
            "skin":"tron",
            'fgColor': 'red',
            'cursor': '100'
        });
    });

The cursor fills the whole circle if I give it a value of 320.

score 0 · Answer 1 · edited Feb 13 '17 at 16:52

As far as I can tell your only option is to change the source code of the jQuery plugin. The width in pixels is hardcoded in the plugin, for example on line 153 it says:

    this.$c = $('<canvas width="' +
                        this.o.width + 'px" height="' +
                        this.o.height + 'px"></canvas>');

The this.o.width value is what you set as 'cursor': '100'.

You can either change the plugin by making the px to % or removing the px and adding whatever value you want it to be like for the example on line 153:

    this.$c = $('<canvas width="' +
                        this.o.width + " height="' +
                        this.o.height + "></canvas>');

And than in the init do something like :

$(function() {
    $(".dial1").knob({
        'bgColor': 'green',
        "skin":"tron",
        'fgColor': 'red',
        'cursor': '100%'
    });
});

i think you are changing the canvas dimension, what i needed was cursor — Dev R, Jul 04 '13 at 12:41

score 0 · Accepted Answer · answered Jul 05 '13 at 11:42

I am using a workaround where in if I want x percentage to show and total is y then I am doing (x/y)*320 it gives the cursor width in percentage since x is dynamic the cursor keeps on filling the circle as this value increases. Since this is a very specific issue and I don't expect any other answer coming soon am marking this as the answer.

jquery knob cursor width in percentage

2 Answers2