Simple div animation?

RIRedinPA · August 25, 2008

Hi

I'm building a site where part of the display will be similar to how you can split an excel spreadsheet so one section of the sheet remains in place and the other section slides beneath - it allows you to see the headers and fields when scrolling through large sheets.

Anyway, I have this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--


#bodywrapper { 
font: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
background-color: #996600;
z-index: 2;
}

#leftframe { 
position: absolute; 
top: 200px;
left: 0px;
width: 400px;
background-color: #996600;
border: 1px solid red; 
text-align: right; 
z-index: 2;
}

#rightframe { 
position: absolute; 
top: 200px;
width: 1800px;
background-color: #996600;
border: 1px solid blue; 
z-index: 1;
overflow: hidden; 
}

#scrollers  { 
position: absolute; 
top: 170px;
left: 300px;
background-color: #ffffff;
width: 100px;
}

-->
</style>

<script language="javascript">

function slidetable(dir) {
	var obj = document.getElementById("rightframe");
	var endPos = 0;
	var curPos = parseInt(obj.style.left); 

	if (dir == "left") { 
		while(curPos > endPos) { 
			curPos = parseInt(obj.style.left);
			obj.style.left = (parseInt(obj.style.left) - 10) + "px";
			setTimeout(slidetable(dir),500);
		}
	} else { 
		while(curPos < 401) { 
			curPos = parseInt(obj.style.left);
			obj.style.left = (parseInt(obj.style.left) + 10) + "px";
			setTimeout(slidetable(dir),500);
		}
	}	
}
</script>

</head>

<body>

<div id="bodywrapper">
<div id='scrollers'><a href="javascript:void(0);" onmousedown="slidetable('left');"><</a>   <a href="javascript:void(0);" onmousedown="slidetable('right');">></a></div>
<div id="leftframe">
    
    <table cellpadding="2" cellspacing="0" border="1" width="400">
        <tr valign="top">
        <td alignb="right">Test1</td>
        </tr>
        </table>
    
    </div>
<div id="rightframe" style="left: 401px;">
    
    	<table cellpadding="2" cellspacing="0" border="1">
        <tr valign="top">
        <td>Test1</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Middle</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
           <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
           <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
           <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>End</td>
        </tr>
        </table>
    
    
    </div>
</div>
</body>
</html>

It works in that it will move the one div beneath the other but it doesn't animate, it jumps to the end position in one quick move. Any hints to put me on the right track here?

Sign In

Simple div animation?

Recommended Posts

RIRedinPA

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information