A handful of users browse the web with JavaScript turned off. There are several reasons for this, they may have turned it off in their browser settings if they have a slow internet connection to decrease page load times, or maybe it’s a paranoid user. Sometimes it’s out of the users control, this could be if their company filter out JavaScript in their proxies to increase security.
If you have a feature rich site design utilizing JavaScript and don’t want to “punish” your visitors who does not have the power of JavaScript in their toolbox, then you can make use of CSS styling combined with JavaScript for controlling what elements on your page to show.
What you want to do to make your site “work” for those users, to not serve them pages that for them to be broken, is to hide elements that only is there to fire JavaScript events. They can’t use it, so don’t put it out there for them, it will only frustrate them.
The same goes for elements that is hidden by default but shown at some point using JavaScript, they would never get to see those elements, thus limiting them from your pages features.
Say you had this poll on your page with the ability to show the results by clicking a button, which uses JavaScript to display the results, maybe using some slide-down slide down or some other effects. Does this mean that users without JavaScript can’t see the results? Not at all, they should see the results right away, but NOT the button, because the button is useless for them.
So how would we go about doing this?
Well it’s pretty easy, and only require a few lines of code. Add a dash of CSS and a pinch of JavaScript to your code, and voilà – It’s now ready for use.
Some CSS
.hide-if-nojs {
display: none;
}
Some jQuery
$(document).ready(function() {
$(".hide-if-js").hide();
});
Now you can apply the class names on elements you want to hide