StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBound an inner div when outer div slides to the side
text
Body
copied!<p>I have an outer div and a few inner divs arranged side-by-side horizontally. The inner divs represent different sections of the outer (left, middle left, middle right, and right). Overlaying the outer div is a 'viewport' or frame which, in the final product, will restrict the visible content to just that content within the frame. In reality, this viewport is actually the parent div of the previously mentioned 'outer div', but I've positioned it absolutely, thereby taking it out of the flow of page elements.</p> <p>I've created a JQuery script that slides the outer div to either the left or right depending on which link is clicked (the link in the middle left div will slide the div to the right, exposing the 'hidden' content on the left, and vice versa for the link in the middle left div).</p> <p>What I want is for the contents of the middle divs to be bounded by the viewport, so that when the outer div slides left, the contents of the middle left div slide no further than the right edge of the viewport, and when the outer div slides left, the contents of the middle right div slide no further than the left edge of the viewport. Something like this:</p> <pre><code> ____________________________________________________________ | l || ml | mr || r | | || | || | | || | || | | || | || | | || | || | | || | || | |__________________||_________|________||__________________| ____________________________________________________________ || l ml || mr r | || || | || || | || || | || || | || || | ||__________________||_____________________________________| </code></pre> <p>Here is a jsfiddle of what I have so far: <a href="http://jsfiddle.net/xkjzx/2/" rel="nofollow">http://jsfiddle.net/xkjzx/2/</a> The only thing I haven't figured out is how to bound the contents of the middle divs. Can someone explain to me how to do this?</p> <p><strong>EDIT:</strong> I want to keep the basics of what my fiddle accomplishes. However, when the overflow of the viewport is hidden, I want it to look like the contents of the #left div are sliding into view, while the contents of the #mid_left div are sliding over to make room for it (instead of sliding completely off the screen like it does now), and vice versa in the other direction.</p> <p><strong>EDIT:</strong> Almost solved it! Here's the new <a href="http://jsfiddle.net/xkjzx/9/" rel="nofollow">fiddle</a>. I have the #left and #midleft divs working great: I added a second animation to the click event which changes the left margin of the middle div to accommodate for the sliding. However, the same technique had to be adapted for the right side: I had to add a <em>third</em> animation to the #mid_right click event to change the margin of the right div, because due to the floating nature of the divs, the #mid_right div was pushing the #right div off the screen and causing it to render on the next 'line', so to speak. Unfortunately, this has had the side effect of rendering my #mid_right div <em>behind</em> the #right div such that I can no longer click the link bring it back (I've given the #left and #right divs a darker background so you can easily see what's happening). I tried messing with the z-index of the two divs, but I think that because they are floating the z-index will have no effect. Any ideas on how I can mirror the effects of the left side on the right?</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