...

View Full Version : How to move an div tags using javascript?



kbundy
11-11-2004, 08:52 AM
Hi guy

I am a newbie in javascript and i am currently stuck in a testing script that i want it to have a text string moved to a new position using the javascript.

This is the simple code, I wrote:

<html>
<head>
<script language="javascript">

function testing() {
var a = document.all["div"];
a.style.left = 500+"px";
a.style.top = 900+"px";
}

</script>
</head>
<body onLoad="javascript: testing()">
<div id="div">
blah
</div>
</body>
</html>

Thank you if anyone can help me how to solve it... :)

Mhtml
11-11-2004, 09:02 AM
Give the div a style attribute for it's positioning, ie; absolute or relative.



<div style="position:absolute" id="div">
blah
</div>

kbundy
11-11-2004, 10:51 AM
Thanks for reply

Is it possible to use javascript to dynamically setting the div's position or other things like img's position in different position.

i.e. Like if i have an image and want it to be moved freely around the browser.

:o

LynxGrr
11-11-2004, 11:11 AM
Are you talking about drag n drop?

You could do this with some text fields. This is untested




function moveMyImage()
{
document.getElementById('myDiv').style.left = document.forms['myForm'].elements['xPos'].value ;
document.getElementById('myDiv').style.top = document.forms['myForm'].elements['yPos'].value ;
}



Then have a little form on your page, with two text inputs and a button which calls the function onclick.

kbundy
11-11-2004, 12:03 PM
<html>
<head>
<script language="javascript">
function moveMyImage()
{
document.getElementById('myDiv').style.left = 356;
document.getElementById('myDiv').style.top = 566;
}

</script>
</head>
<body >
<div id="myDiv" onClick="javascript: moveMyImage();">blah</div>
</body>
</html>


The above code is the thing that i currently testing on but it doesn't seems to position correctly. I have put this attribute in the div as well ( left="300px" ). But it works only this attribute: align="CENTER"



Are you talking about drag n drop?

You could do this with some text fields. This is untested




function moveMyImage()
{
document.getElementById('myDiv').style.left = document.forms['myForm'].elements['xPos'].value ;
document.getElementById('myDiv').style.top = document.forms['myForm'].elements['yPos'].value ;
}



Then have a little form on your page, with two text inputs and a button which calls the function onclick.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum