Thanks Jon, I am not trying to hide the texts from desktop screen and has screen reader able to read it - I want the content be available at all time for search engines, browsers, CSS enabled/disabled and JS enabled/disabled.
I am simply using a simple show/hide script to achieve a visual effect - a show/hide effect like this: http://www.learningjquery.com/2006/09/slicker-show-and-hide The difference is, I use absolute position for hidden div so that when it gets clicked, the surrounding content, notably, the content below the content from the hidden div, does not get shifted like the above example show. I need to move on from this issue so right now I'm forced to declare an inline display:none for the hidden #mini-cart ID, and this finally prevents the "hidden layer show through" behavior in IE browsers. Theorically, it's very unlikely this site will be used by Screen Reader's user or anyone using the site would disabled the CSS, so the display:none does the trick. But I am trying to take the accessibility into account, and the display:none will prevent screen reader from accessing content in the hidden div. But IE appears to have issue when no "display:none" is used. jQuery('#mini-cart').hide(); jQuery('#mini-cart-a').click(function() { jQuery('#mini-cart').toggle(400); return false; }); #mini-cart {position:absolute; width:300px; overflow: hidden} In advanced browsers and no problem. The "dropdown" at the left top somtimes does show through if the connection is very slow and the page takes more than 10 seconds to load. http://www.youtube.com/watch?v=Z11rqWBLLuc In this movie taken from IE7, between 17 to 18 seconds you can see the hidden layers (choose your tea and tea bag (2) ) shown through while the page is still loading. http://www.youtube.com/watch?v=dI9QvAFKoSM tee On Jun 15, 2011, at 7:04 PM, Jon Reece wrote: > Tee, > You could try hiding it only visually with css: > > From html5 boilerplate, > > /* Hide only visually, but have it available for screenreaders: by Jon Neal. > www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ > .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; > overflow: hidden; padding: 0; position: absolute; width: 1px; } > > > And then toggling that class in your click event: > > jQuery('#mini-cart-a').click(function() { > jQuery('#mini-cart').toggleClass('visuallyhidden'); > return false; > }); > > > - Jon > > > > On Wed, Jun 15, 2011 at 9:30 PM, tee <weblis...@gmail.com> wrote: > > David, > thanks. > I didn't use your code because I didn't think my code has any problem. This > seems to be occurring in IE only and related to page load - I thought it's > IE7/8 issue but IE9 too when the site has been browsing for a while and a > certain page is more heavier than other. > > I use simple show hide > > jQuery('#mini-cart').hide(); > jQuery('#mini-cart-a').click(function() { > jQuery('#mini-cart').toggle(400); > return false; > }); > > > #mini-cart {position:absolute; width:300px; overflow: hidden} > > the hidden layer shouldn't show through during page load. > > tee > > > >> On Jun 14, 2011, at 8:21 AM, David Hucklesby wrote: > >> > >>> On 6/13/11 6:31 PM, tee wrote: > >>>> Some pages of the site loads very slow in IE7 (about 15 > >>>> seconds), and while the page was loading and (I assume) IE7 was > >>>> still parsing the scripts, all the hidden elements shown through. > >>>> I wander if there is a way to prevent this. > >>>> > >>>> https://picasaweb.google.com/weblist99/Jun132011?authkey=Gv1sRgCKrj4sKyz-33-gE&feat=directlink > > [...] > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
