Connecting Tech Pros Worldwide Help | Site Map
Reply
 
LinkBack Thread Tools Search this Thread
  #1  
Old September 3rd, 2008, 08:51 AM
Member
 
Join Date: Oct 2007
Location: israel, Tel Aviv
Posts: 95
Default move div tag with javascript

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
Reply
  #2  
Old September 3rd, 2008, 08:59 AM
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Age: 31
Posts: 895
Default

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
Reply
  #3  
Old September 10th, 2008, 08:26 AM
Member
 
Join Date: Oct 2007
Location: israel, Tel Aviv
Posts: 95
Default

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
  1. div{
  2.     background:#999999;
  3.     width:200px;
  4.     height:100px;
  5. }
  6. div.test{
  7.     left:100px;
  8. }
javascript function:
Expand|Select|Wrap|Line Numbers
  1. function Find(x){
  2.     //alert(document.getElementById(x).style.position);
  3.     pos = document.getElementById(x).style.position;
  4.     document.getElementById(x).style.position = pos + 150;
  5. }
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
Reply
  #4  
Old September 10th, 2008, 09:43 AM
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Age: 31
Posts: 895
Default move div tag with javascript

Quote:
Originally Posted by Amzul
Expand|Select|Wrap|Line Numbers
  1. function Find(x){
  2.     //alert(document.getElementById(x).style.position);
  3.     pos = document.getElementById(x).style.position;
  4.     document.getElementById(x).style.position = pos + 150;
  5. }
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
  1. var elem = document.getElementById("_elem_id_");
  2. var cs = window.getComputedStyle(elem, null);
  3. 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

Last edited by Dormilich; September 10th, 2008 at 09:58 AM. Reason: additional info
Reply
Reply

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 205,248 network members.