Databases
StackOverflow2013
Postsdbo
POSlider responsive on load, but not on resize
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSlider responsive on load, but not on resize
    text
    copied!<p>I'm using the <a href="http://css-tricks.com/moving-boxes/" rel="nofollow">Moving Boxes</a> 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 (by the JS), and the percentage widths defined in the CSS no longer apply.</p> <p>Any help would be appreciated, as I can't write JS yet. Thanks in advance!</p> <p><a href="http://rockodzn.com/testing3" rel="nofollow">Testing site</a></p> <p>CSS:</p> <pre><code>.slider { width: 100%; } .slider li { width: 80%; } .mb-wrapper { margin: 0 auto; position: relative; left: 0; width:100% !important; top: 0; } /* Panel Wrapper */ .mb-slider, .mb-scroll { width: 100%; height: 100%; overflow: hidden; margin: 0 auto; padding: 0; position: relative; left: 0; top: 0; } /*** Slider panel ***/ .mb-slider .mb-panel { margin: 0; display: block; cursor: pointer; float: left; list-style: none; } .mb-panel.current img { opacity:1; filter: alpha(opacity=100); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } /*** Inside the panel ***/ .mb-inside { width:90%; margin:0 auto; } .mb-inside img { width:100%; opacity:0.4; filter: alpha(opacity=40); -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; } .mb-inside * { max-width: 100%; } </code></pre> <p>JS that generates widths (assuming from the notes). Full JS file temporarily linked <a href="http://rockodzn.com/testing3/js/jquery.movingboxes.js" rel="nofollow">here</a>.</p> <pre><code> // defaults base.$window = base.$el.parent(); // mb-scroll base.$wrap = base.$window.parent() // mb-wrapper .prepend('&lt;a class="mb-scrollButtons mb-left"&gt;&lt;/a&gt;') .append('&lt;a class="mb-scrollButtons mb-right"&gt;&lt;/a&gt;&lt;div class="mb-left-shadow"&gt;&lt;/div&gt;&lt;div class="mb-right-shadow"&gt;&lt;/div&gt;'); base.$panels = base.$el.children().addClass('mb-panel'); base.runTime = $('.mb-slider').index(base.$el) + 1; // Get index (run time) of this slider on the page base.regex = new RegExp('slider' + base.runTime + '=(\\d+)', 'i'); // hash tag regex base.initialized = false; base.currentlyMoving = false; base.curPanel = (o.initAnimation) ? 1 : base.getHash() || o.startPanel; // save original slider width base.width = (o.width) ? parseInt(o.width,10) : base.$el.width(); // save panel width, o.panelWidth originally a fraction (0.5 of o.width) if defined, or get first panel width // now can be set after initialization to resize using fraction (value &lt;= 2) or px (all values &gt; 2) base.pWidth = (o.panelWidth) ? (o.panelWidth &lt;=2 ? o.panelWidth * base.width : o.panelWidth) : base.$panels.eq(0).width(); </code></pre> <p>There is a part of the JS file where you can change certain options. In the bottom of these options it says this:</p> <pre><code>// deprecated options - but still used to keep the plugin backwards compatible // and allow resizing the overall width and panel width dynamically (i.e. on window resize) // width : '100%', // overall width of movingBoxes // panelWidth : 0.8 // current panel width adjusted to 80% of overall width </code></pre> <p>When I un-grey 'width' and 'panel-width' and apply values I get strange results. Can elaborate if needed. It could be that some of my CSS is conflicting with how these options are handled in the JS.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload