/    Sign up×
Community /Pin to ProfileBookmark

IE problem offsetTop

Copy linkTweet thisAlerts:
Dec 09.2004

Ok, I’m really new to javascript, so I don’t know what all I can do with the various browsers. I have this snippet of code:

[code=php]

left = m.offsetLeft + m.offsetWidth + 2;
top = m.offsetTop; //THIS IS THE LINE THAT CAUSES AN ERROR
alert(left + ” ” + top);
[/code]

Ok, so what’s going on is ‘m’ is an object that’s passed in to a function. When I try to set top, it works in firefox and netscape, but causes an error in IE…is there a seperate command to get the top position of an element in IE??

Hope you can help,
Jaelan

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@pj59Dec 09.2004 — Hello!

IE simply has a problem with the term 'top';

Just try this:

left = m.offsetLeft + m.offsetWidth + 2;

topp = m.offsetTop;

alert(left + " " + topp);

and it will work. For IE, 'top' is an object and cannot be used as a variable name.
Copy linkTweet thisAlerts:
@JaelanauthorDec 09.2004 — Neat, that's good to know thanks.

Now, that works great...but Netscape/Firefox are having problems with setting an element's left position. Here's the code:

[code=php]
box.style.left= m.offsetLeft + m.offsetWidth + 2;
box.style.top= m.offsetTop+2;
box.style.visibility="visible";
box.style.backgroundColor="#555555";
box.style.width="100px";
[/code]

Basically, this is a navigation menu that displays links next to the menu. It works fine in IE and Mac's safari, but not netscape/firefox...it displays the links +2 from the m.offsetLeft, but is ignoring m.offsetWidth. Again, it works fine in IE, but not the other two. (thus, width is being set correctly to begin with and isn't/shouldn't be 0)

Thanks,

Jaelan
Copy linkTweet thisAlerts:
@pj59Dec 09.2004 — I am quite sure that 'box' is not an object passed to the function but the id or the name of something. IE is satisfied with the code you are using whereas Mozilla based browsers need the correct code.

Assuming, 'box' is an id just use:

document.getElementById('box').style

instead of:

box.style

Good luck!
Copy linkTweet thisAlerts:
@JaelanauthorDec 09.2004 — heh, sorry let me just post the entire function:

[code=php]function Menu(current) {
if (!document.getElementById) return;
inmenu=true;
oldmenu=lastmenu;
lastmenu=current;
if (oldmenu) Erase(oldmenu);
m=document.getElementById("menu-" + current);
m.style.backgroundColor="#777777";
box=document.getElementById(current);
if (box) {
box.style.left= m.offsetLeft + m.offsetWidth + 2;
box.style.top= m.offsetTop+2;
box.style.visibility="visible";
box.style.backgroundColor="#555555";
box.style.width="100px";
alert(m.offsetWidth);
}
}[/code]

I added the alert at the bottom, and it returns a value in all browsers... (and box is set by document.getElementByID();...

Thanks for your help so far!

Jaelan
Copy linkTweet thisAlerts:
@pj59Dec 09.2004 — The function seems ok, but your css seems to lack something. Your items will need the style attribute position (e.g.: position: absolute), either defined inline, a style tag or a .css file
Copy linkTweet thisAlerts:
@JaelanauthorDec 09.2004 — Yeah, I forgot the Table styles for position...so now, i added

<i>
</i>TABLE#menu {
position: absolute;
left: 200;
top: auto;
width: 100;
font-size: 10pt;
color: #AAAAAA;
}

TABLE#menu TD {
width: 100;
padding: 4;
}



in my style sheet...It still doesn't work exactly right, but I'm gonna play around w/ the absolute positions to see if I can get it to do what it's supposed to....so weird...

Thanks for your help and I'll let you know if I get it to work, or not...

Jaelan
Copy linkTweet thisAlerts:
@pj59Dec 09.2004 — Hey, Jaelan, you're welcome.

Good luck!
Copy linkTweet thisAlerts:
@JaelanauthorDec 09.2004 — Woot, got it to work...

The problem was where I was putting the <div> menus that I change visibility on...at first I had them in the same table as the main menu. Moving them out of that table solved the problem. Hah...how I ever found that problem, don't ask, but I did!!


Thanks again for your help (cause w/o the position reminder, it still wouldn't work)

Jaelan
×

Success!

Help @Jaelan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...