Grow your CSS skills. Land your dream job.

Responsive slider on resize

  • # October 10, 2013 at 5:41 am

    Hi all. I’m using the Moving Boxes plugin, and have adapted it to be a full-width image slider. It’s responsive on load, but I’m having trouble getting it to respond on resize too. It seems like the widths become fixed to a specific value on load, and the percentage widths no longer apply.

    Any help would be appreciated, as I’m crap with JS. Thanks in advance!

    Testing site
    Javascript
    CSS

    # October 10, 2013 at 9:19 am

    Right now you have this:

    $('.slider').movingBoxes({
        startPanel   : 1,
        wrap         : false,
        buildNav     : false,
        navFormatter : function(){ return "●"; }
    });
    

    You simply need to run that again on window resize. Sticking with jQuery…

    $( window ).resize(function() {
        $('.slider').movingBoxes({
            // your options
        });
    });
    

    Since you’ll be writing down your options twice, you might as well change it into it’s own object:

    var sliderOptions = {
        startPanel   : 1,
        wrap         : false,
        buildNav     : false,
        navFormatter : function(){ return "●"; }
    };
    

    And then you can just call the function like this:

    $('.slider').movingBoxes(sliderOptions);
    
    # October 15, 2013 at 1:38 am

    Hi, thanks for your input. It makes sense to call the same function on resize, but it isn’t working unfortunately (currently uploaded here).

    I did come across something unexpected which may be related. It happens when I remove the original function which calls movingboxes on load, and keep the code which calls it on resize. Naturally, on load no JS is loaded. On resize however, it loads the JS as soon as you start resizing, but then immediately stops being responsive. (currently uploaded here)

    It seems like as soon as the JS is loaded, the width values written in the CSS are overwritten by the JS with fixed values.

    # October 15, 2013 at 9:20 am

    Ah yes of course, you are right. It’s finding the width of the slide which of course doesn’t change since it’s an inline style. That will unfortunately require a change to the plugin itself. Check this out: https://github.com/CSS-Tricks/MovingBoxes/issues/49

    # October 16, 2013 at 9:14 am

    Cool, almost there. I’ve used the code below taken from that link, and it works great for the first slider, but not on any of the following sliders. All sliders have the class name .slider, so I don’t know why it’s only being applied to one of them.

    Link

    var timer;
            $(window).resize(function(){
                clearTimeout(timer);
                var slider = $('.slider').data('movingBoxes');
                slider.options.width = $(window).width() * 1; // make 100% browser width
                slider.options.panelWidth = 0.8; // make 80% of wrapper width
                // prevent updating continuously, aka throttle resize
                timer = setTimeout(function(){
                    slider.update(false);
                }, 100);
            });
    
    # October 30, 2013 at 3:58 am

    Got the fix. Apparently I should have been using jQuery.each instead of jQuery.data to call the function for each instance of .slider, and to define the timer as an array. Full code:

    var timers = [];
    $(window).resize(function () {
        $('.slider').each(function (id, i) {
            var slider = $(this).data('movingBoxes');
            clearTimeout(timers[i]);
    
            slider.options.width = $(window).width() * 1;
            // make 100% browser width 
            slider.options.panelWidth = 0.8;
            // make 80% of wrapper width 
            // prevent updating continuously, aka throttle resize 
            timers[i] = setTimeout(function () {
                slider.update(false);
            }, 100);
        });
    });
    
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".