Skip to content

Instantly share code, notes, and snippets.

@ianchanning

ianchanning/dismiss.js

Last active Aug 29, 2015
Embed
What would you like to do?
Pure javascript dismissable divs that stay dismissed when you dismiss them
/**
* Dismissable divs that stay dismissed when you dismiss them
*
* Besides the dismiss/check its also a generic Cookie monster
*
* The cookie code is intially from the uk-cookie-consent plugin
* @link https://wordpress.org/plugins/uk-cookie-consent/
*
* Make the js less obtrusive
* @link http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript
*
* And objectify it
* @link http://www.dustindiaz.com/json-for-the-masses/ Functional vs Classy section
*/
var dismiss = {
closeButtons : Object,
cookieName : window.location + '_dismiss',
monster : Object,
/**
*
* @param {String} cookieName The cookie name to store that the div is dismissed
* @param {Object} monster The cookie monster
*/
init : function(monster, cookieName) {
if (cookieName !== undefined) {
this.cookieName = cookieName;
}
this.closeButtons = document.getElementsByClassName('close');
this.monster = monster;
this.run();
},
/**
* Add the onclick events to the closeButtons
*/
run : function() {
for (var i = 0; i < this.closeButtons.length; i++) {
this.shouldIStayOrShouldIGo(this.closeButtons[i]);
this.closeButtons[i].onclick = function () {
dismiss.dismiss(this);
return false;
};
}
},
/**
* Set the cookie and hide the div
*
* @param {Object} closeButton Element
* @returns {undefined}
*/
dismiss : function(closeButton) {
this.monster.bakeCookie(this.cookieName, true, 30);
this.shouldIStayOrShouldIGo(closeButton);
},
/**
* Show the div if the cookie isn't set
*
* @param {Object} closeButton Element
* @returns {undefined}
*/
shouldIStayOrShouldIGo : function(closeButton) {
if (!this.monster.getCookie(this.cookieName)) {
closeButton.parentNode.style.display = "block";
} else {
closeButton.parentNode.style.display = "none";
}
}
};
var monster = {
/**
* Bare initialisation
*/
init : function() {
this.run();
},
/**
* Add the onclick events to the closeButtons
*/
run : function() {
},
/**
* Add cookieName=cookieValue to the document that expires in nDays
* @param {String} cookieName
* @param {Mixed} cookieValue
* @param {Integer} expiresDays
* @returns {undefined}
*/
bakeCookie : function(cookieName, cookieValue, expiresDays) {
var today = new Date();
var expire = new Date();
if (expiresDays === null || expiresDays === 0) {
expiresDays = 1;
}
expire.setTime(today.getTime() + 3600000*24*expiresDays);
document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString()+"; path=/";
},
/**
* Get the value of cookieName
*
* @param {String} cookieName
* @returns {String}
*/
getCookie : function(cookieName) {
var theCookie = " "+document.cookie;
var cookieIndex = theCookie.indexOf(" "+cookieName+"=");
if (cookieIndex === -1) {
cookieIndex = theCookie.indexOf(";"+cookieName+"=");
}
if (cookieIndex === -1 || cookieName === "") {
return "";
}
var nextCookieIndex = theCookie.indexOf(";",cookieIndex+1);
if (nextCookieIndex === -1) {
nextCookieIndex = theCookie.length;
}
return unescape(theCookie.substring(cookieIndex+cookieName.length+2,nextCookieIndex));
},
/**
* Set the expiry of cookieName to a past date
*
* @param {String} cookieName
* @returns {undefined}
*/
eatCookie : function(cookieName) {
var today = new Date();
var expire = new Date() - 30;
var cookieValue = '';
expire.setTime(today.getTime() - 3600000*24*90);
document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString();
}
};
function pageLoader() {
monster.init();
dismiss.init(monster);
}
window.addEventListener('load',pageLoader,false);
<!DOCTYPE HTML>
<!-- An example HTML to use dismiss.js with -->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Dismissed</title>
<style type="text/css">
.dismiss {
background: -moz-linear-gradient(center top , #fcfbfc 0px, #f7f6f7 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 4px;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05) inset, 0 -2px 30px rgba(0, 0, 0, 0.016) inset, 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, 0.3);
color: #5e5e5e;
list-style: none outside none !important;
margin: 0 0 2em !important;
padding: 1em 1em 1em 3.5em !important;
position: relative;
text-shadow: 0 1px 0 #fff;
width: auto;
}
button.close {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
cursor: pointer;
padding: 0;
}
.close {
color: #000;
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #fff;
}
</style>
</head>
<body>
<div class="dismiss" style="display:none;">
<button class="close">&times;</button>
<p>Don't dismiss me!</p>
</div>
<script type="text/javascript" src="dismiss.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment