Revealing div using jQuery show() - what happens for those with JS disabled?
I have a module on my website that loads quite strangely, so I want to hide the div while the page loads, then reveal it on document ready. The following (simplified) code works just fine:
<div class="slideshow" style="display:none;">
This div should be hidden 开发者_运维百科during load
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').show();
});
</script>
This works as intended. But what happens to users with Javascript disabled? Will the div remain hidden to them? How can I make sure all users will see the widget?
A quite common way is, to add a class .nojs to your <body> or <html> element and remove it via Javascript e.g. onload. Like this you can simple handle the two different states via CSS:
.slideshow {
display: none;
}
html.nojs .slideshow {
display: block;
}
Might want to try http://www.modernizr.com/ in this context.
You should remove the display:none style from the div and explicitly hide it in your document.ready function. That way, without javascript it will be visible from the start.
Personally, I prefer to use CSS to my advantage for such things. I add this line of script just inside my template HTML body tag.
<script type="text/javascript">document.body.className = "JS";</script>
Then, for the scenario you describe, I would use an additional CSS class on the div, like so.
<div class="slideshow initially-hidden">
This div should be hidden during load
</div>
With a matching style accounting for the class added via JavaScript in the template.
body.JS .initially-hidden {
display: none;
}
Your elements with a class of "initially-hidden" will now only be invisible if JavaScript is enabled. If it is disabled, they will be visible.
<div class="slideshow">
This div should be hidden during load
</div>
<script type="text/javascript">
$('.slideshow').hide();
$(document).ready(function() {
$('.slideshow').show();
});
</script>
If they have javascript disabled, it won't be shown... You can make sure they all see it by not hiding it in the first place.
But what happens to users with Javascript disabled? Will the div remain hidden to them?
Since the code you have to show the div cannot run, yes it will remain hidden.
How can I make sure all users will see the widget?
Make use of <noscript> to render the div as hidden when Javascript is not enabled, or load the div as visible and hide it with Javascript some point prior to the full page being loaded.
加载中,请稍侯......
精彩评论