Need help tidying up javascript table positioning code

Discussion in 'JavaScript' started by jonnyfishman, Jan 2, 2007.

0
  1. #1
    Hi,

    I have recently been working on a little bit of code that will allow me to adjust the position of a <div> element contained in an iframe. The code works but has obvious problems and I was hoping some one point me in the right direction :) .

    The code is as follows:

    
<head>

<script language="JavaScript" type="text/JavaScript">

var yPos= 0;
function down() {
if (yPos > -20) { 
yPos = yPos - 1 ;
document.getElementById("data").style.top = yPos +"px";
setTimeout("down()",00);
}}
function stopdown() {
if (yPos > -20) { 
yPos = yPos + 1;
document.getElementById("data").style.top = yPos +"px";
setTimeout("stopdown()",00);
}}
function up() {
if (yPos < 0 ) { 
yPos = yPos + 1;
document.getElementById("data").style.top = yPos +"px";
setTimeout("up()",00);
}}
function stopup() {
if (yPos < 0 ) { 
yPos = yPos - 1;
document.getElementById("data").style.top = yPos +"px";
setTimeout("stopup()",00);
}}

</script>
</head>

<body>
<div id="data" style="position:absolute; left:10px; top:0px; width:100px; height:100px;">
  Data<br>
  Data<br>
  Data<br>
  Data<br>
  Data<br>
  Data<br>
  Data<br>
  Data<br>
  
</div>
 
<div id="control" style="position:absolute; left:150px; top:150px; z-index:10; ">
<a href onMouseOver="javascript: up()" onMouseOut="javascript: stopup()">up</a>
<a href onMouseOver="javascript: down()" onMouseOut="javascript: stopdown()">down</a>
</div>
</body>
    HTML:
    The obvious limitations are that the onMouseOut function does not actually end the onMouseOver function it just negates it, this can make the script really buggy to use and can actually stop my laptop if used to much!

    This issue has got me stumped so any help would be gratefully recieved.
     
    jonnyfishman, Jan 2, 2007 IP