etablishing the left and top position of a relative div layer

[mattquantic]

Hi. I amtrying to use JS to establish the top and left positions of a relativly positioned div layer.

But, without setting those properties initially.

For example:

<div id="div1" style="position:relative;z-index:1;">
   hello
</div>          
<script type="text/javascript" language="JavaScript">
   alert(document.getElementById('div1').style.left);
</script>

then test the change by using: (added some <br><br>s)

<br><br>
<div id="div1" style="position:relative;z-index:1;">
   hello
</div>          
<script type="text/javascript" language="JavaScript">
   alert(document.getElementById('div1').style.left);
</script>

The style property is looking for the preset attributes, which are not there - which is why I'd imagine its not working. But, the div must know its position? Is there any other way that I can determine this?

M@)

 

[tsdragon]

If you don't actually SET a value for left (or top) then you won't get anything back. In IE you can try using currentStyle instead of style. That might get you what you want. Otherwise you can use offsetLeft to determine the position of the div relative to it's parent. If you need to know it's absolute position, you have to walk up the dom tree and aggregate the offsetLefts for all parents.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[mattquantic]

Hi Tracy. Thanks for your reply.

This is my problem.

I have two divs, one inside the other.

Within the second div there is a call that brings a layer onto the page at specific coordinates (window.event.clientX etc).

The problems is that if you add content above the first div, the coordinate values returned do not take this into consideration.

It is the change in absolute position that I need to measure.

Is it possible to get the absolute coordinates of say an image that I put in the div and use that?

How would I go up each parent div and get its offset and add it to a running total?

M@)

 

[mattquantic]

I've reliased that I maybe not being too clear. I have setup an example page.

On this page there are a number of nested divs. And in two different divs there is an image that places a layer on the screen - supposed to be next to the image.

But, when inside all of the other divs - the layer gets placed miles away.

I am fine with this - I could add an offset attribute to the tag that places the scripts. But, the amount it moves depends on the size of the browser window - but seamingly not with a consistant factor...

http://autosite.quanticsolutions.co.uk/temp/help.cfm

Thank you so much if you have time to look.

M@)

 

[tsdragon]

Here's a handy little function I wrote to get element metrics:

function elementMetrics(elemId) {
  var mets = Array();
  var oo = document.getElementById(elemId);
  var ew = oo.offsetWidth;
  var eh = oo.offsetHeight;
  var el = oo.offsetLeft;
  var et = oo.offsetTop;
  var oo = oo.parentElement;
  while ( oo.tagName != "HTML") {
    el += oo.offsetLeft;
    et += oo.offsetTop;
    oo = oo.parentElement;
  }
  mets['elementWidth'] = ew;
  mets['elementHeight'] = eh;
  mets['elementLeft'] = el;
  mets['elementTop'] = et;
  return mets;
}

This function returns an associative array of element metrics. You would use it like this:

var metrics = elementMetrics('[i]element-name[/i]');
obj.style.width = metrics['elementWidth'];

[red]NOTE:[/red]This has only been tested in IE! I think at the least you'll have to change parentElement to parentNode to get it to work in FF/NS.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[mattquantic]

Wow. That great. I have added a trace on the two different roolovers that uses your script.

If i use the difference between these numbers as my 'fix' (offset in the tag) value - it should work?

http://autosite.quanticsolutions.co.uk/temp/help2.cfm

M@)?

 

[mattquantic]

the two values generated are more than 2000px apart? I don't get it... (

 

[mattquantic]

Is it because these are screen value rather the the browser?

 

[tsdragon]

The left and top values returned for the first element are negative, that's why there's such a big difference. I'll have to take a look at it and see what's going on.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[tsdragon]

The values for the information that function returns are in PIXELS. They should be relative to the browser window.

You are moving one of the elements to left = -2000! Since you're not allowed to move something offscreen, that doesn't work, and I don't know what it's actually being set to.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[mattquantic]

Thank you so much. I have sorted it, by adding width attribtes to the divs...

Thanks again. M@)

 

[tsdragon]

You're welcome. I hope someone else can use the function too.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.