471,850 Members | 1,062 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,850 software developers and data experts.

Problems in offsetLeft.

Hi all,

Im trying to do the following:

Have 3 divs which are placed side by side. each has a two links 'left' and 'right'. Say on click of the 'left' hyperlink of the 2nd div(middle), the 1st div should take the place of the middle div, while the middle one should take the place of the 1st place.

I'm using the prop offsetLeft, however have run into some issues. My code is shown below:

Expand|Select|Wrap|Line Numbers
  2. <HTML>
  3. <HEAD>
  4. <TITLE>Document Title</TITLE>
  5. </HEAD>
  6. <BODY>
  7. <SCRIPT language="JavaScript">
  9. function moveDivs(){
  11. var movDiv_1 = document.getElementById('ContentMain_1');
  12. var movDiv_2 = document.getElementById('ContentMain');
  14. movDiv_1.style.position = 'relative';
  15. movDiv_1.style.left = parseInt(movDiv_2.offsetLeft) + 'px';
  17. movDiv_2.style.position = 'relative';
  18. movDiv_2.style.left = parseInt(movDiv_1.offsetLeft) + 'px';
  20. //alert("ContentMain_1 top position" + movDiv_1.offsetTop);
  21. //alert("ContentMain_1 left position" + movDiv_1.offsetLeft);
  23. //alert("ContentMain top position" + movDiv_2.offsetTop);
  24. //alert("ContentMain left position" +  movDiv_2.offsetLeft);
  25. }
  27. </SCRIPT>
  29. <Body>
  31. <div id="ContentMain" style="float:left;width: 200px; height: 24px; overflow: visible;background-color:#cecece">
  32.     <div style="float:left">Content 1</div>
  33.     <div><a href="#" style="float:right;text-decoration:none">Right</a><a href="#" style="float:right;padding-right:3px;text-decoration:none">Left</a></div>
  34. </div>
  36. <div id="ContentMain_1" style="float:left;padding-left:20px;">
  37. <div  style=" width: 200px; height: 24px; overflow: visible;background-color:#cecece">
  38.     <div style="float:left">Content 2</div>
  39.     <div><a href="#" style="float:right;text-decoration:none">Right</a><a href="#" onclick="moveDivs();" style="float:right;padding-right:3px;text-decoration:none">Left</a></div>
  40. </div>
  41. </div>
  43. <div id="ContentMain_2" style="float:left;padding-left:20px;">
  44. <div style="width: 200px; height: 24px; overflow: visible;background-color:#cecece">
  45.     <div style="float:left">Content 3</div>
  46.     <div><a href="#" style="float:right;text-decoration:none">Right</a><a href="#" style="float:right;padding-right:3px;text-decoration:none">Left</a></div>
  47. </div>
  48. </div>
  50. </BODY>
  51. </HTML>
Could anyone please help me out?

Thanks in advance.
Oct 25 '08 #1
3 4690
well...... first of all, you set the elements position to 'relative'...the idea of relative is that it positions it relative to it's siblings....if you could move it, it would no longer be relative, it would have to be 'absolute'.
Expand|Select|Wrap|Line Numbers
  1. movDiv_1.style.position = 'relative';
And since offsetLeft ALWAYS returns a number, (not to mention that when you add 'px' you change it to a string anyway) , the parseInt is not really necessary.

Expand|Select|Wrap|Line Numbers
  1. movDiv_1.style.left = parseInt(movDiv_2.offsetLeft) + 'px';
but if you want the divs to use the relative position to "snap" themselves into place, you might want to consider spans....divs are block elements (they align vertically by default) and spans are inline (horizontal align). You should also look into using the node structure....

the 'relative' position of an element is, as I said before, determined by it's iblings....specifically the ones BEFORE it. look up "insertBefore", that may be what you really need...
Oct 25 '08 #2
Thanks a lot. insertBefore was exactly the solution i was looking for. Short and precise.
Oct 25 '08 #3
Hmmm.. seems a strange problem with insertBefore in firefox. It rearranges the div only after clicking the link twice.

Found the prob

Seems like firefox takes up whitepaces as siblings.
Oct 25 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Keith Thornhill | last post: by
3 posts views Thread by ara.pehlivanian | last post: by
2 posts views Thread by Gary Coutts | last post: by
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.