Re: [css-d] Overlay you can click through
On 08/10/10 18:08, Chris Hardie wrote: > Can anyone think about how to get the result I want? > You could try this: http://www.vinylfox.com/forwarding-mouse-events-through-layers/ If you don't have to support IE then you can also achieve the same thing with a CSS property: https://developer.mozilla.org/en/CSS/pointer-events This is originally derived from the SVG spec: http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty Rob __ css-discuss [cs...@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] Overlay you can click through
On 10/8/10 10:08 AM, Chris Hardie wrote: Hi, I fear I have an impossible problem, but I thought I would throw it out there. I am working on a site for dyslexics. Some dyslexics find it easier to read print if they place a red or green plastic overlay over the page (it apparently stops the letters from 'moving'). I developed a small Javascript widget that, when clicked, puts a similar overlay over a webpage. [code snipped] This works as I intended, except of course I didn't think that div#overlay would prevent the user from interacting with the page. In the example above, the user is unable to click through the div to reach the link. Can anyone think about how to get the result I want? It seems to me you are after an "underlay" instead of an "overlay." Have you tried alternative styles using different backgrounds and text colors to get the effect you want? Cordially, David -- __ css-discuss [cs...@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] Overlay you can click through
Have you tried altering the background color of the Body instead or maybe try setting the z-index to a negative value for the div? -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Hardie Sent: Friday, October 08, 2010 1:08 PM To: css-d@lists.css-discuss.org Subject: [css-d] Overlay you can click through Hi, I fear I have an impossible problem, but I thought I would throw it out there. I am working on a site for dyslexics. Some dyslexics find it easier to read print if they place a red or green plastic overlay over the page (it apparently stops the letters from 'moving'). I developed a small Javascript widget that, when clicked, puts a similar overlay over a webpage. It does it by appending a to the element, expanding it to 100% width and height, and then applying a semi-transparent PNG as a background image. Sample code below: this is my content! This is a link! This works as I intended, except of course I didn't think that div#overlay would prevent the user from interacting with the page. In the example above, the user is unable to click through the div to reach the link. Can anyone think about how to get the result I want? Thanks! Chris __ css-discuss [cs...@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/ __ css-discuss [cs...@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/
[css-d] Overlay you can click through
Hi, I fear I have an impossible problem, but I thought I would throw it out there. I am working on a site for dyslexics. Some dyslexics find it easier to read print if they place a red or green plastic overlay over the page (it apparently stops the letters from 'moving'). I developed a small Javascript widget that, when clicked, puts a similar overlay over a webpage. It does it by appending a to the element, expanding it to 100% width and height, and then applying a semi-transparent PNG as a background image. Sample code below: this is my content! This is a link! This works as I intended, except of course I didn't think that div#overlay would prevent the user from interacting with the page. In the example above, the user is unable to click through the div to reach the link. Can anyone think about how to get the result I want? Thanks! Chris __ css-discuss [cs...@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/
