Slide DIV Left and Right

**Swivelgames** · 12-21-2008, 09:33 PM

Hey guys. Recently I've been working on a simple project where I need some flexible code that I can integrate in to some prewritten functions I made.

I've sort of ran into a problem. In an attempt to make the code cross-browser compatible I wrote in many different checks and such but for some reason IE is popping up an error everytime I try and execute the program.

Heres the code:

Code:

Defective Code Removed

All this does is move a DIV left and right smoothly on the page. Works great in Opera and Firefox!

I found a solution to the problem. The script below will allow you to move a DIV left and right on the page. Its been tested to work in the latest versions of IE, Fx, and Opera.

Code:

<html>
<head>
<title>DIV Mover Test</title>
<style type="text/css">
body {
	font-family: arial, helvetica, verdana;
	font-size: 12pt;
}
#theDIV {
	position: relative;
	top: 0; left: 0px;
	border: 1px solid #ababab;
	background #fff;
	color: #666;
	padding: 5px;
	width: 80px;
}
input {
	font-family: Courier, Monospaced;
}
</style>
<script type="text/javascript">
NS6 = (document.getElementById&&!document.all);
IE = (document.all);
NS = (navigator.appName=="Netscape"&&navigator.appVersion.charAt(0)=="4");
moving = setTimeout('null',1);
var divobj, speed = 20;

function movediv(id,len) {
	divobj = document.getElementById(id).style;
	if(isNaN(parseInt(divobj.left))) divobj.left = "0px";
	elen = parseInt(divobj.left)+len;
	moveit(len,elen);
	return true;
}

function moveit(len,elen) {
	if(((len>0)&&((NS6||NS)&&parseInt(divobj.left)<elen)||(IE&&divobj.pixelLeft<elen))
	   || ((len<0)&&((NS6||NS)&&parseInt(divobj.left)>elen)||(IE&&divobj.pixelLeft>elen))) {
		clearTimeout(moving);
		moving = setTimeout('moveit('+len+','+elen+')',speed);
		num=(len>0)?10:-10;
		if (IE)
			divobj.pixelLeft += num;
		else if (NS6)
			divobj.left = parseInt(divobj.left)+num+"px";
		else if (NS)
			divobj.left = parseInt(divobj.left)+num;
	} else {
		clearTimeout(moving);
		moving=setTimeout('null',1);
	}
}
</script>
</head>
<body>
<input type="button" value="LT" onClick="movediv('theDIV',-150);" /><input type="button" value="RT" onClick="movediv('theDIV',150);" />
<div id="theDIV">Some Text!</div>
</body>
</html>

**Nile** · 12-21-2008, 09:53 PM

In Firefox 3.0.5 it only scrolls right, and I get the same results with Opera 9.63

**Swivelgames** · 12-21-2008, 10:03 PM

Right now you can only scroll one way.

After you've started to scroll right you can't scroll left and vise-versa.

I have a feeling thats something wrong with the really large conditional statement at the start of moveit() but I haven't fiddled with that yet. I'm just trying to get it cross-browser compatible first.

Thread: Slide DIV Left and Right

Thread Tools

Search Thread

Slide DIV Left and Right

Bookmarks

Bookmarks

Posting Permissions