Problems in offsetLeft.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Nitinkcv
    New Member
    • Mar 2007
    • 65
    #1

    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:

    Code:
    <HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">

function moveDivs(){

var movDiv_1 = document.getElementById('ContentMain_1');
var movDiv_2 = document.getElementById('ContentMain');

movDiv_1.style.position = 'relative';
movDiv_1.style.left = parseInt(movDiv_2.offsetLeft) + 'px';

movDiv_2.style.position = 'relative';
movDiv_2.style.left = parseInt(movDiv_1.offsetLeft) + 'px';

//alert("ContentMain_1 top position" + movDiv_1.offsetTop);
//alert("ContentMain_1 left position" + movDiv_1.offsetLeft);

//alert("ContentMain top position" + movDiv_2.offsetTop);
//alert("ContentMain left position" +  movDiv_2.offsetLeft);
}

</SCRIPT>

<Body>

<div id="ContentMain" style="float:left;width: 200px; height: 24px; overflow: visible;background-color:#cecece">
	<div style="float:left">Content 1</div>
	<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>
</div>

<div id="ContentMain_1" style="float:left;padding-left:20px;">
<div  style=" width: 200px; height: 24px; overflow: visible;background-color:#cecece">
	<div style="float:left">Content 2</div>
	<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>
</div>
</div>

<div id="ContentMain_2" style="float:left;padding-left:20px;">
<div style="width: 200px; height: 24px; overflow: visible;background-color:#cecece">
	<div style="float:left">Content 3</div>
	<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>
</div>
</div>

</BODY>
</HTML>
    Could anyone please help me out?

    Thanks in advance.
    Tags: offsetleft javascript
    • zaphod42
      New Member
      • Oct 2008
      • 55
      #2
      well...... first of all, you set the elements position to 'relative'...th e 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'.
      Code:
      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.

      Code:
      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....spec ifically the ones BEFORE it. look up "insertBefo re", that may be what you really need...

        Comment

        • Nitinkcv
          New Member
          • Mar 2007
          • 65
          #3
          Thanks a lot. insertBefore was exactly the solution i was looking for. Short and precise.

            Comment

            • Nitinkcv
              New Member
              • Mar 2007
              • 65
              #4
              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.

                Comment

                Previous template Next
                Working...