Possible? — A div overlay which is completely ignored by mouse events (so that mouse events effect only the div below)

Question

I have a google map in an iframe and wrapped in a div. Above that div, i have another, which serves to create a recessed shadow effect.

The problem is that this overlayed div will take priority of any mouse events, so it renders the interactive google map below useless. There must be a way I can make the overlayed div ignore mouse events, letting the div below get them. (please, please!)

Or, is there another way to do it?

here's the code being output:

<div id="pageWrapper" style="display: block; ">
    <div class="page_content">
        <div id="pageShadow"></div>
        <div id="pageMap"><p><iframe width="1096" height="462" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Baked+Beans+B.V.+i.o.,+Amsterdam,+Nederland&amp;sll=52.365721,4.891641&amp;sspn=0.008648,0.022724&amp;ie=UTF8&amp;hq=baked+beans+bv+io&amp;hnear=Amsterdam,+North+Holland,+The+Netherlands&amp;ll=52.363837,4.891109&amp;spn=0.01664,0.045447&amp;z=14&amp;iwloc=near&amp;cid=2617758725349562441&amp;output=embed"></iframe></p>
</div>
    </div>

    <div id="page_description">
        <p>Text about the company</p>
    </div>

    <div id="page_credits">

        <div class="recTitle">Job 1</div>
        <div class="recJob"><p>Description</p>
</div>

        <div class="recTitle">Job 2</div>
        <div class="recJob"><p>Description</p>
</div>

        <div class="recTitle"></div>
        <div class="recJob"></div>

    </div>

</div>

Here's the relevant CSS:

#pageWrapper {
position: relative;
}

.page_content {
max-height: 462px;
position: relative;
}

#pageShadow {
position: absolute;
top:0;
left: 0;
-moz-opacity: .5;
opacity:.5;
filter: alpha(opacity=50);  
background-color: aqua;
z-index: 300;
min-height:462px;
min-width: 1096px;
}

#pageMap {
position: absolute;
top:0;
left: 0;
z-index: 299;
min-height:462px;
min-width: 1096px;
}

.recTitle {
color: #333;
font-size: 21px;
font-family: 'ProximaNovaLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 3px;
padding-bottom: 16px;
}

.recTitle:first-child {
padding-top: 10px;
}

.recJob {
padding-left: 3px;
padding-bottom: 30px;
}

#page_description {
position: absolute;
top:462px;
font-family: 'ProximaNovaLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
float:left;
width:792px;
padding: 15px;
padding-top:20px;
line-height: 22px;
font-weight: normal;
min-height: 345px;
background-color: white;
}

#page_credits {
position: absolute;
top:462px;  
left:822px;
padding: 15px 10px 15px 10px;
float:right;
width:254px;
background-color: #f5f5f5;
min-height: 350px;  
}

And here's the effect I'm trying to attain: (the shadow effect on the top) div overlay http://baked-beans.tv/bb/wp-content/uploads/site-dev/google-map-inner-shadow-div-overlay.jpg

Answer 1

It is possible in Firefox 3.6+ thanks to its support for the "pointer-events" property, as explained in this post at Mozilla Hacks:

http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/

There may be support in Webkit browsers, as mentioned in this post at CSS-Tricks:

http://css-tricks.com/pointer-events-current-nav/

But not in IE or Opera.

Answer 2

perhaps put the #pageShadow inside the pageMap element?

Answer 3

Make the #pageShadow div only as big as the shadow.

If I understand correctly from the mock up image, the effect you are trying to achieve is that the shadow should only cover the top part of the map.

In your code you are stretching the shadow div all over the map:

#pageShadow { .. min-height: 462px; min-width: 1096px; }

Why not decrease the values so that they cover only the top part:

#pageShadow { .. height: 20px; min-width: 1096px; }

Then you will have pointer access to the iframe.

Answer 4

I did something similar for my whole page:

        .shadowframe_top{
            margin: 0;
            padding: 0;
            box-shadow: 0px 5px 18px #333;
            -webkit-box-shadow:  0px 5px 18px #333;
            background-color:#F0F0F0;
            width: 100%;
            position: fixed;
            top: -10px;
            height: 10px;
        }
        .shadowframe_left{
            margin: 0;
            padding: 0;
            box-shadow: 0px 5px 18px #333;
            -webkit-box-shadow:  0px 5px 18px #333;
            background-color:#F0F0F0;
            height: 100%;
            position: fixed;
            left: -10px;
            width: 10px;
        }
        .shadowframe_bottom{
            margin: 0;
            padding: 0;
            box-shadow: 0px 5px 18px #333;
            -webkit-box-shadow:  0px 5px 18px #333;
            background-color:#F0F0F0;
            width: 100%;
            position: fixed;
            bottom: -10px;
            height: 10px;
        }
        .shadowframe_right{
            margin: 0;
            padding: 0;
            box-shadow: 0px 5px 18px #333;
            -webkit-box-shadow:  0px 5px 18px #333;
            background-color:#F0F0F0;
            height: 100%;
            position: fixed;
            right: -10px;
            width: 10px;
        }

and in the html simply insert four divs:

    <div class="shadowframe_top"> </div>
    <div class="shadowframe_left"> </div>
    <div class="shadowframe_bottom"> </div>
    <div class="shadowframe_right"> </div>

The trick is that, in my case, the div is outside the page and the shadow catches no clicks.