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 -->
Related Posts
About The Author
john
John began working in/on/with the web when he graduated from the University of Kentucky in 2002 (and also when being a Rock star fell through.) Throughout his career he has built lots of websites, both great and small. He runs a web development company, 3rd Dimension Design and also is a web developer for really big higher ed institution. When he isn’t working, he’s probably playing with his kid, watching baseball or working on personal projects. His least favorite thing to do is write bios about himself (like now). He’s really cool and super attractive. You can find his blog at JohnHarbison.net or follow him on Twitter @Harbison