Dynamically position DIV with JavaScript?

July 12, 08 by the programmer

If you want to position a DIV element using javascript this is how you can do it:

Catch me if you can

<div id=”movable_div” style=”position:absolute; top:0px; left: 0px; width:100px; height:100px; background:#EAF3FA;” >Catch me if you can</div>

You can position the above DIV on any coordinates you want using the bellow JavaScrpt function:

Note that the style attribute must be there in order this to work.

function move_div(div_id, x, y){
var div = document.getElementById(div_id);
if(div){
div.style.left = x+”px”;
div.style.top = y+”px”;
}
}

The bellow code will move the above DIV to coordinates x:100. y:100 pixels

<script type=”text/javascript>

move_div(’movable_div’, 100, 100);

</script>

This entry no have comments... but you can be first.

Leave a Reply