Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Responsive slider on resize

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #152557
    Rocko
    Participant

    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

    #152630
    TheDoc
    Member

    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);
    
    #153024
    Rocko
    Participant

    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.

    #153061
    TheDoc
    Member

    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

    #153192
    Rocko
    Participant

    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);
            });
    
    #154588
    Rocko
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.