Events in nested div's

vfk799

This question may be as much about css as javascript. Here is my code.

<html>
<head>
<script>
function setBackground(id) {
window.alert(id);
document.getElementById(id).style.backgroundColor= 'blue';
event.cancelBubble=true;
}
</script>
<body>
<div id='1div'style="padding:200px;background-color:red"
onClick="setBackground('1div');">
<div id='2div' style="padding:100px;background-color:yellow"
onClick="setBackground('2div');"></div>
</div>
</body>
</html>

I wish to change the yellow color to blue by clicking on it which works
fine for the above code.

However, if the padding:200px style of 1div is replaced with
height:300px then, when I click the yellow area (2div), the event is
handled by 1div rather than 2div. Can anyone explain the difference and
how I can change only the yellow area of 2div with the second style.

Nov 18 '06 #1

Subscribe Post Reply

7509

Daz

vfk799 wrote:

This question may be as much about css as javascript. Here is my code.

<html>
<head>
<script>
function setBackground(id) {
window.alert(id);
document.getElementById(id).style.backgroundColor= 'blue';
event.cancelBubble=true;
}
</script>
<body>
<div id='1div'style="padding:200px;background-color:red"
onClick="setBackground('1div');">
<div id='2div' style="padding:100px;background-color:yellow"
onClick="setBackground('2div');"></div>
</div>
</body>
</html>

I wish to change the yellow color to blue by clicking on it which works
fine for the above code.

However, if the padding:200px style of 1div is replaced with
height:300px then, when I click the yellow area (2div), the event is
handled by 1div rather than 2div. Can anyone explain the difference and
how I can change only the yellow area of 2div with the second style.

I think the problem is that you have a div element within a div
element. I was under the impression that divs were block elements, and
should be 'stacked', so to speak. If I needed to do what you are trying
to do, I would consider using tables.

I could be wrong in my above statement, but I am guessing that due to
the nature of divs, by clicking on the inside div element, you are
also, clicking on the outer div element.

Nov 18 '06 #2

Davey

vfk799 wrote:

This question may be as much about css as javascript. Here is my code.

<html>
<head>
<script>
function setBackground(id) {
window.alert(id);
document.getElementById(id).style.backgroundColor= 'blue';
event.cancelBubble=true;
}
</script>
<body>
<div id='1div'style="padding:200px;background-color:red"
onClick="setBackground('1div');">
<div id='2div' style="padding:100px;background-color:yellow"
onClick="setBackground('2div');"></div>
</div>
</body>
</html>

I wish to change the yellow color to blue by clicking on it which works
fine for the above code.

However, if the padding:200px style of 1div is replaced with
height:300px then, when I click the yellow area (2div), the event is
handled by 1div rather than 2div. Can anyone explain the difference and
how I can change only the yellow area of 2div with the second style.

Nov 18 '06 #3

Jim Land

"vfk799" <vi****************@ntlworld.comwrote in
news:11********************@h48g2000cwc.googlegrou ps.com:

This question may be as much about css as javascript. Here is my code.

<html>
<head>
<script>
function setBackground(id) {
window.alert(id);
document.getElementById(id).style.backgroundColor= 'blue';
event.cancelBubble=true;
}
</script>
<body>
<div id='1div'style="padding:200px;background-color:red"
onClick="setBackground('1div');">
<div id='2div' style="padding:100px;background-color:yellow"
onClick="setBackground('2div');"></div>
</div>
</body>
</html>

I wish to change the yellow color to blue by clicking on it which works
fine for the above code.

However, if the padding:200px style of 1div is replaced with
height:300px then, when I click the yellow area (2div), the event is
handled by 1div rather than 2div. Can anyone explain the difference and
how I can change only the yellow area of 2div with the second style.

www.quirksmode.org/js/events_order.html

Nov 18 '06 #4

Bas Cost Budde

Maybe you shouldn't pass arguments to the function, but examine the
event object that comes with the event. Its srcElement/target property
tells you the immediate receiver of the click.

The air code for this is as follows:

function setBackground(e) {
if (!e) e = window.event;
var el = e.target ? e.target : e.srcElement;
el.style.backgroundColor = "blue";
}

where you don't have the need to cancelBubble, in the same run.
Daz schreef:

vfk799 wrote:

>This question may be as much about css as javascript. Here is my code.

<html>
<head>
<script>
function setBackground(id) {
window.alert(id);
document.getElementById(id).style.backgroundColor= 'blue';
event.cancelBubble=true;
}
</script>
<body>
<div id='1div'style="padding:200px;background-color:red"
onClick="setBackground('1div');">
<div id='2div' style="padding:100px;background-color:yellow"
onClick="setBackground('2div');"></div>
</div>
</body>
</html>

--
Bas Cost Budde
Holland
www.heuveltop.nl/BasCB/msac_index.html

Nov 18 '06 #5

vfk799

Thank you for your responses. Unfortunately the code given by both
Davey and Bas Cost Budde seem to do exactly the same as my own code. To
answer Daz's point, "by clicking on the inside div element, you are
also, clicking on the outer div element", This would also be true for
the first style but the code works for the first style.

Nov 18 '06 #6

vfk799 wrote:

Thank you for your responses. Unfortunately the code given by both
Davey and Bas Cost Budde seem to do exactly the same as my own code. To
answer Daz's point, "by clicking on the inside div element, you are
also, clicking on the outer div element", This would also be true for
the first style but the code works for the first style.

Some obscure case with IE... It worked for me if I define position for
the inner div:
position: relative;
left:0;
right:0;

It may be one of outcomes of the "hasLayout" issue.

Nov 18 '06 #7

vfk799

I should have mentioned that I was only tesing in IE. I only need this
to work in IE. In fact all of the above works in Firefox. So it does
seem to be an IE issue.

Having looked into VK's suggestion about 'has layout', two things seem
to affect whether or not the inner div has its code carried out. The
first is whether or not it has textual content of its own which can be
clicked on, (although that still doesn't work if only the surrounding
padding is clicked), and the second is whether or not it has at least
one layout attribute.

So without either of these, the inner div's code seems to be
'unreachable'. I can query whether or not an element 'has layout' with
getElementById(id).currentStyle.hasLayout but of course this is only of
use if the element's code is reachable in the first place.

So I'm clicking on a whopping big yellow box which clearly exists and I
need to reach its event handler. Any ideas would be much appreciated.

Nov 19 '06 #8

Similar topics

Nested boxes problem

by: Dustin | last post by:

Here's what I am trying to do: (Names represent CSS classes.) I want to create a photo gallery. I want the entire gallery to be surrounded by a box named PhotoGallery. I want a fluid placement...

HTML / CSS

Mozilla <div> can't see nested floated <div>?

by: Philip | last post by:

I am trying to make a bunched of left-floated divs that will be contained in a larger div. the floated divs all contain a left-floated img and text of varying sizes. If I don't set a height (or...

HTML / CSS

Cleanest CSS way to do nested indents?

by: darius | last post by:

Hi I want to do paragraphs with nested indent, like so para 1 .... ......... para 2 ....... ..... para 3 ...... .........

HTML / CSS

nested div stylesheet question

by: theo | last post by:

if I have nested div combinations, can I call for styles only to specific nested combos? It's 3 lists <li>, on one page, needing different styles. <div id=list1><li> <a id="t1"...

HTML / CSS

mouse events on div element in IE 6

by: nutso fasst | last post by:

If a div is positioned block or relative, events fire over the entire area of the div. If the div is positioned absolute they don't--they only fire over the div's text or image child elements, if...

Javascript

Form and nested elements

by: Markus Ernst | last post by:

Hi I have a validation problem with a form and nested divs. I understand what the problem is, but I don't see how to fix it. This is my normal page structure, and it validates: <!DOCTYPE HTML...

HTML / CSS

Nested DIV is locking layout via CSS

by: Henk | last post by:

Isn't it so that when you are creating DIVs you are defining a part of the used layout? I will give an example. I set up two DIV's: ID 'main_story' and ID 'summary'. After setting this up I...

HTML / CSS

Multiple onmouseout events in IE when returning false to the onDrag event.

by: Tom | last post by:

Hi, In the following code I have reproduced a problem in IE that is extremely annoying for my application. <html> <head> <script type="text/javascript">

Javascript

re-route events in IE (or rich text woes)

by: jceddy | last post by:

Well, there is something here I'm working on, and I have a problem that has several possible solutions...none of which I can figure out how to implement. Basically, I am creating a rich text...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing