Sliding Divs...help plz

JavaScript
1

I’m referring to an older post (http://www.sitepoint.com/forums/showthread.php?p=4132290#post4132290) - but the challenge at hand is having a div start off screen and then slide in…pushing the existing div slide to accommodate…issues arize as the screen size changes…

hey everyone thanks for this info - I spent DAYS scouring the web for an elegant solution… HOWEVER…If I have two divs - side by side - and I slide them to the right, IF the edge of the browser is ‘smaller’ than the width of the screen - the divs stack one on top of another - IS THERE A WAY TO prevent this!..

What I’m after - a left ‘nav’ area that starts off screen, if the user wants it - it appears, but pushes the content to the right - but regardless of the with of the screen (yes it ‘may’ result in horizontal scroll) I want BOTH divs to remain side-by-side.

here’s the code - you’ll see the issue if you make your browser slightly wider then the “B” box…then show the “A” box, it slides and wraps…ugh!

<script type=“text/javascript” language=“javascript”>
function slideIt(){
var slidingDiv = document.getElementById(“container”);
var stopPosition = 0;
if (parseInt(slidingDiv.style.left) < stopPosition ) {
slidingDiv.style.left = parseInt(slidingDiv.style.left) + 12 + “px”;
setTimeout(slideIt, 1);
}
}

function hideIt(){
var slidingDiv = document.getElementById(“container”);
var stopPosition = -200;
if (parseInt(slidingDiv.style.left) > stopPosition ) {
slidingDiv.style.left = parseInt(slidingDiv.style.left) - 12 + “px”;
setTimeout(hideIt, 1);
}
}
</script>

<div style="height:30px; background-color:#CCC; text-align:center; ">
HEADER
</div>
<div id=“bolt4-ui” style=“margin:auto; text-align:left; min-width:1024px; float:left;”>
<div id=“container” style="position:absolute; left:-200px; ">
<div id=“d1” style="float:left; width:200px; height:200px; background-color:#930; margin-right:15px; "><a href=“javascript:hideIt()”>Hide A</a><br />
<font size=“32”>A</font></div>
<div id=“d2” style=“float:left; height:200px; width:800px; background-color:#C99;” ><a href=“javascript:slideIt()”>Show A</a><br />
<font size=“32”>B</font></div>
</div>
</div>
<div style="height:30px; background-color:#CCC; text-align:center;clear:both; ">
FOOTER
</div>

2

Here’s the solution I have, based on a post - the key appears to be [white-space:nowrap; display:inline-block;] and the use of SPAN instead of DIV…
(now I still have a problem with the nested DIVs not ‘sizing’ to contain the dvs or spans - I’ve read that any element with a float attribute gets rendered OUTSIDE the containing DIV, so I removed all my floats - and STILL the footer collapses to the header…

<div id=“container” style=“position:absolute; left:-200px; white-space:nowrap; display:inline-block;”>
<span id=“d1” style="width:200px; height:200px; background-color:#930; margin-right:15px; "><a href=“javascript:hideIt()”>Hide A</a><br /><font size=“32”>A</font></span>
<span id=“d2” style="width:800px; height:200px; background-color:#C99; " ><a href=“javascript:slideIt()”>Show A</a><br /><font size=“32”>B</font></span>
</div>

3

Try setting the ‘container’ element’s width as follows:
<div id=“container” style="position:absolute; left:-200px;width:1024px ">

4

thx Kevin, no love thought… you’ll note i made the container div wide enough to take a large amount of scroll, but the wrap still happens…I also tried a display:inline-block; that did nothing …

(use same javascript)

<div style="height:30px; background-color:#CCC; text-align:center; ">
HEADER
</div>
<div id=“bolt4-ui” style=“margin:auto; text-align:left; min-width:1524px; float:left; display:inline-block;”>
<div id=“container” style=“position:absolute; left:-200px; display:inline-block;”>
<div id=“d1” style=“float:left; width:200px; height:200px; background-color:#930; margin-right:15px; display:inline-block;”><a href=“javascript:hideIt()”>Hide A</a><br /><font size=“32”>A</font></div>
<div id=“d2” style=“float:left; width:800px; height:200px; background-color:#C99; display:inline-block;” ><a href=“javascript:slideIt()”>Show A</a><br /><font size=“32”>B</font></div>
</div>
</div>
<div style="height:30px; background-color:#CCC; text-align:center;clear:both; ">
FOOTER
</div>