Click through div with an alpha channel

Question

Hey,

I'm trying to replicate twitter's "fade out" layer at the bottom of the feed widget (on their main page at twitter.com).

The only way I could come up with that didn't use html5 was place an absolute positioned div above the feed div, and give it an alpha channeled png with a white-to-transparent gradient above it. This was easy to achieve.

Only problem now is that the divs that appear below the transparent layers are not clickable. Any idea about how to make the divs clickable? Maybe you have another method to replicate this effect altogether?

Thanks!

Answer 1

This article describes one method of capturing the onclick event, and handling it by momentarily hiding the overlay, refiring the click, then unhiding it again. The hiding shouldn't be visible to the end user.

Forwarding Mouse Events Through Layers :

1. The textarea (my masking element) that is positioned over the grid receives mouseover, mousemove, mousedown , mouseup and other events.
2. The top masking layer is hidden for a moment, so we can figure out what element is below the mask at the event location.
3. The event is re-fired - this is where the W3 DOM Event model and the simpler Microsoft equivalent come into play.
4. Start the process again - ready for the next event.

EDIT: I think what Twitter does is actually much simpler. There's a CSS property borrowed from SVG that a bunch of browsers have implemented.

.overlay { pointer-events: none; }

This is currently supported in Firefox 3.6+, Safari 4 and Google Chrome - so if you're happy for it to only work on these browsers then this is a much simpler option, with the added advantage that it works for hover events too, not just click events.