Snippets

Rik Kendell No JS notice

Created by Rik Kendell
1
2
3
4
5
<div id="nojs-notice">
    <div class="nojs-inner container">
        <p>For a better experience on this site, please <a target="_blank" href="http://www.enable-javascript.com/">enable JavaScript in your browser</a></p>
    </div>
</div>
#nojs-notice {
    display: flex;
	background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 5;
    width: 100%;
    display: flex;
    animation-name: nojsfadein;
    animation-iteration-count: 1;
    animation-duration: 1.5s; 
}
.nojs-inner {
	background: white;
    margin: auto;
	max-width: 600px;
	text-align: center;
	width: 80%;
}

// Fade-in with CSS. Avoids flash of content on browsers with JS.
@keyframes nojsfadein {
    0% 		{ opacity: 0; }
    25% 	{ opacity: 0; }
    100%   	{ opacity: 1; }
}
1
2
3
4
5
6
7
8
9
// jQuery wrapper
(function ($) {
    $(document).ready(function () {
        
        // Remove notice immediately if JS enabled. 
        $("#nojs-notice").remove();
        
    });
})(jQuery);

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.