Do you need a simple way for detecting if JavaScript is enabled in the browser and to notify the user that JavaScript is disabled.
Here is a simple method that I came across:
It uses JQuery and CSS. The idea is to have a JSMessage div with static text that specifies that Javascript is disabled in the browser. You then use Jquery to hide the div. If Javascript is enabled the message goes away, otherwise the message is seen by the user. The CSS helps in displaying the message prominently to the user.
Below is a screen shot of the site in IE:
Here is the source code:
HTML, using GeSHi 1.0.8.8
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head>
<title>JavaScript Browser Test Sample</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<style type="text/css">
#jsMessageContainer
{
text-align: center;
width: 100%;
z-index: 100;
position: absolute;
margin-top: 45px;
}
#jsMessage
{
padding: 10px;
background-color: #FFFFE1;
width: 400px;
border: solid 3px #CCCCCC;
top: 20px;
margin: auto;
text-align: left;
}
#jsMessage .exclamation
{
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div id="jsMessageContainer">
<div id="jsMessage">
<p>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Error.svg/497px-Error.svg.png" width="50px" class="exclamation" />
JavaScript is required for running this website.
Instructions for fixing it........
</p>
</div>
</div>
<script type="text/javascript">
$("#jsMessageContainer").hide();
</script>
</body>
<h1>Hello World</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt lacus odio, at commodo neque. Aliquam ac felis magna, et placerat dui. Fusce fermentum, diam et congue rhoncus, ligula erat hendrerit magna, vel molestie augue velit vel ipsum. Mauris in erat mauris. Maecenas semper, sapien quis pretium ullamcorper, felis est posuere sapien, volutpat imperdiet enim magna at tortor. Praesent a nisi enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam varius varius libero sit amet dapibus. Cras sed purus id sem bibendum accumsan. Mauris aliquam hendrerit aliquam. Mauris adipiscing congue nulla id pellentesque. Cras feugiat placerat quam, sed commodo lacus fringilla nec. Cras tempus lorem ut massa consequat accumsan. Suspendisse id urna nibh. Fusce mauris quam, imperdiet nec bibendum a, euismod at eros. Quisque accumsan orci vel eros bibendum id sollicitudin turpis adipiscing.
<html>
No comments:
Post a Comment