Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Firefox offsetParent woes

Reply
Thread Tools

Firefox offsetParent woes

 
 
Geoffrey Summerhayes
Guest
Posts: n/a
 
      02-12-2008
I'm trying to select a row from a table in a 'dialog box' where the
HTML is (boiled down):

<body>
<div style='position:absolute; display:block;...'>
...other divs...
<div style='position:absolute...'>
...other divs...
<div style='display:block; overflow:auto; margin-left:auto;
margin-right:auto; width:...'>
<table style='width:100%;'>
<tr></tr>
<tr></tr>
</table>
</div>
...other divs...
</div>
</div>
</body>

Working upward through the chain of offsetParents to get
offsetTop and scrollTop works fine in IE. But FF skips the
overflow:auto div, it doesn't appear in the chain.

So, how do I get this to work correctly with IE and FF?

----
Geoff
 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      02-12-2008
On Feb 12, 12:58*pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:
> I'm trying to select a row from a table in a 'dialog box' where the
> HTML is (boiled down):
>
> <body>
> * <div style='position:absolute; display:block;...'>


The "display:block" rule is redundant here.

> * * ...other divs...
> * * <div style='position:absolute...'>
> * * * * ...other divs...
> * * * * <div style='display:block; overflow:auto; margin-left:auto;
> margin-right:auto; width:...'>
> * * * * * *<table style='width:100%;'>
> * * * * * * *<tr></tr>
> * * * * * * *<tr></tr>
> * * * * * *</table>
> * * * * </div>
> * * * * ...other divs...
> * * </div>
> * </div>
> </body>
>
> Working upward through the chain of offsetParents to get
> offsetTop and scrollTop works fine in IE. But FF skips the
> overflow:auto div, it doesn't appear in the chain.


That is because IE and FF implement offsetParent differently.

>
> So, how do I get this to work correctly with IE and FF?


Are you trying to create a generalized solution? If so, see the
parentNode property. If not, just adjust for the scrollTop/Left
properties of the known scrolling container.

 
Reply With Quote
 
 
 
 
Geoffrey Summerhayes
Guest
Posts: n/a
 
      02-12-2008
On Feb 12, 2:17*pm, David Mark <(E-Mail Removed)> wrote:
> On Feb 12, 12:58*pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:
>
> > I'm trying to select a row from a table in a 'dialog box' where the
> > HTML is (boiled down):

>
> > <body>
> > * <div style='position:absolute; display:block;...'>

>
> The "display:block" rule is redundant here.


No big. It's coming from a combination of
stylesheet rules.

>
> > So, how do I get this to work correctly with IE and FF?

>
> Are you trying to create a generalized solution? *If so, see the
> parentNode property. *If not, just adjust for the scrollTop/Left
> properties of the known scrolling container.
>


parentNode it is then, I'm trying to get as many
generalized sol'ns as possible to sit in one file
and cut down on the amount of specific javascript
that is required.

---
Thanks,
Geoff
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      02-12-2008
On Feb 12, 2:38*pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:
> On Feb 12, 2:17*pm, David Mark <(E-Mail Removed)> wrote:
>
> > On Feb 12, 12:58*pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:

>
> > > I'm trying to select a row from a table in a 'dialog box' where the
> > > HTML is (boiled down):

>
> > > <body>
> > > * <div style='position:absolute; display:block;...'>

>
> > The "display:block" rule is redundant here.

>
> No big. It's coming from a combination of
> stylesheet rules.


I am not sure what you mean by that, but you can safely remove it from
this attribute.

>
>
>
> > > So, how do I get this to work correctly with IE and FF?

>
> > Are you trying to create a generalized solution? *If so, see the
> > parentNode property. *If not, just adjust for the scrollTop/Left
> > properties of the known scrolling container.

>
> parentNode it is then, I'm trying to get as many
> generalized sol'ns as possible to sit in one file
> and cut down on the amount of specific javascript
> that is required.


That isn't always the best solution. Realize that iterating through
parentNodes will slow down your position calculation. A generalized
offset position function should have a parameter that allows this step
to be skipped for elements that are known not to scroll. A parameter
to pass a known scrolling container (or containers) can also be used
to skip unnecessary iterations.
 
Reply With Quote
 
Geoffrey Summerhayes
Guest
Posts: n/a
 
      02-12-2008
On Feb 12, 3:43*pm, David Mark <(E-Mail Removed)> wrote:
>
> That isn't always the best solution. *Realize that iterating through
> parentNodes will slow down your position calculation. *A generalized
> offset position function should have a parameter that allows this step
> to be skipped for elements that are known not to scroll. *A parameter
> to pass a known scrolling container (or containers) can also be used
> to skip unnecessary iterations.


What the (h+e+2*hockey stick) ever is? W3 or no W3, the whole
html+css+javascript thing's still a bass-ackward, bloody mess.

The nice thing about programming is that when I have trouble
with fufilling a set of requirements well in one language I
can switch to another. Lots of fun!

But...

Thanks to incompatible browsers and everyone wanting Web apps
I'm stuck creating huge Rube Goldberg programs with lots of
little fiddly bits that are useless except on browser B vers.
2078-2092 (not counting 2082.3a, of course) Arrrrrggh!!!

Ok I feel better now. Oh, look at the pretty kitty.

----
Geoff
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      02-12-2008
On Feb 12, 4:36*pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:
> On Feb 12, 3:43*pm, David Mark <(E-Mail Removed)> wrote:
>
>
>
> > That isn't always the best solution. *Realize that iterating through
> > parentNodes will slow down your position calculation. *A generalized
> > offset position function should have a parameter that allows this step
> > to be skipped for elements that are known not to scroll. *A parameter
> > to pass a known scrolling container (or containers) can also be used
> > to skip unnecessary iterations.

>
> What the (h+e+2*hockey stick) ever is? W3 or no W3, the whole
> html+css+javascript thing's still a bass-ackward, bloody mess.


Your issue is not with any of those.

>
> The nice thing about programming is that when I have trouble
> with fufilling a set of requirements well in one language I
> can switch to another. Lots of fun!
>
> But...
>
> Thanks to incompatible browsers and everyone wanting Web apps
> I'm stuck creating huge Rube Goldberg programs with lots of
> little fiddly bits that are useless except on browser B vers.
> 2078-2092 (not counting 2082.3a, of course) Arrrrrggh!!!


There is no standard for the offsetParent property. And calculating a
(correct) absolute offset from the root of the document is difficult.
In your case, it can be avoided. Assuming you wish to position an
element over a row in the table, you can simply use position:relative
on the scrolling div and make the element to overlay a child of the
div with position:absolute. Then you need only compute the position
relative to the div. This will be much faster and will avoid numerous
pitfalls. For the most consistent results, with the least amount of
feature testing, do not put a border on the scrolling element (Opera
will count it in offsetLeft/Top, but others will not.)

>
> Ok I feel better now. Oh, look at the pretty kitty.


You sound as if you need a vacation from browser scripting.
 
Reply With Quote
 
Geoffrey Summerhayes
Guest
Posts: n/a
 
      02-13-2008
On Feb 12, 5:57*pm, David Mark <(E-Mail Removed)> wrote:
> On Feb 12, 4:36*pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:
>
> There is no standard for the offsetParent property. *And calculating a
> (correct) absolute offset from the root of the document is difficult.
> In your case, it can be avoided. *Assuming you wish to position an
> element over a row in the table, you can simply use position:relative
> on the scrolling div and make the element to overlay a child of the
> div with position:absolute. *Then you need only compute the position
> relative to the div. *This will be much faster and will avoid numerous
> pitfalls. *For the most consistent results, with the least amount of
> feature testing, do not put a border on the scrolling element (Opera
> will count it in offsetLeft/Top, but others will not.)


Thx, I'll look into it when I get to work.

> > Ok I feel better now. Oh, look at the pretty kitty.

>
> You sound as if you need a vacation from browser scripting.


No, just picked a bad day to give up smoking, drinking, and
sniffing glue...

----
Geoff
 
Reply With Quote
 
dhtml
Guest
Posts: n/a
 
      02-13-2008
On Feb 12, 12:43 pm, David Mark <(E-Mail Removed)> wrote:
> On Feb 12, 2:38 pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:
>
> > On Feb 12, 2:17 pm, David Mark <(E-Mail Removed)> wrote:

>
> > > On Feb 12, 12:58 pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:

>
> > > > I'm trying to select a row from a table in a 'dialog box' where the
> > > > HTML is (boiled down):

>
> > > > <body>
> > > > <div style='position:absolute; display:block;...'>

>
> > > The "display:block" rule is redundant here.

>
> > No big. It's coming from a combination of
> > stylesheet rules.

>
> I am not sure what you mean by that, but you can safely remove it from
> this attribute.
>
>
>
> > > > So, how do I get this to work correctly with IE and FF?

>

You can use position: relative for the div.

> > > Are you trying to create a generalized solution? If so, see the
> > > parentNode property. If not, just adjust for the scrollTop/Left
> > > properties of the known scrolling container.

>

Yep.

> > parentNode it is then, I'm trying to get as many
> > generalized sol'ns as possible to sit in one file
> > and cut down on the amount of specific javascript
> > that is required.

>
> That isn't always the best solution. Realize that iterating through
> parentNodes will slow down your position calculation. A generalized
> offset position function should have a parameter that allows this step
> to be skipped for elements that are known not to scroll. A parameter
> to pass a known scrolling container (or containers) can also be used
> to skip unnecessary iterations.


By specifying a common container it can be more efficient.

getOffsetCoords(el, cont) {

}

This link may be helpful:
http://dhtmlkitchen.com/ape/test/tes...offsetTop.html

Anne VK is trying to standardize these:
http://dev.w3.org/csswg/cssom-view/#...ementfrompoint

Could prob use some help.


Garrett
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
No offsetParent in Firefox? webEater Javascript 5 12-21-2006 11:29 AM
Firefox DOM -- offsetParent vs parentNode amattie@gmail.com Javascript 2 10-27-2006 04:16 PM
Compatibility problems with offsetParent and offsetWidth Ned Baldessin Javascript 1 03-03-2005 01:23 AM
Safari offsetParent/offsetLeft Problem! ara.pehlivanian@gmail.com Javascript 3 01-13-2005 11:12 PM
div - position - offsetParent Vittore Zen Javascript 1 11-04-2004 11:55 AM



Advertisments