#1
  1. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,548
    Rep Power
    221

    window.setTimeout and knob not working properly


    Hello;

    The function runs and I see the console printing the progress, however, the bar doesn't move.

    What am I doing wrong?

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>jQuery Knob demo</title>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script src="http://anthonyterrien.com/demo/knob/jquery.knob.min.js"></script>
            <script>
    
                ShowTime();
                function ShowTime() 
                    {
                        var dt = new Date();
                        $(".knob").attr('value',dt.getSeconds());
                        show_box();
                        window.setTimeout("ShowTime()", 1000); 
                    }
    
                function show_box()
                    {
                        
                    
                      var dt = new Date();
                      console.log('Calling');  
    
                    $(".knob").knob({
                        change : function (value) {
                            console.log("change : " + value);
                        },
                        release : function (value) {
                            console.log(this.$.attr('value'));
                            console.log("release : " + value);
                        },
                        cancel : function () {
                            console.log("cancel : ", this);
                        },
                        draw : function (v) {
                            // "tron" case
                            if(this.$.data('skin') == 'tron') {
    
                                this.cursorExt = 0.3;
    
                                var a = this.arc(this.cv)  // Arc
                                    , pa                   // Previous arc
                                    , r = 1;
    
                                this.g.lineWidth = this.lineWidth;
    
                                if (this.o.displayPrevious) {
                                    pa = this.arc(this.v);
                                    this.g.beginPath();
                                    this.g.strokeStyle = this.pColor;
                                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                                    this.g.stroke();
                                }
    
                                this.g.beginPath();
                                this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                                this.g.stroke();
    
                                this.g.lineWidth = 2;
                                this.g.beginPath();
                                this.g.strokeStyle = this.o.fgColor;
                                this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                                this.g.stroke();
    
                                return false;
                            }
                        }
                    });
        
                }
            </script>
        </head>
        <body>
            <div>
                <div class="demo" style="background-color:#222; color:#FFF;">
                    <input class="knob" data-width="200" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-thickness=".2" value="" >
                </div>
        </body>
    </html>
    Thanks
  2. #2
  3. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,548
    Rep Power
    221
    Sorry nvm found it

    Code:
    $('.group-knob').trigger('configure', {
                            "max": 60
                        });

IMN logo majestic logo threadwatch logo seochat tools logo