1

I have a problem, where I have 2 sibling divs that overlap. First is always opaque and has content in it. Second has content, but only on some parts. Both need to have their with and height set. On parts where 2nd div overlaps 1st, 2nd has to take priority when a Click event occurs, but where there is no content in the 2nd div, I want 1st div to receive events.

Here's a Fiddle: http://jsfiddle.net/meosoft/FQeWz/

Now if you want to click the link, it doesn't work. I'm looking preferably for a solution that does not require any changes to the existing code, but it can add any other code. Because I really need especially the dimensions to be set, without setting the dimensions on the 2nd div it works. Also, this works in IE, but not in FF or Webkit.

How would you guys solve this problem?

mirosval
  • 6,671
  • 3
  • 32
  • 46

1 Answers1

0

Try this:

$("#controls").click(function($event){
    if($event.target.id === "controls") {
        $("#content").trigger('click');
    }
});

$("#content").click(function($event){
    alert('DIV 1 clicked');
});

This fits the requirement to send the event to the first div. If you want the link to receive the event if you click that, I'm not sure because you have the divs sitting on top of eachother.

drneel
  • 2,887
  • 5
  • 30
  • 48
  • Thank you, but this will not work for me, because I need to handle other events, not just clicks plus there might be multiple buttons in the first div. It seems that this is not possible with HTML CSS. I actually solved the issue by reshuffling the HTML and removing the dimensions from the #controls div and positioning its contents against a common parent div... – mirosval Jul 30 '11 at 09:50