Read position of a element??

**Smirre** · Mar 7th, 2002, 05:09 AM

I want to read the position of a element that is retrived with getElementById function of the document object..

I have tried to read style.top and style.left with no success.
Like this:

abc = document.getElementById("test1");
dfg = document.getElementById("test2");

dfg.innerHTML = abc.style.top;

The element is a div with a link in it..

Help please!

/Smirre

**Smirre** · Mar 7th, 2002, 05:40 AM

Found this code in a other thread

This works, but can someone explain it to me....

if (document.getElementById('layer1').top) {
var to = document.getElementById('layer1').top;
}
else if (document.getElementById('layer1').pixelTop) {
var to = document.getElementById('layer1').pixelTop;
}
else if (document.getElementById('layer1').offsetTop) {
var to = document.getElementById('layer1').offsetTop;
}

The last if case is executed, why?? When does the others execute??

/Smirre

**Smirre** · Mar 7th, 2002, 05:52 AM

Right position cant be read???

Only left and top, or??

Is there any way to read width then????

/Smirre

**mendhak** · Mar 7th, 2002, 05:57 AM

dude, you're talking to yourself there.

The right position can't be read (as far as i know)
for that, get the width of the layer, as specified within the <DIV> tag and add it to the left property.

**Smirre** · Mar 7th, 2002, 07:23 AM

Anyone got any info on this: ?????????

Found this code in a other thread

This works, but can someone explain it to me....

if (document.getElementById('layer1').top) {
var to = document.getElementById('layer1').top;
}
else if (document.getElementById('layer1').pixelTop) {
var to = document.getElementById('layer1').pixelTop;
}
else if (document.getElementById('layer1').offsetTop) {
var to = document.getElementById('layer1').offsetTop;
}

The last if case is executed, why?? When does the others execute??

How do I change this code to work with 4+ browsers?? This only works with IE 5.5+ and netscape 6, or??

/Smirre

**Smirre** · Mar 7th, 2002, 07:32 AM

Check out this images and tell me why this is....

First, menus closed. Looks the same in both browsers..

**Smirre** · Mar 7th, 2002, 07:32 AM

In MSIE 6.0...

**Smirre** · Mar 7th, 2002, 07:33 AM

In Netsacpe 6.0...

Seems that top postition of a table and td is not the same in IE and NS?!?

/Smirre

scoutt · Mar 7th, 2002, 09:59 AM

in browser version 4 and below isn't it document.all ?instead of document.getElementbyID

**Smirre** · Mar 7th, 2002, 10:04 AM

does this work in both netscape and IE??

how can I check wich type of browser it is???

like:

If (browser check something) {
getElementByID("something") blah blah code
}
Else {
document.all blah blah code
}

/Smirre

scoutt · Mar 7th, 2002, 10:23 AM

if browser

Code:

<SCRIPT>
 browser=((navigator.appName=="Microsoft Internet Explorer")&&(parseInt(navigator.appVersion)>=4));
 if (browser){ 
getElementByID("something") blah blah code 
} 
  Else
 { 
document.all blah blah code 
} 
  
</SCRIPT>

somehting like that, but don't quote me on it.

**Smirre** · Mar 7th, 2002, 10:30 AM

That will only chosse between MSIE and Netscape.

Not versions, that is what I have to chosse from.

Can I just check it like this:

if (document.getElementById("test")) {
do some code
}

else {
code for document.all
}

Will document.getElementById("test") return false if it doesnt is this type of document ?????

/Smirre

scoutt · Mar 7th, 2002, 10:32 AM

that is what this does
parseInt(navigator.appVersion)>=4
detects the version of the browser. I don't go that far into javascript but only from what I have. sure that will check IE version as I don't know the exact code for Netscape.

**punkpie_uk** · Mar 7th, 2002, 10:33 AM

This is the script I use for returned left/top/width/height

function findleft(grandfather){
if (document.all[grandfather].left){return document.all[grandfather].left;}
if (document.all[grandfather].pixelLeft){return document.all[grandfather].pixelLeft;}
if (document.all[grandfather].offsetLeft){return document.all[grandfather].offsetLeft;}
return 'null';
}

function findtop(grandfather){
if (document.all[grandfather].top){return document.all[grandfather].top;}
if (document.all[grandfather].pixelTop){return document.all[grandfather].pixelTop;}
if (document.all[grandfather].offsetTop){return document.all[grandfather].offsetTop;}
return 'null';
}

function findwidth(grandfather){
if (document.all[grandfather].offsetWidth){return document.all[grandfather].offsetWidth;}
if (document.all[grandfather].clip.width){return document.all[grandfather].clip.width;}
return 'null';
}

function findheight(grandfather){
if (document.all[grandfather].offsetHeight){return document.all[grandfather].offsetHeight;}
if (document.all[grandfather].clip.height){return document.all[grandfather].clip.height;}
return 'null';
}

//find dom

function findDom(objectid){
if (document.getElementById){
return document.getElementById(objectid);
else if (document.all){
return document.all(objectid);
end if
}

btw. grandfather is relevent to my code

Basically, you just call the functions where grandfather is the object id.

The find dom function returns whether your browser is complient with getElementById (IE5/NS6) or the all DOM(IE4). You can use it like this...

findDom('layer1').style.cursor='hand';

... for example, if you wanted to change the cursor to a hand.

Any questions, feel free to ask.

**Smirre** · Mar 7th, 2002, 10:42 AM

Sorry scoutt, didnt see that to the right of the screen...

punkpie_uk will document.all work in the older versions of Netscape too???

/Smirre

**punkpie_uk** · Mar 7th, 2002, 10:52 AM

I dont think it'll work with netscape 4 because version 4 had its own DHTML method of using layers. eg

document.layers('layer1')

If you want to make it compatible with NS4 you'll have to write a script using the appName function and work out if the client uses it, then dynamically create the layers from a script which isnt really ideal.

Or you could simply work out if they are using Netscape 4 and redirect them to the netscape updates site.

I don't usually write code specific to Netscape 4 because only 15% of the online community use netscape and how many of them are using netscape 4?

**punkpie_uk** · Mar 8th, 2002, 04:12 AM

Try this : -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Get Layer Positions</title>

<script language="JavaScript" type="text/javascript">

</script>

</head>
<body>

<div id="layer1" style="position:absolute; left:150px; top:200px; width:200px; height:200px; background:cyan;">This is a layer</div>
<input type="button" value="Get Left Position" onclick="alert(findleft('layer1'))">
<input type="button" value="Get Top Position" onclick="alert(findtop('layer1'))">
<input type="button" value="Get Width" onclick="alert(findwidth('layer1'))">
<input type="button" value="Get Height" onclick="alert(findheight('layer1'))">
</body>
</html>

Cut and paste it to see if it works correctly on your PC.

Its pretty much the same as the code I wrote yesterday BUT it uses findDom to get whether the clients browser is complient with getElementById or all so it should work with all version 4 browsers up.

FYI

domStyle.left reads the left position of a element in NS4
domStyle.pixelLeft reads the left posiiton in IE4+
domStyle.offsetLeft reads the left position in NS6

If you are still having problems reading the positions you might have to post the code you're working on and I'll have look at it, or send me an email. I'll be happy to help.

**Smirre** · Mar 8th, 2002, 05:01 AM

punkpie_uk, please check your mail and get back to me...

The code is not made to work with other browsers than IE and Netcape latest versions... right now..

/Smirre

Thread: Read position of a element??

Thread Tools

Display

Read position of a element??

whoa

Posting Permissions