[WSG] IE issues: display none vs absolute position for show/hide effect
Repost, change subject line. David and 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 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE7 page load issue, can it be prevented?
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 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 ***
Re: [WSG] IE7 page load issue, can it be prevented?
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 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 ***
Re: [WSG] IE7 page load issue, can it be prevented?
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 15, 2011, at 9:26 AM, David Hucklesby wrote: > On 6/14/11 7:45 PM, tee wrote: >> David, >> >> Thanks for the response. I made two screencasts. >> >> 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 >> >> I am trying to find a way if it's possible to prevent this from >> happening despite the slow connection. >> >> >> 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 > [...] >>> >>> > Here's what works for me. I include this code in the of the document: >>> >>> >> type="text/javascript"> document.documentElement.className='js'; >>> >>> >>> To display/hide an element, div#part-2 for example, use this CSS: >>> >>> .js #part-2 { display: none; } /* hide if JS is enabled */ >>> >>> Apologies if I misunderstood. Your example code is beyond my >>> comprehension this early morning... :( > > > Tee, > > How are you hiding that content in the first place? (Your code is beyond > my feeble brain's comprehension. Sorry.) > > This is exactly what the code I sent you is meant to avoid. Without JS, > the hidden content shows up. With JS, the 'js' class is applied before > the page loads. Thus the CSS rule to hide that content applies, and the > content has no chance of appearing until your script overrides it. > > Does this not work for you? Or are you using this technique, and somehow > find it fails? > > Sorry I can't be much more help. > -- > Cordially, > David > > > > *** > 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 ***
Re: [WSG] IE7 page load issue, can it be prevented?
On 6/14/11 7:45 PM, tee wrote: David, Thanks for the response. I made two screencasts. 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 I am trying to find a way if it's possible to prevent this from happening despite the slow connection. 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 [...] Here's what works for me. I include this code in the of the document: document.documentElement.className='js'; To display/hide an element, div#part-2 for example, use this CSS: .js #part-2 { display: none; } /* hide if JS is enabled */ Apologies if I misunderstood. Your example code is beyond my comprehension this early morning... :( Tee, How are you hiding that content in the first place? (Your code is beyond my feeble brain's comprehension. Sorry.) This is exactly what the code I sent you is meant to avoid. Without JS, the hidden content shows up. With JS, the 'js' class is applied before the page loads. Thus the CSS rule to hide that content applies, and the content has no chance of appearing until your script overrides it. Does this not work for you? Or are you using this technique, and somehow find it fails? Sorry I can't be much more help. -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***