2

Is it possible to show the displayed number within the knob with text on a separate line break?

I'm aware of the 'format' hook that can add text to the number, but would like to add a line break as well.

Steven Harlow
  • 631
  • 2
  • 11
  • 26
  • So what have you tried? – Roamer-1888 Oct 23 '14 at 21:53
  • Worth trying: `'format' : "
    My Text",` , `'format' : "\nMy Text",` though you may well run into alignment and/or overflow issues.     – Roamer-1888 Oct 23 '14 at 22:01
  • Sorry @Roamer-1888 , should've mentioned I've tried adding
    to the string. It's not processed as html. And \n is just ignored.     – Steven Harlow Oct 23 '14 at 23:34
  • As I said, there may be alignment and/or overflow issues. With those two suggestions applied, "inspect element" to see what was actually inserted. You may have a second line but it's invisible due to eg `overflow:none`. If so, you will need to hack the text's box size somehow. – Roamer-1888 Oct 24 '14 at 03:23
  • And please edit the question to list everything you've tried. That will stop idiots like me making more "sensible" suggestions. A link to a jsFiddle would be good too, so folk could play with it themselves. – Roamer-1888 Oct 24 '14 at 03:29

1 Answers1

0

It's pretty simple in fact. The plugin basically inserts formatted values into the Val of the input. However, if instead of an input you make a textarea then voila! You need to put the value inside the textarea (as textarea doesn't have the value attribute like inputs). My example:

<textarea class="dial" id="dll" data-displayPrevious="true" data-width="150" data-fgColor="#ccff00" data-font="Roboto" data-inputColor="#333">65</textarea>

and then call it like this

$("#dll").knob({readOnly:true,'format' : function (value) {
 return parseInt($('#dll').val()) + '  people';
}, draw : function(){
     $("#dll").css("font-size","19px");

}});

Make sure that you leave a space between the value and the text that needs to go on the other line (so that it can be wrapped - see at the ' people'). Also play around with the rows/cols and width of the knob in order to get it right (also text-wrap css).

Robert Muster
  • 1
  • 2
  • Later edit: in the function you have the value of the field already as an argument so no need for $('#... call in the parseInt line. Just put parseInt(value) and that's it :) – Robert Muster Feb 26 '15 at 19:07