Advanced Search

Return to Snippet

Revision: 50778
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
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