Problems in offsetLeft.

65 New Member

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

  
<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.

Oct 25 '08 #1

Subscribe Reply

4899

zaphod42

New Member

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

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

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

Nitinkcv

New Member

Thanks a lot. insertBefore was exactly the solution i was looking for. Short and precise.

Oct 25 '08 #3

Nitinkcv

New Member

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

Similar topics

2369

Different offsetLeft/Top calculation for elements contained in DIV and TABLE/TD

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...

Javascript

1995

Why does an invisible FORM tag have offSetLeft == 8??

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...

Javascript

6784

offsetLeft/Top Bug in Firefox? (value is 8)

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...

Javascript

7602

Safari offsetParent/offsetLeft Problem!

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...

Javascript

7706

offsetLeft bug with borders in IE when width: is specified?

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:...

Javascript

2096

Firefox offsetLeft problem

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...

ASP.NET

5455

Element offsetLeft producing a wrong value in IE6

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...

Javascript

2004

script problems in FireFox

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 ...

Javascript

7132

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7009

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

6899

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

7390

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

4602

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3103

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3094

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1427

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

302

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General