Make 100% width

[Mottie]

Adding a request to make MovingBoxes fill 100% browser width. Or as cbarnes0981 stated, fill 100% of it's container.

[chrisbarnes]

It would be great if you could just make the slider take up 100% of the container it's put in. The equivalent of max-width: 100%;

[jalbert33]

I got the same need. Would be great ;)

[brigleb]

Same here. May give it a shot myself, if I have time.

[Mottie]

I was trying to think this out... if the slider takes up 100% width of the container it is in, how do I adjust the height?

Do we completely ignore the panelWidth option? If I don't, the the panel will take up 50% of the width and thus adjust the height making the panel much much taller. Or should we have a set maximum height, center the current panel and not worry about how many other panels are showing on either side?

[kaushal123]

Has any one solved this issue?

[Mottie]

Not yet! :(

[Mottie]

Ok, this should now be possible. Here is a demo of how to use the window resize function to update MovingBoxes.

The resize will only work if you set the width and panelWidth options before calling the update function. These options were deprecated, but I think using them before calling the update is the easiest method to change the size.

Notes:

• Don't use 100% width unless you do something different with the navigation arrows. The 100% width does not include the arrows, so they will be offscreen.
• The panelWidth option will now accept two different values:
  • Any fraction <= 2, so setting panelWidth: 0.5 will make the panels 50% of the overall width (or width option setting, if set).
  • Any value > 2 will be evaluated as a pixel width of the panel, so panelWidth: 300 will set the panel width to 300px.

Here is a demo of making MovingBoxes work with a percentage width, the resize event is automatically throttled:

// This resize demo only works properly with MovingBoxes v2.2.3+
var timer;
$(window).resize(function(){
    clearTimeout(timer);
    var slider = $('#slider').data('movingBoxes');
    slider.options.width = $(window).width() * 0.5; // make 50% browser width
    slider.options.panelWidth = 0.7; // make 70% of wrapper width
    // prevent updating continuously, aka throttle resize
    timer = setTimeout(function(){
        slider.update(false);
    }, 100);
});

[centinex]

Hi Mottie and thanks for maintaining this very usefull and classy plug in.
I'm using it with this resize, (chopped from the timer, so my template always looks good even while dragging the windows. I know, it's painful for the browser, but it do looks really good).
Anyway, I don't know why but at first page load, MovingBoxes is not sized to it's correct percentage, but fills the current container. It only gets it's correct size when window get resized. I haven't spent too much time tracking why (as resizing do works perfectly on a blank test page), and it maybe be my fault due to a crowded template (there are more than one slider on a single page, for starter) and maybe some not-so-clean JS somewhere else, but I have devised this quick and dirty fix :

window.onload = function()
            {
            var slider = $('#slider1').data('movingBoxes');
            slider.options.width = $(window).width() * 0.55; // 0.5 make 50% browser width
            slider.options.panelWidth = 0.4; // 0.7 make 70% of wrapper width
            }

Maybe it can help someone with this issue.