Jump Example Source




// Copyright © 2002 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.


<html><head><title>Cross-Browser Div Moving</title>
<script type="text/javascript">
<!--


function moveDiv()
{
  var the_style = getStyleObject("myDiv");
  var the_left = parseInt(the_style.left) + 100;
  var the_top = parseInt(the_style.top) + 100;
  if (document.layers)
  {
    the_style.left = the_left;
    the_style.top = the_top;
  }
  else 
  {
    the_style.left = the_left + "px";
    the_style.top = the_top + "px";  
  }
}

  function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its
    if(document.getElementById && document.getElementById(objectId)) {
	// W3C DOM
	return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
	// MSIE 4 DOM
	return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
	// NN 4 DOM.. note: this won't find nested layers
	return document.layers[objectId];
    } else {
	return false;
    }
} // getStyleObject

// -->
</script>
</head>
<body>
<h1>Moving the Div</h1>
<a href="#" onClick="moveDiv(); return false;">move the div</a>

<div id="myDiv" style="position:absolute;top:100px;left:10px;">
This text is in the DIV and it's ready to move!
</div>

</body>
</html>