Revision: 50778
Updated Code
at September 2, 2011 08:15 by EgoAnt
Updated Code
<!DOCTYPE html> <html> <head> <title>JavaScript NOSCRIPT Sample</title> <style> body { margin: 0px; padding: 0px; background: url(http://static2.grsites.com/archive/textures/misc/misc221.gif); } .alphaBkg { position: fixed; width: 100%; height: 100%; background: #000; margin: 0px; padding: 0px; opacity: .5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .modal { position: fixed; width: 250px; height: 40px; background: #cfcfcf; border: 4px solid #fff; left: 50%; margin-left: -125px; top: 50%; margin-top: -20px; text-align: center; } .inputButton { font-size: 12px; width: 200px; height:42px; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -21px; } </style> </head> <body> <!-- Set the button to be invisible by default. I have done this with CSS --> <input type="button" id="sampleButton" value="Is your JS working?" onclick="alert('Yes! JavaScript Working!');" class="inputButton" style="display: none;" /> <script type="text/javascript"> //This JavaScript fires if JS is enabled, making the button visible. document.getElementById('sampleButton').style.display = "block"; </script> <noscript> <!-- If JavaScript is disabled the content in between the NOSCRIPT tages is displayed. --> <div class="alphaBkg"></div> <div class="modal"> <span style="display: block; font-size: 12px; margin-top: 13px; font-family: arial, sans serif;">You don't have JavaScript Enabled!</div> </div> </noscript> </body>
Revision: 50777
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at September 2, 2011 08:13 by EgoAnt
Initial Code
<!DOCTYPE html> <html> <head> <title>JavaScript NOSCRIPT Sample</title> <style> body { margin: 0px; padding: 0px; background: url(http://static2.grsites.com/archive/textures/misc/misc221.gif); } .alphaBkg { position: fixed; width: 100%; height: 100%; background: #000; margin: 0px; padding: 0px; opacity: .5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .modal { position: fixed; width: 250px; height: 40px; background: #cfcfcf; border: 4px solid #fff; left: 50%; margin-left: -125px; top: 50%; margin-top: -20px; text-align: center; } .inputButton { font-size: 12px; width: 200px; height:42px; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -21px; } </style> </head> <body> <!-- Set the button to be invisible by default. I have done this with CSS --> <input type="button" id="sampleButton" value="Is your JS working?" onclick="alert('Yes! JavaScript Working!');" class="inputButton" style="display: none;" /> <script type="text/javascript"> document.getElementById('sampleButton').style.display = "block"; </script> <noscript> <div class="alphaBkg"></div> <div class="modal"> <span style="display: block; font-size: 12px; margin-top: 13px; font-family: arial, sans serif;">You don't have JavaScript Enabled!</div> </div> </noscript> </body>
Initial URL
http://www.egoant.com/tutorials/samples/JSDisabledSample.html
Initial Description
This is just a quick sample that shows how to have a button visible on a page only if the person has JavaScript enabled.
Initial Title
JavaScript NOSCRIPT Sample
Initial Tags
css, javascript, html
Initial Language
HTML