Introduction
For better user experience and for great user interface .. bla bla ...
Enabling JavaScript is A must on each websites.(period)
Scenario
Let me point out the issues on notifying the visitor to enable JavaScript if that is disabled on the current browser.
There are enough sites pop-up to guide you when you Google it.
But let me walk you through the tricks of handling it.
1. We should be able to place a text on the web page it self. as follows
Unfortunately JavaScript is disable in your Browser. We suggest you enable JavaScript for a better web experience.
2. But we need ti display this message only when the JavaScript is disabled
<noscript>
Unfortunately Javascript is disable in your Browser. We suggest you enable java script for a better web experience.
</noscript>
3. Ok, where do we need to place this snip on the html. Yes, with in the <body>, But placing it at the top is not a good idea for SEO. So place it at the bottom, but before </body> tag.
4. But we need to hilight this piece of text and show up on the browser, here we need css to come in.
4.1 First lets add a <div > to the text
<noscript>
<div id="noscript">
Unfortunately Javascript is disable in your Browser. We suggest you enable Javascript for a better web experience.
</div>
</noscript>
4.2 Now we need css to target #noscript to show up this.
#noscript {
clear: both;
left: 0;
padding: 4px 10px;
position: absolute;
top: 0;
width: 100%;
z-index: 2000;
}
4.3 If I add some colours to this, then
#noscript {
background: none repeat scroll 0 0 #000;
clear: both;
color: yellow;
font-weight: bold;
left: 0;
padding: 4px 10px;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 2000;
}
5. Cool, but we need to hide this again if javascript is enabled, let use js to hide this when document is ready
<script>
$(document).ready(function() {
$('#noscript').hide();
});
</script>
6. Enjoy
0 comments:
Post a Comment