How to add a value suffix in jQuery.knob

Question

I have problem with jQuery.knob I need to add a Sufixx to the value in the knob.

For Example: i need a Sufix $ after the value, i just put in the value field, its displaying, but at that time the knob will not show the status.

it will not show the knob status. (but suffix is displaying).

here is the code:

<input type="text" class="ksta" value="<?php echo stat;?> $" data-width="50" />

without the suffix it working perfectly, help me to solve this issue.

Jsfiddle link for my issue:

http://jsfiddle.net/renishar/DWvsh/19/

in the jsfiddle it work without the $ sign, but not working with $ sign in value.

($ sign may be any value or symbol)

Anstus

Answer 1

Try this in a simple way,

jQuery(document).ready(function($){
        $('.ksta').knob({
            'min':0,
            'max':100,
            'step': 1,
            'displayPrevious': true,
            'readOnly': true,
            'draw' : function () { $(this.i).val(this.cv + '%'); }
        });
    });

There is no need to change the styles and other details.....

Demo: http://jsfiddle.net/renishar/DWvsh/20/

Halfbreed

But in this way the value of the input field will be spoiled with the appendix see: jsfiddle.net/IrvinDominin/2aZTx and jsfiddle.net/IrvinDominin/2aZTx/1 – Propose

@Irvin Dominin aka Edward: in this case the value is correctly aligned within the knob, without any changes in the css of the knob... i think its better. – Anstus

@ReNiShAR as you prefer (the knob css is not changed...), I don't like to have the value containig tha appendix, but it's your choice – Propose

Answer 2

    <input type="text" class="ksta" value="51" data-width="80" data-thickness="0.2"/>


      jQuery(document).ready(function($){
            $('.ksta').knob({
                'min':0,
                'max':100,
                'step': 1,
                'readOnly': false,
                'data-linecap': 'round'
            });
            $('.ksta').each(function(e){
               $(this).val($(this).val()+'$'); 
            });     
        });

http://jsfiddle.net/DWvsh/6/

Fescue

tried this,,,, but this time also the knob not working.... pls check it on jsfiddle... – Anstus

@ReNiShAR Also, you have left to keep the variable '$' sign infront of stat. – Fescue

me value field are dynamic ?,,, but for many knobs u r solution not working.. chk above jsfidle – Anstus

when scrolling inside the knob the symbol disappears,, – Anstus

Answer 3

Your code actually not work because 51$ is not a valid int number, so it display 0.

Since that the plugin actually not implement any prefix/suffix feature, I built a little hack so in the draw callback it:

• get the position of the input element on which knob is applied
• build a span and append it after the input, and copied the same styles of the input
• move the position of the new element to let it appear as a suffix

Request: https://github.com/aterrien/jQuery-Knob/issues/65

Code:

    'draw': function () {
        if ($(this.i).siblings(".kb-suffix").length > 0) return
        var pos1 = parseInt($(this.i).css("marginLeft").replace('px', ''));
        var pos2 = parseInt($(this.i).css("marginTop").replace('px', ''));
        var $elem = $("<span>$</span>").attr("style", $(this.i).attr("style")).addClass("kb-suffix");
        $elem.insertAfter(this.i).css({
            marginLeft: (pos1 + 20) + "px",
            marginTop: (pos2 + 3) + "px",
            zIndex: -10
    });

Demo: http://jsfiddle.net/IrvinDominin/ngX5p/

Propose

there is an issue in your code,.. the knob changes values when mouse scroll or drag in just the bottom of the knob.... – Anstus

@ReNiShAR I see the issue, it can be a zIndex issue, try the updated code – Propose

is there any way, without changing the css characteristics ? – Anstus

@ReNiShAR no actually is the only way I found, the elements are absolutely positioned by the plugin, when I have time I try to fork and update or an extension – Propose

Answer 4

As for version 1.2.8 of knob(current of writing), simply use format function

jQuery(document).ready(function($){
            $('.ksta').knob({
                'min':0,
                'max':100,
                'step': 1,
                'readOnly': false,
                'data-linecap': 'round',
                'format': function(v){ return v + ' $';}
            });
        });

Kyungkyushu