Question

I have a responsive layout and I’ve created a fading panels animated element with jQuery. I set the jQuery function to only activate if the user is above a certain screen size. However, if I scale the window down, the function still runs.

Here’s what I’d like to achieve:

1. When the user scrolls bellow a browser width of 1440px, stop that fading panels animation.
2. Once the animation is stopped, I want to reset the area to display the 1st panel.
3. If the user scrolls back up above that screen size, start the animation again.

Here is my code, thanks in advance for your time:

// Get the viewport size!
var viewport = $(document).width();

if (viewport >= 1140) {

var InfiniteRotator = 
{
    init: function() 
    {
        // hard set height of container
        $('#circles').height('286.717px');

        // initial fade-in time
        var initialInterval = 3000;

        // interval between items
        var itemInterval = 5000;

        // cross-fade time
        var fadeTime = 2000;

        // count number of items
        var numberOfItem = $('.rotating-item').length;

        // set current item
        var currentItem = 0;

        // create loop
        var infiniteLoop = setInterval(function() { 

            // initial fade out
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            // set counter
            if (currentItem == numberOfItem -1) {
                currentItem = 0;
            } else {
                currentItem++;
            }

            // next item fade in
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }
}

// go Go GO!
InfiniteRotator.init();
}

Please note: I used this great tutorial to create the fading panels: http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

Answer 1

window.onresize = function() {
    clearInterval(infiniteLoop)
}

Note that you must still be in your init function in order to get the infiniteLoop variable.