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-gEfeat=directlink
[...]
Here's what works for me. I include this code in thehead of the document:
!-- add class=js to html element if JavaScript is on -- script
type=text/javascript document.documentElement.className='js';
/script
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
***
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-gEfeat=directlink
[...]
Here's what works for me. I include this code in thehead of the document:
!-- add class=js to html element if JavaScript is on -- script
type=text/javascript document.documentElement.className='js';
/script
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?
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-gEfeat=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?
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-gEfeat=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?
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-gEfeat=directlink
If I understand you correctly, you have sections on the page that are
set to display if JavaScript is off, but want to hide them before the
page loads in the event scripting is enabled?
Wisely, you don't rely on the noscript element - that does not work if
scripts are blocked by a firewall.
Here's what works for me. I include this code in the head of the document:
!-- add class=js to html element if JavaScript is on --
script type=text/javascript
document.documentElement.className='js';
/script
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... :(
--
Cordially,
David
***
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 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.
Thanks
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-gEfeat=directlink
If I understand you correctly, you have sections on the page that are
set to display if JavaScript is off, but want to hide them before the
page loads in the event scripting is enabled?
Wisely, you don't rely on the noscript element - that does not work if
scripts are blocked by a firewall.
Here's what works for me. I include this code in the head of the document:
!-- add class=js to html element if JavaScript is on --
script type=text/javascript
document.documentElement.className='js';
/script
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... :(
--
Cordially,
David
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
