Slide DIV horizontally

Gexus · January 7, 2007, 12:24am

Does anyone know of any javascript that can slide a div horizontally?

Something similar to what is used on this site http://cyberix-design.cz/ for the “rss feedy” but instead of vertical, have it horizontal.

I would like to basically have x number of divs positioned to the left, then when you click the approprate link, it moves them into view.

Thanks!

7stud · January 7, 2007, 1:56am

This seems to work:

<html>
<head><title></title>

<script type="text/javascript" language="javascript">
//<![CDATA[

window.onload=function()
{
	document.getElementById("d2").onclick = slideIt;
};

function slideIt()
{
	var slidingDiv = document.getElementById("d1");
	var stopPosition = 50;
	
	if (parseInt(slidingDiv.style.left) < stopPosition )
	{
		slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
		setTimeout(slideIt, 1);
	}
}

//]]>
</script>
</head>
<body>

<div id="d2">click here to slide the div</div>
<div id="d1" style="position:absolute; left:-150px; top:30px">horizontally sliding div</div>

</body>
</html>

Gexus · January 7, 2007, 3:03am

Awsome, thanks a lot!

Gexus · January 7, 2007, 3:13am

I changed it slightly so that I could define the ID when calling the function, but for some reason the second time around, for the settimeout, the id is not defined… any idea?

Thanks!

<html>
<head><title></title>

<script type="text/javascript" language="javascript">
//<![CDATA[



function slideIt(id)
{
	
	
	var slidingDiv = document.getElementById(id);
	var stopPosition = 500;
	
	if (parseInt(slidingDiv.style.left) < stopPosition )
	{
		
		slidingDiv.style.left = parseInt(slidingDiv.style.left) + 50 + "px";
		setTimeout("slideIt(id)", 1);
		
	}
}

//]]>
</script>
</head>
<body>

<div id="d2"><a href="#" onclick="slideIt('d1');">click</a></div>
<div id="d1" style="position:absolute; left:-150px; top:30px;">horizontally sliding div</div>

</body>
</html>

Gexus · January 7, 2007, 3:14am

Nevermind, I got it fixed, thanks

7stud · January 7, 2007, 4:03am

It would be better to optimize it like the following, so you don’t have to keep using document.getElementById everytime to get the sliding div:

<html>
<head><title></title>

<script type="text/javascript">
//<![CDATA[


var stopPosition = 50;
var slidingDiv = "";

window.onload=function()
{
	document.getElementById("d1").onclick = slideIt;
	slidingDiv = document.getElementById("d2");
};

function slideIt()
{
	if (parseInt(slidingDiv.style.left) < stopPosition )
	{
		slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
		setTimeout(slideIt, 1);
	}
}

//]]>
</script>
</head>
<body>

<div id="d1">click here to slide the div</div>
<div id="d2" style="position: absolute;	left:-150px; top:30px">horizontally sliding div</div>

</body>
</html>

luvcss · January 17, 2007, 5:54am

How do you make it slide back to it’s original place?

mann0172 · December 12, 2008, 5:09am

window.onload=function()
{
document.getElementById(“d2”).onclick = slideIt;
document.getElementById(“d3”).onclick = slideIn;
};

function slideIt()
{

var slidingDiv = document.getElementById("d1");
var stopPosition = 50;

if (parseInt(slidingDiv.style.left) &lt; stopPosition )
{
	slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
	setTimeout(slideIt, 1);
}

}

function slideIn()
{

var slidingDiv = document.getElementById("d1");
var stopPosition = -150;


if (parseInt(slidingDiv.style.left) &gt; stopPosition )
  {
    slidingDiv.style.left = parseInt(slidingDiv.style.left) - 2 + "px";
    setTimeout(slideIn, 1);
  }

}
//]]>
</script>
</head>
<body>

<div id=“d1” style=“position:absolute; left:-150px; top:230px”>horizontally sliding div</div>

</body>
</html>

jatazoulja · January 30, 2009, 12:26pm

Hi Thanks for the code, Did a little modification for it to slide back…

I am about to use this on XUL hope this works!



<html>
<head><title></title>

<script type="text/javascript" language="javascript">
//<![CDATA[

// window.onload=function() {
//	document.getElementById("d2").onclick = slideIt("toRight");
//	document.getElementById("d3").onclick = slideIt("toLeft");
// };

function slideIt(actionReturn) {
	var slidingDiv = document.getElementById("d1");
	var stopPosition = 50;
	var startPosition = slidingDiv.offsetWidth+slidingDiv.offsetWidth;
	if (actionReturn ==  "toRight") {
		if (parseInt(slidingDiv.style.left) >= 0 )
		{
			slidingDiv.style.left = parseInt(slidingDiv.style.left) - 20 + "px";
			setTimeout(slideIt, 1);
		}
	}
	if (actionReturn ==  "toLeft") {
		if (parseInt(slidingDiv.style.left) < startPosition ) {
			slidingDiv.style.left = parseInt(slidingDiv.style.left) + 20 + "px";
			setTimeout(slideIt, 1);
		}
	}
}
//]]>
</script>
</head>
<body>

<div id="d2" onclick="slideIt('toRight');">click here to slide the div</div>
<div id="d1" style="position:absolute; left:-10px; top:30px">horizontally sliding div</div>
<div id="d3" onclick="slideIt('toLeft');">click here to slide the div</div>
</body>
</html>

again!

Cheers!!

jpmyob · October 21, 2010, 2:29pm

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!

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>