Simple Screen Take Over that only Shows up Once

jnotify
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 -->