Knob - Fit text inside circle

Question

I'm trying to fit the text inside the circle, in paticulary I'm trying to add some labels such as Hour, Minutes,..
However I can't fit the text inside the circle; at this moment I'm using this inside the draw function:

$('body').append('<span style="font-size:'+this.i.css('font-size')+'" >'+this.i.val()+'</span>');
        var ph_len=parseInt($('span:last').width());
        $('span:last').remove();
        if(ph_len>=parseInt(this.i.css('width'))){
            var d=(((parseInt(this.i.css('width'))-parseInt(this.lineWidth))*parseInt(this.i.css('font-size'))/ph_len)).toFixed(1);
            this.i.css({'font-size' : d + 'px '})
        }

I'm also looking for a more elegant way to achieve this.
JSfiddle: http://jsfiddle.net/c963c/

score 2 · Answer 1 · answered Jul 18 '14 at 08:11

2

you can set font size in draw method of jquery knob.

eg:

$(".knobslider").knob({

    draw : function(){
         $(".knobslider").css("font-size","15px");
    }
});

answered Jul 18 '14 at 08:11

jomon

112
5

score 0 · Answer 2 · answered Nov 18 '13 at 18:33

0

Why not just use css (demo)?

.seconds {
    font-size: 20px !important;
}

answered Nov 18 '13 at 18:33

Mottie

84,355
30
126
241

Because it is part of a plugin where the user can decide the size of each circle, so I should calculate the font-size for each one of them – Razorphyn Nov 18 '13 at 23:03

score 0 · Answer 3 · answered Jun 04 '15 at 08:42

0

Try this:

'draw': function() {
    $(this.i).css('font-size', '10px');//your size
  }

answered Jun 04 '15 at 08:42

JaskeyLam

15,405
21
114
149

Knob - Fit text inside circle

3 Answers3