CODEWITHSUNDEEP
jquerycss
Eddy Blackpool
Eddy Blackpool

Reputation: 97

jQuery Knob Apply Inner Colour

I am wondering if anyone knows how to change jQuery Knob Inner Circle background colour?

<script>
    $(function($) {
        $(".knob").knob({
            //'readOnly':true,
            'fgColor':"#238eb1",
            'bgColor':'#1b1b1b'
        });
    });
</script>

<div class="nob">
            <input class="knob" data-bgColor="#fff" data-width="200" data-max="1499" data-displayPrevious=true value="1250">
        </div>

Upvotes: 2

Views: 2622

Answers (4)

ainira
ainira

Reputation: 21

I ended up editing the jquery.knob.js file directly (starting from line 764):

if (this.o.bgColor !== "none") {

            c.beginPath();
            c.strokeStyle = this.o.bgColor;
            c.arc(this.xy, this.xy, this.radius, this.endAngle - 0.00001, 
            this.startAngle + 0.00001, true);

            c.fillStyle="#fff";         // Added code to make the inner circle white
            c.fill();                   // Added code to make the inner circle white

            c.stroke();
        }

You just need to make sure the 'fill' occurs before the 'stroke'.

Upvotes: 2

FooFiBari
FooFiBari

Reputation: 1

Here you go...thanks GoDataFeed!

$(".knob").trigger("configure", { fgColor: color }).css("color",color);

Upvotes: -1

itskawsar
itskawsar

Reputation: 1242

check following code: 

$(".knob").knob({
    'fgColor': 'red',
    'bgColor': '#ccc000',
});

or check following fiddle: http://jsfiddle.net/itskawsar/6BYhF/2/

i think it will help.

Upvotes: 0

Mirko Akov
Mirko Akov

Reputation: 2447

You can do something like:

.parentElement {
    background: #ccc;
    border-radius: 50%;
}

Upvotes: 2

Related Questions