jQuery-Knob icon indicating copy to clipboard operation
jQuery-Knob copied to clipboard

Destroy knob dynamically

Open gubi opened this issue 11 years ago • 4 comments

I've made this plugin for display time-lapse with knob, but if re-launch the plugin on runtime knob tilt.

var knob_options = {knob: {width: 24, height: 24, displayInput: true, stopper: true, readOnly: true, fgColor: "#999"}},
timer = null;
$.fn.setKnobTimeout = function(options, callback, limit) {
    var settings = $.extend({
        start: 0,
        cycle: false,
        knob: {
            stopper: true,
            readOnly: true,
            cursor: "gauge",
            thickness: 0.35,
            lineCap: "butt",
            width: 200,
            height: 200,
            displayInput: false,
            displayPrevious: false,
            fgColor: "#87CEEB",
            inputColor: "",
            font: "Arial",
            fontWeight: "bold",
            step: 1,
            draw: null,
            change: null,
            cancel: null,
            release: null
        }
        }, options),
    $s = $(this),
    seconds = limit/10;

    $s.val(settings.start).trigger("change");
    if(settings.start < (seconds)) {
        settings.start++;
        window.clearTimeout(timer);

        timer = setTimeout(function() {
            $s.setKnobTimeout({
                start: settings.start,
                cycle: settings.cycle,
                knob: settings.knob
            }, callback, limit);
        }, 1);
    } else {
        if(settings.start == seconds) {
            if(typeof callback == "function") {
                callback.call(this);
            }
        }
        settings.start = 0;
        if(settings.cycle) {
            window.clearTimeout(timer);

            timer = setTimeout(function() {
                $s.setKnobTimeout({
                    start: settings.start,
                    cycle: settings.cycle,
                    knob: settings.knob
                }, callback, limit);
            }, 1);
        }
    }
    // <-- Destroy need here
    $s.knob({min: 0, max: seconds, stopper: settings.knob.stopper, readOnly: settings.knob.readOnly, cursor: settings.knob.cursor, thickness: settings.knob.thickness, lineCap: settings.knob.lineCap, width: settings.knob.width, height: settings.knob.height, displayInput: settings.knob.displayInput, displayPrevious: settings.knob.displayPrevious, fgColor: settings.knob.fgColor, inputColor: settings.knob.inputColor, font: settings.knob.font, fontWeight: settings.knob.fontWeight, step: settings.knob.step, draw: settings.knob.draw, change: settings.knob.change, cancel: settings.knob.cancel, release: settings.knob.release});
};

Usage:

$(".knob").setKnobTimeout(knob_options, function() {
    alert("Hello!");
}, 2000);

How to destroy dynamically knob for reconstruct it?

gubi avatar Feb 17 '14 15:02 gubi

well if the task needed is to remove knob with input after timeout has passed, try usage:

$(".knob").setKnobTimeout(knob_options, function() {
    alert("Hello!");
    this.parent()[0].remove();
    //console.log(this.parent()[0]);
}, 2000);

la-ci avatar Apr 23 '14 15:04 la-ci

Hi,

Did you find the proper way to dispose of jquery knob as I am having the same issue?

xritchie avatar Sep 30 '14 07:09 xritchie

I'm having the same problem as well

whmountains avatar Mar 16 '16 23:03 whmountains

i have the same problem too. plz solve this issue and release new version of plugin. tnx

moonrider441 avatar Oct 30 '17 08:10 moonrider441