Show/Hide Content with Noscript, CSS & jQuery
The following post tackles an issue I came across on a recent project with form validation. I wanted to provide a javascript:history(-1) link to return a user to the previous page whilst retaining text that was entered into the form fields (unlike simply reloading the original page which looses all the form content). However, simply providing a JavaScript link would leave users who have JavaScript disabled orphaned on the page – certainly quite unprofessional and inaccessible.
The percentage of users who have JavaScript disabled is smaller than those who leave JavaScript enabled, but simply relying on global statistics isn’t (in my opinion) enough reason to ignore a percentage of Internet users (especially if there is a fairly simple fix that pleases both parties). According to W3 Schools statistics, 5% of Internet users have JavaScript disabled. In addition to this statistic, more Internet users are turning to browsers such as Firefox with its many customisation options. There are several security add-ons for Firefox that block JavaScript by default and instead allow users to selectively enable JavaScript on a site-by-site basis.
When validating forms I would always recommend using a JavaScript solution that runs client-side to give the user instant feedback (preferably without needing a page reload), along with a server-side validator to deal with users who have JavaScript disabled and to tackle spammers. But this is beyond the scope of this post, and will be dealt with in future posts.
The following code examples show how it’s possible to show a certain portion of content for users with JavaScript enabled whilst hiding another portion designed for those with JavaScript disabled – and vice-versa.
The HTML
The example HTML code below shows two paragraphs of text. One uses a JavaScript link whereas the other uses a normal hyperlink. We can toggle the visibility of the two paragraphs by using a combination of the tag, CSS and jQuery.
<!--Display paragraph if JavaScript is enabled in the browser.--> <p id="hasjs"><a href="javascript:javascript:history.go(-1)">Go back to previous page.</a></p> <!--Display paragraph if JavaScript is disabled in the browser.--> <noscript><p id="nojs"><a href="http://www.examplesite.com/contact/">Go back to previous page.</a></p></noscript>
The CSS
Within the CSS you need to set the #hasjs paragraph to display:none. We will then use jQuery to override the CSS if JavaScript is enabled.
<style type="text/css">
#hasjs {
display:none
}
</style>
The jQuery
The following piece of JavaScript tells the browser to hide the #nojs paragraph and show the #js paragraph. This obviously only applies if JavaScript is enabled in the browser.
<script type="text/javascript">
$(document).ready(function(){
$('#nojs').hide();
$('#hasjs').show();
});
</script>
Put it all together
For the purpose of this demonstration we will include the JavaScript and CSS in the head of the HTML page, but these can both be called from external files.
Please note that you will also need to call the jQuery library either directly from Google Code, or by downloading the latest build and referring to its location on your own server. For caching purposes I call jQuery directly from Google Code so this is how it is shown in the example below.
<html>
<head>
<title>Show/Hide Example</title>
<style type="text/css">
#hasjs {
display:none
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#nojs').hide();
$('#hasjs').show();
});
</script>
</head>
<body>
<!--Display paragraph if JavaScript is enabled in the browser.-->
<p id="hasjs"><a href="javascript:javascript:history.go(-1)">Go back to previous page.</a></p>
<!--Display paragraph if JavaScript is disabled in the browser.-->
<noscript><p id="nojs"><a href="http://www.site-domain-name-here.com/contact/">Go back to previous page.</a></p></noscript>
</body>
</html
Great post Rob!
Why do we need to include the tags as it still works without. Is that for certain browsers?
S.
Sorry for repeat post but it stripped out my tag example.
Why do we need to include the \’noscript\’ tag as it still works without. Is that for certain browsers?
S.
Hi Steve
Including ‘noscript’ will mean the information contained within the ‘noscript’ tag is ignored when JS is enabled in the browser. If it was rendered, you would end up with two sets of information (the JS version and the non-JS version showing up on the page at the same time).
If you drop me the URL I’ll have a look for you though.
Thanks
Why do you hide the content of the noscript tag in your script, surely it’s invisible anyway? I’m surprised you can see the contents from js actually.
Good point Paul, it’s not necessary to hide the #nojs paragraph as the noscript tag should handle it. I did it for completeness to continue to hide the noscript paragraph if noscript is incorrectly handled in some browsers… but probably not necessary.
Thanks for stopping by.
Embrace Progressive Enhancement!!!!
Show/Hide Example
$(document).ready(function(){
$(‘a’).click(function(e){
if ($(this.attr(‘id’)===’previous_page’)){
e.preventDefault();
document.history.go(-1);
}
});
});
Go back to previous page.
Thanks D-Cis, I like your solution. I’ll give it a go when I get time.
Hi,
This is fantastic! I’ve come to the same problem while developing one simple project. However, I noticed that it is solved by having all your js code placed internally then you would simply go by and tags and your content is either displayed if js is enabled (it shows script content) or not displayed (it shows noscript content) when js is disabled, you do not need another function to hide your content. The problem kicks in when you want your java scripts to be placed externally. This is when your cute little nice js function mentioned here comes in handy along with the CSS! Good job! Well-done!
Quuote “Why do you hide the content of the noscript tag in your script, surely it’s invisible anyway? I’m surprised you can see the contents from js actually. Paul.” Unquote
You hide it because when you call javascript function from the “a href” attribute it will be displayed and shown anyway irrespectfully of your active scripting being disabled or not. In other words it will show up both in script and noscript content that’s why you need to hide it.
Why use jQuery, CSS? Do I miss something here? Whats wrong with the code below?
document.write(‘This is generated by javascript…’);
This is not generated by javascript and can be considered as plain HTML
Ah, I see HTML tags get stripped. My code is just a simple javascript block wich print everything you want using document.write and a noscript block for the alternative content… Sorry for the double post.
Wouldn’t you want to make the ‘nojs’ id a class? That way you can still be valid if you have multiple sections you want to hide on a single page.
Hi jirwin, yes you can do that if you need to. I have only ever required a single occurence on a page hence I went with an id, but swap that out for a class if that suits your needs.
Thanks