PDA

View Full Version : Resolved 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:
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.


<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.