Slide timer bar or progress bar

[marcelopaoli]

First of all thanks for this great Slider, was looking for this kind of customization for a while and it just fits perfectly with my needs. For the issue, is there a easy way of implementing a progress bar or timer bar, showing the remaing time in the slider. I've seen this kind of feature in some sliders like Orbit.

[Mottie]

You can use the callback functions to add a simple timer bar... check out this demo

CSS

.anythingControls {
    position: relative;
}
.timer-bar {
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    top: -4px;
    z-index: 100;
}​

Script

$('#slider').anythingSlider({

    autoPlay: true,

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        // add timer bar
        slider.$timerbar = $('<div class="timer-bar"/>')
            .prependTo(slider.$controls);
        // autoPlay starts immediately after the "onInitialized" callback
        setTimeout(function(){
            timerbar(slider);
        }, 200);
    },
    onShowStop: function(e, slider) {
        slider.$timerbar.stop().width('100%');
    },
    // Callback when slideshow pauses
    onShowPause: function(e, slider) {
        slider.$timerbar.stop();
    },
    // Callback when slideshow unpauses - may not trigger
    // properly if user clicks on any controls
    onShowUnpause: function(e, slider) {
        timerbar(slider);
    },

    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) {
        timerbar(slider);
    }

});​

[marcelopaoli]

Wow! Thats exactly what i need!! THanks a lot!

[mrwweb]

This is great. Thanks for putting this together, @Mottie!

For anyone who comes across this, make sure to also grab the timer function from the jsfiddle demo link. Just for posterity, here it is:

var timerbar = function(slider) {
    if (slider.playing) {
        slider.$timerbar.width(0).animate({
            width: '100%'
        }, slider.options.delay - slider.options.animationTime);
    }
};

[mrwweb]

One more quick note. The above code seemed to have a bug where the timer would stall after a single slide following a restart via the start/stop button. This is a gross fix, but I did manage to resolve it with the following change:

// Callback when slide completes - no event variable!
onSlideComplete: function(slider) {
    slider.$timerbar.stop();
    timerbar(slider);
}

[dansurfrider]

I really appreciate your bit of code to make this slider even better. Unfortunately I discovered some issues when using it, as it peaks my cpu usage between 20-60%. All this just by the timer bar?!

I noticed as soon as I stop the timer by stopping the slider or just by removing it completely the cpu usage goes back to an (although above average) normal state of 10-12% (used for whatever browser I'm testing in).

Any suggestions why this is happening or what might be solving the problem?

[Mottie]

Hi @dansurfrider!

Try increasing the setTimeout delay in this part of the code (200 was the previous setting)

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        // add timer bar
        slider.$timerbar = $('<div class="timer-bar"/>')
            .prependTo(slider.$controls);
        // autoPlay starts immediately after the "onInitialized" callback
        setTimeout(function(){
            timerbar(slider);
        }, 500);
    },

[dansurfrider]

Hi @Mottie, thanks for the quick reply! Unfortunately that didn't decrease the cpu usage at all.

Is there a way to find out what function exactly the cpu is struggling with? Can you reproduce the issue I'm having at all? I asked a friend to check for his cpu usage while viewing the slider and he confirmed the issue.

[Mottie]

Oh duh... that only delayed the start of the timer, not the timer animation. Well, it uses jQuery's animate function to change the width of the timer. Are you getting excessive cpu usage with the animation of the bar only, or does it include issues with the slider animating the slides as well?

I can't duplicate this.. maybe because I'm using Chrome? What browser are you using?

[dansurfrider]

I'm using Chrome as well, but had the issue on other browsers as well...

Since you suspected jQuerys animation function to be the problem, I did some research and found out that decreasing the update interval it also decreased my cpu usage by 50% while making the timerbar-animation only slightly more jumpy.

For everyone having the same issue and wanting to prevent users (especially the ones with slower computers) from having problems viewing your page, just add this bit of the following code somewhere after the jQuery initialization:

    jQuery.fx.interval = 42; // default is 13, higher is less fluid

Beware though that this will change the interval of EVERY animation using jQuery! Might result in jumpy animations! The value of 42ms worked well for me with slow to medium animations, while drastically reducing cpu usage.