move div tag with javascript

Amzul · #1 September 3rd, 2008, 08:51 AM

hello ppl - long time....

i was wondring how i can get the position of a <div> tag,
i want to move it to the left or right on a press of a button

please help
thanks

Dormilich · #2 September 3rd, 2008, 08:59 AM

You can accomplish that by changing the CSS properties (good candidates are: position, left, right, top, bottom, padding and margin). An element's CSS property is accessible via [element].style.[cssProperty].

regards

Amzul · #3 September 10th, 2008, 08:26 AM

thanks man for your fast reply and sorry for my late one :(

still thats not working for me
here is what i done:

file.cs:
[CODE=css]div{
background:#999999;
width:200px;
height:100px;
}
div.test{
left:100px;
}[/code]
javascript function:
[CODE=javascript]function Find(x){
//alert(document.getElementById(x).style.position);
pos = document.getElementById(x).style.position;
document.getElementById(x).style.position = pos + 150;
}[/code]thats my main page:
[HTML]<body>
<div id="mydiv" class="test">
text.text.text.text.text.text.text<br />
<a href="#" onClick="Find('mydiv');">move</a></div>
</body>[/HTML]

what am i doing wornge here :\
thanks

Dormilich · #4 September 10th, 2008, 09:43 AM

Quote:

Originally Posted by Amzul

[CODE=javascript]function Find(x){
//alert(document.getElementById(x).style.position);
pos = document.getElementById(x).style.position;
document.getElementById(x).style.position = pos + 150;
}[/code]
what am i doing wornge here :\
thanks

I think you mixed position with (say) left. values for element.style.position are: absolute, relative, static, fixed. you probably meant element.style.left. and you forgot the 'px'.

note: Trying myself (FF 3.01/Mac OS 10.4.11) I had no problems setting the element's style this way, but I could get the settings only through:
[CODE=javascript]var elem = document.getElementById("_elem_id_");
var cs = window.getComputedStyle(elem, null);
var val = cs.left; // only works for absolute values (i.e. no em, ex, %)[/code]
dunno how it is with IE
FF/Opera can also use the methods getPropertyValue() / getPropertyCSSValue() (DOM level 2 - style)

regards

What is Bytes?

Popular Articles