Question

I’m very new to Javascript and jQuery and may have jumped into the deep end by trying to create a responsive slide show. I have the following code in terms of resizing the slider to fit the window, using a function that sets the individual slides to equal the width of the slider container by using setInterval:

var slider          = $('.slider'),         // Get the div with a class of slider
    sliderWidth     = slider.width(),       // Get the width of the slider
    gallery         = $('.slider ul'),
    slides          = $('.slider ul').children('li'),
    noOfSlides      = slides.length,
    speed           = 5000,
    current         = 0,
    slideShowInt,
    responseSlider;

// Initially set the width of the li to equal the width of the slider
$('.slider ul').children('li').width(sliderWidth);                  

// Run a function that keeps making the 
//   li width equal the slider when window is resized
function resizeSlider(){
    responseSlider = setInterval(function(){
        slider      = $('.slider'),
        sliderWidth = slider.width();

        slides.width(sliderWidth);
        console.log(sliderWidth);           
    },10);
}


$(window).resize(resizeSlider);

clearInterval(responseSlider);

This may not even be the right way to go about doing this but I would like to know if it is possible to stop the setInterval from running using clearInterval, until the window is resized again. In its current state, looking at the console, it just continues to log the width.

Thanks in advance!

Answer 1

You don’t need to use a timer inside of your resize method to check if the element is resizing. The resize method will listen for the element to resize.

http://api.jquery.com/resize/

var slider          = $('.slider'),         // Get the div with a class of slider
    sliderWidth     = slider.width(),       // Get the width of the slider
    gallery         = $('.slider ul'),
    slides          = $('.slider ul').children('li'),
    noOfSlides      = slides.length,
    speed           = 5000,
    current         = 0,
    slideShowInt;


$('.slider ul').children('li').width(sliderWidth);                  // Initially set the width of the li to equal the width of the slider

function resizeSlider(){

        slider          = $('.slider'),
        sliderWidth     = slider.width();

        slides.width(sliderWidth);
        console.log(sliderWidth);
}


$(window).resize(resizeSlider);

If this is not an approach you’d like to take and want to use the timer for other purposes, check out the following methods.

setTimeout:
https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

clearTimeout:
https://developer.mozilla.org/en-US/docs/DOM/window.clearTimeout