Firefox offsetParent woes

Discussion in 'Javascript' started by Geoffrey Summerhayes, Feb 12, 2008.

  1. 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
     
    Geoffrey Summerhayes, Feb 12, 2008
    #1
    1. Advertising

  2. Geoffrey Summerhayes

    David Mark Guest

    On Feb 12, 12:58 pm, Geoffrey Summerhayes <> 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.
     
    David Mark, Feb 12, 2008
    #2
    1. Advertising

  3. On Feb 12, 2:17 pm, David Mark <> wrote:
    > On Feb 12, 12:58 pm, Geoffrey Summerhayes <> 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
     
    Geoffrey Summerhayes, Feb 12, 2008
    #3
  4. Geoffrey Summerhayes

    David Mark Guest

    On Feb 12, 2:38 pm, Geoffrey Summerhayes <> wrote:
    > On Feb 12, 2:17 pm, David Mark <> wrote:
    >
    > > On Feb 12, 12:58 pm, Geoffrey Summerhayes <> 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.
     
    David Mark, Feb 12, 2008
    #4
  5. On Feb 12, 3:43 pm, David Mark <> 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
     
    Geoffrey Summerhayes, Feb 12, 2008
    #5
  6. Geoffrey Summerhayes

    David Mark Guest

    On Feb 12, 4:36 pm, Geoffrey Summerhayes <> wrote:
    > On Feb 12, 3:43 pm, David Mark <> 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.
     
    David Mark, Feb 12, 2008
    #6
  7. On Feb 12, 5:57 pm, David Mark <> wrote:
    > On Feb 12, 4:36 pm, Geoffrey Summerhayes <> 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
     
    Geoffrey Summerhayes, Feb 13, 2008
    #7
  8. Geoffrey Summerhayes

    dhtml Guest

    On Feb 12, 12:43 pm, David Mark <> wrote:
    > On Feb 12, 2:38 pm, Geoffrey Summerhayes <> wrote:
    >
    > > On Feb 12, 2:17 pm, David Mark <> wrote:

    >
    > > > On Feb 12, 12:58 pm, Geoffrey Summerhayes <> 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/tests/dom/inline-offsetTop.html

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

    Could prob use some help.


    Garrett
     
    dhtml, Feb 13, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vittore Zen

    div - position - offsetParent

    Vittore Zen, Nov 4, 2004, in forum: Javascript
    Replies:
    1
    Views:
    139
    Martin Honnen
    Nov 4, 2004
  2. Replies:
    3
    Views:
    239
    Fred Oz
    Jan 13, 2005
  3. Ned Baldessin
    Replies:
    1
    Views:
    194
  4. Replies:
    2
    Views:
    199
  5. webEater

    No offsetParent in Firefox?

    webEater, Dec 19, 2006, in forum: Javascript
    Replies:
    5
    Views:
    127
    webEater
    Dec 21, 2006
Loading...

Share This Page