[css-d] Can a DIV be made "invisible" to mouse clicks?
CSS-d, I am using the jQuery Tools Flowplayer* to create a moving graphic on my page. To give my moving graphics a nice graphical frame, I have a DIV which contains a background which is a PNG image with transparency. In the HTML, the frame DIV comes after all the code that drives the animated graphics. By setting the top margin of the frame DIV to a high negative number, its position to absolute, and its Z-index to some high number, it effectively lays over top of the animation. The result is that it looks like the animation has a nice frame around it. It looks just as I had hoped. However, I have now discovered a problem. The animation contains clickable links, and other effects that are activated by mousing over. With the frame DIV on top, however, none of them are accessible. The browser interpets the frame DIV as covering the animation, and so it blocks any mouse action trying to go through it to reach the animation. The only way I can see around this is to slice up my frame DIV into corners and sides, so as to leave the centre empty, instead of just relying on the transparency of the PNG background. This will result in some serious "DIV-itus", so before I go down this route, I was wondering if perhaps I was looking at this issue the wrong way. Perhaps there are methods for the effect I'm after that I am not aware of. So, in the end, my question is, can I lay one DIV on top of another without having the top div trapping mouse events that I want the DIV underneath to catch? I hope my question is clear. Thank you for any advice. -- Dave M G * http://flowplayer.org/tools/scrollable/index.html#autoscroll __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can a DIV be made "invisible" to mouse clicks?
On 24.04.2011 09:36, Martin G wrote: So, in the end, my question is, can I lay one DIV on top of another without having the top div trapping mouse events that I want the DIV underneath to catch? Only if you can stack the various elements that should take mouse events even higher than the overlay - through it sort of. Can't determine if that is possible in your case, without seeing/testing the actual page. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can a DIV be made "invisible" to mouse clicks?
Am Sonntag, 24. April 2011 schrieb Martin G : > ... So, in the end, my question is, can I lay one DIV on top of another > without > having the top div trapping mouse events that I want the DIV underneath to > catch? > you could play with https://developer.mozilla.org/en/css/pointer-events and report back if and in what browser it worked for you. hth, Ingo __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can a DIV be made "invisible" to mouse clicks?
Ingo, Georg, Thank you for responding. https://developer.mozilla.org/en/css/pointer-events > That is awesome, and exactly the kind of solution I was hoping for. It works for me in Firefox and Chome. Of course, all indications are that it does not work in Internet Explorer. I will, however, resist the urge to rant about the obvious frustration with how IE is always the exception when it comes to useful and easy solutions. I'm not sure if I can call this totally solved without IE support. I can get away with not supporting IE6, but I can't dismiss 7 and up. -- Dave M G __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
