move div tag with javascript

Amzul · #1 September 3rd, 2008, 07: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, 07: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, 07: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:

Expand|Select|Wrap|Line Numbers

 div{

    background:#999999;

    width:200px;

    height:100px;

}

div.test{

    left:100px;

}

javascript function:

Expand|Select|Wrap|Line Numbers

 function Find(x){

    //alert(document.getElementById(x).style.position);

    pos = document.getElementById(x).style.position;

    document.getElementById(x).style.position = pos + 150;

}

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, 08:43 AM

Quote:

Originally Posted by Amzul

Expand|Select|Wrap|Line Numbers

 function Find(x){

    //alert(document.getElementById(x).style.position);

    pos = document.getElementById(x).style.position;

    document.getElementById(x).style.position = pos + 150;

}

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:

Expand|Select|Wrap|Line Numbers

 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, %)

dunno how it is with IE
FF/Opera can also use the methods getPropertyValue() / getPropertyCSSValue() (DOM level 2 - style)

regards

move div tag with javascript

Popular Articles

What is Bytes?