Snippets

Rik Kendell No JS notice

Created by Rik Kendell
View revision

File footer.html Added

  • Ignore whitespace
  • Hide word diff 
+<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>

File nojs-notice.scss Added

  • Ignore whitespace
  • Hide word diff 
+#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; }
+}

File scripts.js Added

  • Ignore whitespace
  • Hide word diff 
+// jQuery wrapper
+(function ($) {
+    $(document).ready(function () {
+        
+        // Remove notice immediately if JS enabled. 
+        $("#nojs-notice").remove();
+        
+    });
+})(jQuery);
HTTPS SSH

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