Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > onClick / Nested Divs

Reply
Thread Tools

onClick / Nested Divs

 
 
Mike
Guest
Posts: n/a
 
      04-21-2008
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;wi dth:
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>
 
Reply With Quote
 
 
 
 
pr
Guest
Posts: n/a
 
      04-22-2008
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;wi dth:
> 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.
 
Reply With Quote
 
 
 
 
pr
Guest
Posts: n/a
 
      04-22-2008
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.
 
Reply With Quote
 
Mike
Guest
Posts: n/a
 
      04-22-2008
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.


 
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
Overlapping divs with onclick properties Adam Javascript 3 03-04-2008 12:57 PM
swapping divs -- when divs NOT positioned absolutely.. maya Javascript 4 11-16-2007 05:11 PM
Managing divs within divs.... rich HTML 0 02-02-2006 07:38 PM
Nested DIVs - is there a better way? Guadala Harry ASP .Net 2 10-26-2004 07:30 PM
XHTML and nested divs dbunder HTML 2 12-20-2003 04:51 PM



Advertisments