move div tag with javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Amzul
    New Member
    • Oct 2007
    • 130

    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
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    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

    Comment

    • Amzul
      New Member
      • Oct 2007
      • 130

      #3
      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:#999 999;
      width:200px;
      height:100px;
      }
      div.test{
      left:100px;
      }[/CODE]
      javascript function:
      [CODE=javascript]function Find(x){
      //alert(document. getElementById( x).style.positi on);
      pos = document.getEle mentById(x).sty le.position;
      document.getEle mentById(x).sty le.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

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        move div tag with javascript

        Originally posted by Amzul
        [CODE=javascript]function Find(x){
        //alert(document. getElementById( x).style.positi on);
        pos = document.getEle mentById(x).sty le.position;
        document.getEle mentById(x).sty le.position = pos + 150;
        }[/CODE]
        what am i doing wornge here :\
        thanks
        I think you mixed position with (say) left. values for element.style.p osition are: absolute, relative, static, fixed. you probably meant element.style.l eft. 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.getEle mentById("_elem _id_");
        var cs = window.getCompu tedStyle(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 getPropertyValu e() / getPropertyCSSV alue() (DOM level 2 - style)

        regards
        Last edited by Dormilich; Sep 10 '08, 08:58 AM. Reason: additional info

        Comment

        Working...