CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2531590
user2531590

Reputation:

JQuery set timer for event triggering

I was wondering if there is any way to set the slider bar plays automatically like for example, when I click the play button, the slider bar and the value will increase automatically. Here is my slider bar: JSFiddle

Basically what I wanted is I clicked on the play button, then the slider bar and its value will increase automatically and stops for few seconds at each value before increment.

Through my research, I know there is a method called setInterval() will repeat certain event automatically but I not sure how to implement it.

And this is my Fiddle after I added the auto play function but my slider bar is not coming out.

Upvotes: 1

Views: 108

Answers (2)

Cyberpks
Cyberpks

Reputation: 1421

[UPDATED ANSWER]

Here is your final solution (I hope), Fiddle

Basically you were using step method for incrementing the time, but step is called when slider is moved by mouse. You should use the change method to update the time value.

$("#slider-range").slider({       
    min: 0,
    max: 1380,
    step: stepOne,
    animate: "slow",
    change: function(e,ui)
    {
        var hours = Math.floor(ui.value / 60);
        var minutes = ui.value - (hours * 60);

        if(hours.length == 1) hours = '0' + hours;
        if(minutes.length == 1) minutes = '0' + minutes;
        if(minutes==0)minutes = '00';

        // Convert 24 hours format into 12
        if(hours == 0){
            hours = 12;
            ext = "AM";
        }
        if(hours == 12){
            ext = "PM";
        }
        if(hours > 12){
            hours = hours - 12;
            ext = 'PM';
        }

        $('#sliderValue').html(hours+':'+minutes + ext);
    }
});

Upvotes: 1

Shih-Min Lee
Shih-Min Lee

Reputation: 9700

http://jsfiddle.net/0twk5L7y/10/

$('#btnPlay').on('click', function(){
    // call a recursive function here...
});

You can change your logic inside the function. But normally I use a front-end framework such as Ember or Angular that helps you achieve what you want to do easily.

Upvotes: 0

Related Questions