Advanced Search

JavaScript NOSCRIPT Sample

/ Published in: HTML
Save to your folder(s)
This is just a quick sample that shows how to have a button visible on a page only if the person has JavaScript enabled.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript NOSCRIPT Sample</title>
  5. <style>
  6. 	body
  7. 	{
  8. 		margin: 0px;
  9. 		padding: 0px;
  10. 		background: url(http://static2.grsites.com/archive/textures/misc/misc221.gif);
  11. 	}
  12. 	.alphaBkg
  13. 	{
  14. 		position: fixed;
  15. 		width: 100%;
  16. 		height: 100%;
  17. 		background: #000;
  18. 		margin: 0px;
  19. 		padding: 0px;
  20. 		opacity: .5;
  21. 		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  22. 		filter: alpha(opacity=50);	
  23. 	}
  24.  
  25. 	.modal
  26. 	{
  27. 		position: fixed;
  28. 		width: 250px;
  29. 		height: 40px;
  30. 		background: #cfcfcf;
  31. 		border: 4px solid #fff;
  32. 		left: 50%;
  33. 		margin-left: -125px;
  34. 		top: 50%;
  35. 		margin-top: -20px;
  36. 		text-align: center;
  37. 	}
  38.  
  39. 	.inputButton
  40. 	{
  41. 		font-size: 12px;
  42. 		width: 200px;
  43. 		height:42px;
  44. 		position: absolute;
  45. 		left: 50%;
  46. 		margin-left: -100px;
  47. 		top: 50%;
  48. 		margin-top: -21px;
  49. 	}
  50.  
  51. </style>
  52. </head>
  53. <body>
  54. <!-- Set the button to be invisible by default. I have done this with CSS -->
  55. <input type="button" id="sampleButton" value="Is your JS working?" onclick="alert('Yes! JavaScript Working!');" class="inputButton" style="display: none;" />
  56.  
  57. <script type="text/javascript">
  58. 	//This JavaScript fires if JS is enabled, making the button visible.
  59. 	document.getElementById('sampleButton').style.display = "block";
  60. </script>
  61. <noscript>
  62. 	<!-- If JavaScript is disabled the content in between the NOSCRIPT tages is displayed. -->
  63. 	<div class="alphaBkg"></div>
  64. 	<div class="modal">
  65. 		<span style="display: block; font-size: 12px; margin-top: 13px; font-family: arial, sans serif;">You don't have JavaScript Enabled!</div>
  66. 	</div>
  67. </noscript>
  68. </body>

URL: http://www.egoant.com/tutorials/samples/JSDisabledSample.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.