onClick / Nested Divs

Discussion in 'Javascript' started by Mike, Apr 21, 2008.

  1. Mike

    Mike Guest

    Can someone please explain how onclick works with nested, absolutely
    positioned div containers? I would expect, when several divs are on
    top of one another, clicking on them would trigger an onclick event
    for each div. But it's not working that way. Take a look at the
    attached file. Clicking in the center of the "orange" div, I would
    think, would trigger an alert for all five of the divs. In fact, it
    doesn't even trigger one for the "orange" div.

    =====================

    <html><head>
    <script type="text/javascript">
    function show(id){ alert( "clicked on " + id); }
    </script>
    <style type="text/css">
    #gray {position:relative;height:300px;width:300px;margin-
    right:auto;margin-left:auto;border:thin solid #666;z-index:10}
    #blue {position:absolute;top:20px;left:20px;height:100px;width:
    100px;margin-right:auto;margin-left:auto;border:thin solid blue;z-
    index:20}
    #red {position:absolute;top:0;left:0;height:100px;width:100px;margin-
    right:auto;margin-left:auto;border:thin solid red;z-index:30}
    #green {position:absolute;top:5px;left:5px;height:30px;width:
    30px;margin-right:auto;margin-left:auto;border:thin solid green;z-
    index:40}
    #orange {position:absolute;top:10px;left:10px;height:30px;width:
    30px;margin-right:auto;margin-left:auto;border:thin solid orange;z-
    index:50}
    </style>
    </head><body>
    <div id="gray" onclick="show('gray')">
    <div id="blue" onclick="show('blue')">
    <div id="green" onclick="show('green')"></div>
    <div id="orange" onclick="show('orange')"></div>
    </div>
    <div id="red" onclick="show('red')"></div>
    </div>
    </body></html>
     
    Mike, Apr 21, 2008
    #1
    1. Advertising

  2. Mike

    pr Guest

    Mike wrote:
    > Can someone please explain how onclick works with nested, absolutely
    > positioned div containers? I would expect, when several divs are on
    > top of one another, clicking on them would trigger an onclick event
    > for each div. But it's not working that way. Take a look at the
    > attached file. Clicking in the center of the "orange" div, I would
    > think, would trigger an alert for all five of the divs. In fact, it
    > doesn't even trigger one for the "orange" div.


    It doesn't, and if you give all the divs solid backgrounds, you will see
    that the orange and green divs are completely obscured by the red div,
    so it shouldn't.

    >
    > =====================
    >
    > <html><head>
    > <script type="text/javascript">
    > function show(id){ alert( "clicked on " + id); }
    > </script>
    > <style type="text/css">
    > #gray {position:relative;height:300px;width:300px;margin-
    > right:auto;margin-left:auto;border:thin solid #666;z-index:10}
    > #blue {position:absolute;top:20px;left:20px;height:100px;width:
    > 100px;margin-right:auto;margin-left:auto;border:thin solid blue;z-
    > index:20}
    > #red {position:absolute;top:0;left:0;height:100px;width:100px;margin-
    > right:auto;margin-left:auto;border:thin solid red;z-index:30}
    > #green {position:absolute;top:5px;left:5px;height:30px;width:
    > 30px;margin-right:auto;margin-left:auto;border:thin solid green;z-
    > index:40}
    > #orange {position:absolute;top:10px;left:10px;height:30px;width:
    > 30px;margin-right:auto;margin-left:auto;border:thin solid orange;z-
    > index:50}
    > </style>
    > </head><body>
    > <div id="gray" onclick="show('gray')">
    > <div id="blue" onclick="show('blue')">
    > <div id="green" onclick="show('green')"></div>
    > <div id="orange" onclick="show('orange')"></div>
    > </div>
    > <div id="red" onclick="show('red')"></div>
    > </div>


    Here is your problem: gray contains blue and red. Blue contains in turn
    green and orange. The z-index CSS property relates to the current
    stacking context. Positioned elements having a z-index other than 'auto'
    have their own stacking context, so the z-index you give green and
    orange relates only to their order within blue. Since red is above blue
    (in the stacking context of gray) it will hide them.

    If no div contained any other div, you would get the results I guess you
    anticipate.

    Here's the official account: <URL:
    http://www.w3.org/TR/CSS21/visuren.html#z-index>.

    Hope that helps.
     
    pr, Apr 22, 2008
    #2
    1. Advertising

  3. Mike

    pr Guest

    pr wrote:
    > Mike wrote:
    >> Can someone please explain how onclick works with nested, absolutely
    >> positioned div containers? I would expect, when several divs are on
    >> top of one another, clicking on them would trigger an onclick event
    >> for each div. But it's not working that way. Take a look at the
    >> attached file. Clicking in the center of the "orange" div, I would
    >> think, would trigger an alert for all five of the divs. In fact, it
    >> doesn't even trigger one for the "orange" div.

    [...]
    > If no div contained any other div, you would get the results I guess you
    > anticipate.
    >


    PS: re-reading your post, I see you anticipate something else. To have a
    click event bubble through all the divs you would need to structure your
    HTML so:

    <div id="gray" onclick="show('gray')">
    <div id="blue" onclick="show('blue')">
    <div id="green" onclick="show('green')">
    <div id="orange" onclick="show('orange')">
    <div id="red" onclick="show('red')"></div>
    </div>
    </div>
    </div>
    </div>

    CSS positioning has no effect on the manner in which events bubble, but
    it may, as I have shown, prevent the initial element receiving the event.
     
    pr, Apr 22, 2008
    #3
  4. Mike

    Mike Guest

    Thanks!

    The application I'm working on, actually has over 100 div containers,
    so nesting them all inside one another seems impractical maybe even
    problematic. After reading through your thoughts and playing around a
    bit more, I think a better approach for my needs will be an image map
    to trigger the events.

    Thanks again, it was a great help!

    Mike

    > PS: re-reading your post, I see you anticipate something else. To have a
    > click event bubble through all the divs you would need to structure your
    > HTML so:
    > CSS positioning has no effect on the manner in which events bubble, but
    > it may, as I have shown, prevent the initial element receiving the event.
     
    Mike, Apr 22, 2008
    #4
    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. Guadala Harry

    Nested DIVs - is there a better way?

    Guadala Harry, Oct 26, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    496
    Guadala Harry
    Oct 26, 2004
  2. dbunder

    XHTML and nested divs

    dbunder, Dec 20, 2003, in forum: HTML
    Replies:
    2
    Views:
    1,088
    John McGaw
    Dec 20, 2003
  3. rich
    Replies:
    0
    Views:
    734
  4. maya
    Replies:
    4
    Views:
    250
  5. Adam
    Replies:
    3
    Views:
    665
    Thomas 'PointedEars' Lahn
    Mar 4, 2008
Loading...

Share This Page