Click through positioned div with z-index to submit button underneath?

I have made a demo which I think shows the problem and a solution. You may need to resize the HTML section so that the submit button is underneath the "example div with the green background The solution I have used is the CSS3-UI pointer-events property. There is one drawback though, in that it is not supported in IE or Opera.

According to Mozilla's documentation is works in Firefox 3.6+, Safari 3+, Chrome 4 I have tested this in Chrome12 and Firefox4 and I can click on the submit button under the div Edit: Well you can either re-design the site or hide the div completely for IE/Opera. However, if you can use JavaScript (which I guess you must be since position:fixed does not work in IE without it), there are a couple of options I can think of: Fade out/fade in the div when the mouse is over it Get the mouse co-ordinates and find the input underneath and then programmatically click the button (see http://www.vinylfox.com/forwarding-mouse-events-through-layers ) Edit 2: Updated demo to work with IE. This solution needs jQuery but it could be probably done without a library.

You will need to play with the CSS position to get an input under the positioned div Note: This has been covered before Click through div with an alpha channel and Click through a DIV to underlying elements.

I have made a demo which I think shows the problem and a solution. You may need to resize the HTML section so that the button is underneath the "example" with the green background. The solution I have used is the CSS3-UI pointer-events property.

There is one drawback though, in that it is not supported in IE or Opera. According to Mozilla's documentation is works in Firefox 3.6+, Safari 3+, Chrome 4+. I have tested this in Chrome12 and Firefox4 and I can click on the button under the Edit: Well you can either re-design the site or hide the completely for IE/Opera.

However, if you can use JavaScript (which I guess you must be since position:fixed does not work in IE without it), there are a couple of options I can think of: Fade out/fade in the when the mouse is over it Get the mouse co-ordinates and find the underneath and then programmatically click the button (see http://www.vinylfox.com/forwarding-mouse-events-through-layers/) Edit 2: Updated demo to work with IE. This solution needs jQuery but it could be probably done without a library. You will need to play with the CSS position to get an under the positioned .

Note: This has been covered before Click through div with an alpha channel and Click through a DIV to underlying elements.

That's great and everything, but this is shop design not some small project and since it's a shop and there is a variety of customers who also probably use IE and Opera it's not a good solution. – Eugene Apr 26 at 12:24 I have got it working in IE6 with JavaScript (well jQuery) implementing option 2 in my answer. – andyb Apr 26 at 13:24 I did your solution as a fallback and tweeked my little bit.Jsbin.Com/amoze4 – Eugene Apr 26 at 14:24.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions