473,219 Members | 2,148 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,219 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 4887
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

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

Similar topics

by: Pieter Van Waeyenberge | last post by:
Hello In the code below, theres a DIV, a TABLE and another DIV , each with an image in it. When i read out the offsetLeft/Top from imgB in the table , i get offset values relative to the...
by: Saqib Ali | last post by:
Please excuse me, this is a fairly involved question that will likely require you to save the file below to a file and open it in a browser. I use Mozilla 1.5, so the problem I describe below...
by: Keith Thornhill | last post by:
I'm trying to calculate the top and left distance from the side of the browser of an object (either absolutely or relatively positioned) and i'm running into a weird problem as i'm trying to make...
by: ara.pehlivanian | last post by:
I've got a script that determines the true position of an element in the page by cycling up the .offsetParent elements all the way up to the <body> element and tallying up the .offsetLeft values...
by: Matt Kruse | last post by:
See: http://www.mattkruse.com/temp/offsetleft.html It appears that the offsetLeft value in IE6 (other versions not tested) incorrectly ignores the border width on a DIV when there is a width:...
by: Gary Coutts | last post by:
Hi, I am developing a website using Visual Studio .Net 2003. When reading offsetLeft, in a javascript function, the result is fine when run under I.E. but gives wrong results when run under...
by: montybytes | last post by:
Hi there, Although, I have already placed this question in the HTML/CSS section, perhaps it might be worthwhile asking the question here as well. I have a JavaScript function which retrieves...
by: ehud37new | last post by:
this script work fine in IE but not in FireFox where is the problem? here is the script /*------------------------------------------------------------------ File: menu.js ...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.