View Thread: Problem Positioning & Scrolling on FireFox

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: HTML and JavaScript.

Thread: Problem Positioning & Scrolling on FireFox

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 4

[ ]

Author

This topic has been viewed 1774 times and has 3 replies

statmatics
Stranger

Joined: Apr 2, 2008
Post Count: 2
Status: Offline


Problem Positioning & Scrolling on FireFox

I am having trouble with a JavaScript on FireFox. The idea is to display a floating menu when the mouse is over an HTML DIV item.

First, I get the position of the DIV item, which works fine (thanks to the JavaScript Cookbook!). Then I use style.left and style.top to position the floating menu, which works fine on IE. But on FireFox, when the user scrolls the page, the style.left and style.top seem to position the floating menu offset by the scrolled amount, pushing it further down the page than it should be.

When I try to correct the effect of FireFox scolling, neither window.pageXOffset or window.scrollX provides the amount scrolled. Both pageXOffset and scrollX are zero.

You can see this working (not working, really!) at http://www.statmatics.com/ltf.

Here are some code details. The floating menu:

<style>
#menu {
border:none;
margin: 4px;
position: absolute;
}
</style>

<body>
<div id=menu>
</div>
</body>

The position of the mouseover item

var item = document.getElementById (itemId);
var itemWidth = <code to get width of item>
var itemHeight = <code to get height of item>
var itemLeft = 0;
var itemTop = 0;
var offsetTrail = item;
while (offsetTrail) {
itemLeft += offsetTrail.offsetLeft;
itemTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}

The floating menu positioned near the item

var menu = document.getElementById("menu");
menu.innerHTML = <HTML of the floating menu>
menu.border = "1px solid brown";
var px = (typeof menu.style.left == "string") ? "px" : 0;
menuLeft = Math.floor(itemLeft + 0.7*itemWidth);
menuTop = Math.floor(itemTop - 0.4*itemHeight);
menu.style.left = menuLeft + px;
menu.style.top = menuTop + px;

Any ideas about what to do? Thanks for your help.

Paul Richards
Stat-Matics, Inc., Melbourne, Florida

[Apr 2, 2008 8:15:56 PM]

[Link]

shelfimage
Advanced Member

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline


Re: Problem Positioning & Scrolling on FireFox

placing the #menu div into a container that has position:relative may help?

<div id="menu-wrap">
<div id="menu">
</div>
</div>

<style>
#menu-wrap {
position:relative;
}
#menu {
border:none;
margin: 4px;
position: absolute;
}
</style>
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

[Apr 3, 2008 12:06:03 AM]

[Link]

statmatics
Stranger

Joined: Apr 2, 2008
Post Count: 2
Status: Offline


Re: Problem Positioning & Scrolling on FireFox

Wow, shelfimage. I see why you have "Advanced" status! The absolutely positioned menu in a relative wrapper did the trick. In this configuration, both IE and FireFox behave the same.

So, my problem is solved, and I say "thank you," but I don't know WHY the relative wrapper made a difference. If you have time and inclination, please explain.

Happy camper here! smile

-- Paul R

[Apr 3, 2008 8:26:05 AM]

[Link]

shelfimage
Advanced Member

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline


Re: Problem Positioning & Scrolling on FireFox

no problem.

the relative wrapper allows the absolute wrapper to position itself inside of the wrapper and not the entire document.
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

[Apr 3, 2008 10:04:50 PM]

[Link]

[ ]

Current timezone is GMT
May 20, 2013 1:20:46 AM