Knob show buttons in the center

Question

I'm using jQuery Knobs to create a few control elments and so far it is working great.

Now i d like to have two buttons in the center of the knob.

To create the button i would use something like this:

<button type="button" style="border-radius:150px 150px 0px 0px; width:150px;height:75px;" value="0" name="btn8">Name</button>
<button type="button" style="border-radius:0px 0px 150px 150px; width:150px;height:75px;" value="0" name="btn8">Name</button>

Right now i have no idea how to place this buttons in the center of the knob. Do you have any ideas that could help me?

http://jsfiddle.net/52VtD/6457/

Thank you for your fast answer - that is looking good I ve tried something similar by replacing the input with a span element http://jsfiddle.net/52VtD/6462/ — jonas, Jun 23 '14 at 10:17

Irvin Dominin · Accepted Answer · 2014-06-23T10:30:58.857

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 two spans and append/prepend them at the input
move the position of the new elements to let appear them requested

Consider that the knob element is absolutely positioned, so the newly appended elements, for now, are not pixel perfect.

Code:

$(".knob").knob({
    width: 150,
    fgColor: '#B80000',
    displayInput: true,
    displayPrevious: false,
    cursor: 10,
    thickness: .1,
    step: 1,
    stopper: true,
    release: function (value) {
        console.log("set knob value to : " + value);
    },
    draw: function () {
        if ($(this.i).siblings(".kb-buttons").length > 0) return
        var pos1 = parseInt($(this.i).css("marginLeft").replace('px', ''));
        var pos2 = parseInt($(this.i).css("marginTop").replace('px', ''));
        var $elem = $("<span>Btn2</span>").addClass("kb-buttons");
        $elem.insertAfter(this.i).css({
            position: "absolute",
            marginLeft: (pos1 + 25) + "px",
            marginTop: (pos2 + 55) + "px"
        });
        var $elem = $("<span>Btn1</span>").addClass("kb-buttons");
        $elem.insertBefore(this.i).css({
            position: "absolute",
            marginLeft: (pos1 + 25) + "px",
            marginTop: (pos2 - 25) + "px"
        });
    }
});

$("body").on("click", ".kb-buttons", function () {
    alert('click');
});

Demo: http://jsfiddle.net/4ZSxK/

this is so cool, I wonder why it hasn't been accepted as answer yet. — VarunC, Sep 23 '15 at 14:23
@VarunC I don't know, sadly the OP is not too much active on SO — Irvin Dominin, Sep 23 '15 at 14:25

Knob show buttons in the center

1 Answers1