How to change text inside JQuery knob

Question

1.00/5 (1 vote)

See more:

want to change the text of JQuery Knob. For example I have a rate 23% consumed I want to put 23% on row and consumed in new row inside the circle. In other word, I want to add (consumed) under the percentage in different style (The font size of rate 16px and consumed 12px)

Posted 10-Mar-15 3:13am

muhanad muneer

Add a Solution

Comments

Deepu S Nair 10-Mar-15 9:24am

What you tried?

muhanad muneer 10-Mar-15 9:31am

I have jquery plugin which is draw circular progress bar
http://anthonyterrien.com/knob/ . I want to add the percentage inside the circular progress in addition to text under the percentage.for example i have $100 in credit i consumed $10 it must be print 10% consumed 10% on row and consumed in other. H ow I can edit on the knob jquery plugin to accept this changes.

Sergey Alexandrovich Kryukov 10-Mar-15 15:29pm

What's the problem with reading the knob documentation?
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-03-10T09:42:00

Here is what I've done: I loaded the page you've referenced, and, seeing no documentation, clicked "View" -> "Page source" (these menu items may vary) looked at the page source and found samples like

HTML

<input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">

(Bad sample to be sure: all attribute values should better be in quotation marks.)
As you can see you can just change the value attribute value. Let's say, you use jQuery to get a wrapper to this elements by id:

HTML

<input id="myKnob" class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">

In JavaScipt:

JavaScript

var myKnob = $("#myKnob"); // using id selector
// ...
myKnob.val(55);

Try it out. The value 44 should change to 55. And so on…

Please see:
http://api.jquery.com/id-selector[^],
http://api.jquery.com/category/selectors[^],
http://api.jquery.com/val[^].

—SA