Make 100% width #27

Activity

1. chrisbarnes commented on Jun 11, 2011

   

   chrisbarnes

   on Jun 11, 2011

   More actions

   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%;
2. jalbert33 commented on Jul 27, 2011

   

   jalbert33

   on Jul 27, 2011

   More actions

   I got the same need. Would be great ;)
3. brigleb commented on Sep 5, 2011

   

   brigleb

   on Sep 5, 2011

   More actions

   Same here. May give it a shot myself, if I have time.
4. Mottie commented on Sep 12, 2011

   

   Mottie

   on Sep 12, 2011

   ContributorAuthor

   More actions

   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?
5. kaushal123 commented on Sep 28, 2011

   

   kaushal123

   on Sep 28, 2011

   More actions

   Has any one solved this issue?
6. Mottie commented on Sep 28, 2011

   

   Mottie

   on Sep 28, 2011

   ContributorAuthor

   More actions

   Not yet! :(
7. Mottie commented on Jan 10, 2012

   

   Mottie

   on Jan 10, 2012

   ContributorAuthor

   More actions

   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);
   });
8. Mottie

   closed this as completedon Jan 10, 2012
9. centinex commented on Aug 3, 2012

   

   centinex

   on Aug 3, 2012

   More actions

   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.