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)

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/

Answer 2

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/

Answer 3

    <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/

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 + ' $';}
            });
        });