By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,831 Members | 1,031 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,831 IT Pros & Developers. It's quick & easy.

Problems in offsetLeft.

P: 65
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
  1.  
  2. <HTML>
  3. <HEAD>
  4. <TITLE>Document Title</TITLE>
  5. </HEAD>
  6. <BODY>
  7. <SCRIPT language="JavaScript">
  8.  
  9. function moveDivs(){
  10.  
  11. var movDiv_1 = document.getElementById('ContentMain_1');
  12. var movDiv_2 = document.getElementById('ContentMain');
  13.  
  14. movDiv_1.style.position = 'relative';
  15. movDiv_1.style.left = parseInt(movDiv_2.offsetLeft) + 'px';
  16.  
  17. movDiv_2.style.position = 'relative';
  18. movDiv_2.style.left = parseInt(movDiv_1.offsetLeft) + 'px';
  19.  
  20. //alert("ContentMain_1 top position" + movDiv_1.offsetTop);
  21. //alert("ContentMain_1 left position" + movDiv_1.offsetLeft);
  22.  
  23. //alert("ContentMain top position" + movDiv_2.offsetTop);
  24. //alert("ContentMain left position" +  movDiv_2.offsetLeft);
  25. }
  26.  
  27. </SCRIPT>
  28.  
  29. <Body>
  30.  
  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>
  35.  
  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>
  42.  
  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>
  49.  
  50. </BODY>
  51. </HTML>
  52.  
Could anyone please help me out?

Thanks in advance.
Oct 25 '08 #1
Share this Question
Share on Google+
3 Replies


P: 55
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

P: 65
Thanks a lot. insertBefore was exactly the solution i was looking for. Short and precise.
Oct 25 '08 #3

P: 65
Hmmm.. seems a strange problem with insertBefore in firefox. It rearranges the div only after clicking the link twice.

Found the prob
here

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.