Simple Screen Take Over that only Shows up Once
|
What if you want to setup a simple page take over – you can do that with JNotify plugin. But what if you want the notification to only show up once – you’ll need something additional for that. In this tutorial we will set up a cookie to activate when the first notification shows up then it keeps the notification from posting again. This is great if you want a user to see the notification once, but then disappear and not bother the user again if they go to other pages.
Cookie Code
I put this is a file called main.js
function createCookie(name, value, days) { var expires; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toGMTString(); } else { expires = ""; } document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/"; } function readCookie(name) { var nameEQ = encodeURIComponent(name) + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length)); } return null; } function eraseCookie(name) { createCookie(name, "", -1); }
JQuery JNotify Code
put this code in the between the
<head>
tags in your website. Also you’ll need to download the jQuery plugin jNotify. I downloaded it and put it in its own folder at the root level. Download the JNotify Script here
<!-- JNOTIFY script for alert --> <!-- include CSS & JS files --> <!-- CSS file --> <link rel="stylesheet" type="text/css" href="jNotify/jNotify.jquery.css" media="screen" /> <!-- jQuery files --> <script type="text/javascript" src="jNotify/jquery.js"></script> <script type="text/javascript" src="jNotify/jNotify.jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ if (!readCookie('jNotifyCookie')) { // more complex Notify box call jNotify( '<H1>Here is a Header!</H1>You can put text, and html in this notification. When typing it out in the code make sure it is all in one line. Javascript can't recognize line breaks. <br><h2><a href="http://www.google.com" target="_blank"> Click Here to goto Google!!!</a></h2>.', { autoHide : true, // added in v2.0 MinWidth : 400, TimeShown : 15000, HorizontalPosition : 'top', VerticalPosition : 'top', } ); // close jNotify createCookie('jNotifyCookie', 100, 1 ); } // end no cookie }); // close document.ready </script> <!-- end JNOTIFY -->