JavaScript move div

This page discusses - JavaScript move div

Ads

JavaScript move div

        

This section illustrates you how to move a div element on the window using JavaScript.

In the following code, we have defined a div element consisting of text 'Hello World' in order to move it on the browser. For this, we have used onClick event handler to specifiy what should happen when the mouse is clicked on the window. The properties clientX and clientY of event object indicates the cursor's horizontal and vertical position when the event occurs relative to the upper-left corner of the window and the pageX and pageY provide coordinates in the document's space. To set the element top position relative to the next element top edge we have used the property style.top and the style.left sets the position of the left edge of an element relative to the left edge of the next element. This code works correctly on Internet Explorer.

Here is the code:

<html>
<h2>Move div</h2>
<script type="text/javascript">
var X, Y;
window.document.onclick=moveDiv;
function moveDiv(){
X = (document.layers) ? e.pageX :event.clientX
Y = (document.layers) ? e.pageY :event.clientY
document.getElementById('div').style.position="absolute";
document.getElementById('div').style.left=X;
document.getElementById('div').style.top=Y;
}
</script>
<div id="div" style="width:85px;height:32px;border:solid;">Hello World</div>
</html>

Output will be displayed as:

If you click anywhere on the window, the element will move to that position.

Download Source Code:

        

Advertisements

Ads
Share on Google+Share on Google+

JavaScript move div

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

Ads
 

Discuss: JavaScript move div  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads