Skip to content

Instantly share code, notes, and snippets.

@adammiller

adammiller/js_fallback_example.html

Created May 19, 2011 02:18
Show Gist options
  • Save adammiller/980046 to your computer and use it in GitHub Desktop.
Save adammiller/980046 to your computer and use it in GitHub Desktop.
Download ZIP
A method for providing fallback content for JS-dependent sites using noscript and feature detection
Raw
js_fallback_example.html
<!DOCTYPE html>
<html>
<head>
<title>JS Fallback Example</title>
</head>
<body>
<noscript>
<div id="fallback" class="overlay-wrapper">
<div id="fallback-content">
<p>Your browser doesn't support the features used on this site. Please download a more modern browser.</p>
</div>
</div>
</noscript>
<div id="fallback" class="overlay-wrapper">
<div id="fallback-content">
<p>Your browser doesn't support the features used on this site. Please download a more modern browser.</p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
// placing this inline ensures it will run as soon as the page loads, and that fallback content is removed as soon as possible
function browserSupportsRequiredFeatures() { return !!( 'getContext' in document.createElement( 'canvas' ) ) && !!( 'JSON' in window ); };
if ( browserSupportsRequiredFeatures() ) {
// remove the placeholder content
var elem = document.getElementById( 'fallback' );
if ( elem ) {
elem.parentNode.removeChild( elem );
}
} else {
// unhide the noscript fallback content
var elem = document.getElementById( 'fallback' );
if ( elem ) {
// remove the display none
elem.removeAttribute( 'style' );
}
}
</script>
<script src="/media/assets/js/app_bundle.min.js" type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment