Menu
A client has asked that their home page begin blank (only the logo and background image visible) and then fade in the navigation and content after a second or two.
I could start with the content hidden via CSS and fade it in with jQuery. Unfortunately this violates progressive enhancement: the site would be completely unusable until active code runs, causing problems for the visually impaired using screen readers, among others.
The two work-arounds I've considered are Flash and the <noscript> tag. Flash seems overkill since it isn't used elsewhere on the site; also, the home page is content-heavy with a constantly updating set of news items, sort of a light blog. The <noscript> tag won't help the visually impaired who use screen readers, since their browsers usually have scripting enabled.
Am I missing a solution? Or is this just not a good idea?
505
Do the following
<html>
....
<body>
<script>$("body").addClass("hide");</script>
...
With this css
body.hide #myHidden-div{
opacity: 0;
}
Then after a two second pause you should be able to do $("#myHidden-div").fadeIn();
If the user has js disabled then the addClass tag will never be triggered and nothing will be hidden. I don't think you need to use <noscript> tag at all.
You have to make sure the script tag is right after the <body> so the user doesn't see a jump of the content and then suddenly hidden. This is better than hiding every thing by default because some search engines may notice that you have hidden text and ignore it for spamming reasons.
65
I would think you could make this kind of a hack:
Alternatively, push back on the guy you're building this website for, because that is a horrible user experience. =D
27
Have different sites for visually impaired and the rest. One has the script and the other doesnt.
Could be as easy as a get variable if you have some sever side code.
1
In the head, you could create set this CSS rule in javascript:
*
{
position:relative;
left:-9999px;
}
using jquery: $("*").css({position: 'relative', left: '-9999px'})
Then at the bottom of the page run your javascript to hide everything and remove this CSS rule, and then gradually fade in like you want.
This works for non-javascript browsers, and for javascript-enabled screenreaders :)
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
