Posted By

EgoAnt on 09/02/11


Tagged

css javascript html noscript


Versions (?)

JavaScript NOSCRIPT Sample


 / Published in: HTML
 

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

This is just a quick sample that shows how to have a button visible on a page only if the person has JavaScript enabled.

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

Report this snippet  

You need to login to post a comment.