Home › Forums › JavaScript › Responsive slider on resize
- This topic is empty.
-
AuthorPosts
-
October 10, 2013 at 5:41 am #152557RockoParticipant
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!
October 10, 2013 at 9:19 am #152630TheDocMemberRight 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 #153024RockoParticipantHi, 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 #153061TheDocMemberAh 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 #153192RockoParticipantCool, 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.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 #154588RockoParticipantGot the fix. Apparently I should have been using
jQuery.each
instead ofjQuery.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); }); });
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.