Printable View
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
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
Right position cant be read???
Only left and top, or??
Is there any way to read width then????
/Smirre
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.
Anyone got any info on this: ?????????
Quote:
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
Check out this images and tell me why this is....
First, menus closed. Looks the same in both browsers..
In MSIE 6.0...
In Netsacpe 6.0...
Seems that top postition of a table and td is not the same in IE and NS?!?
/Smirre
in browser version 4 and below isn't it document.all ?instead of document.getElementbyID
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
if browser
somehting like that, but don't quote me on it.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>
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
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.
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.
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
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?
;)
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">
<!--
function findleft(objectID){
domStyle = findDom(objectID); // find style of dom
if (domStyle.left){return domStyle.left;}
if (domStyle.pixelLeft){return domStyle.pixelLeft;}
if (domStyle.offsetLeft){return domStyle.offsetLeft;}
return 'null';
}
function findtop(objectID){
domStyle = findDom(objectID); // find style of dom
if (domStyle.top){return domStyle.top;}
if (domStyle.pixelTop){return domStyle.pixelTop;}
if (domStyle.offsetTop){return domStyle.offsetTop;}
return 'null';
}
function findwidth(objectID){
if (domStyle.offsetWidth){return domStyle.offsetWidth;}
if (domStyle.clip.width){return domStyle.clip.width;}
return 'null';
}
function findheight(objectID){
if (domStyle.offsetHeight){return domStyle.offsetHeight;}
if (domStyle.clip.height){return domStyle.clip.height;}
return 'null';
}
function findDom(objectid){
if (document.getElementById){
return document.getElementById(objectid);
}else if (document.all){
return document.all(objectid);
}
}
//-->
</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.
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