Created
July 24, 2015 12:57
-
-
Save k33/69aa5ebed67b41fe54c5 to your computer and use it in GitHub Desktop.
Simple cookie notification bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Test tube</title> | |
<style type="text/css"> | |
.cookie-notification { | |
display: none; | |
padding-right: 10px; | |
padding-left: 10px; | |
position: fixed; | |
bottom: 0; | |
left: 0; | |
/* Set your cookie notification bar styles here */ | |
background-color: #fff; | |
opacity: 0.8; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="cookie-notification js-cookie-notification"> | |
<p>Cookies help us run this website. By using our website, you agree to our use of cookies. <a href="/your-cookie-policy">Learn more</a> or <a href="#" class="js-cookie-notification-hide">Agree and dismiss</a>.</p> | |
</div> | |
</body> | |
<!-- remove if you already include jQuery --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script> | |
/*! | |
* JavaScript Cookie v2.0.3 | |
* https://github.com/js-cookie/js-cookie | |
* | |
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack | |
* Released under the MIT license | |
*/ | |
!function(e){if("function"==typeof define&&define.amd)define(e);else if("object"==typeof exports)module.exports=e();else{var n=window.Cookies,o=window.Cookies=e(window.jQuery);o.noConflict=function(){return window.Cookies=n,o}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var o=arguments[e];for(var t in o)n[t]=o[t]}return n}function n(o){function t(n,r,i){var c;if(arguments.length>1){if(i=e({path:"/"},t.defaults,i),"number"==typeof i.expires){var s=new Date;s.setMilliseconds(s.getMilliseconds()+864e5*i.expires),i.expires=s}try{c=JSON.stringify(r),/^[\{\[]/.test(c)&&(r=c)}catch(a){}return r=encodeURIComponent(String(r)),r=r.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=encodeURIComponent(String(n)),n=n.replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent),n=n.replace(/[\(\)]/g,escape),document.cookie=[n,"=",r,i.expires&&"; expires="+i.expires.toUTCString(),i.path&&"; path="+i.path,i.domain&&"; domain="+i.domain,i.secure?"; secure":""].join("")}n||(c={});for(var p=document.cookie?document.cookie.split("; "):[],u=/(%[0-9A-Z]{2})+/g,d=0;d<p.length;d++){var f=p[d].split("="),l=f[0].replace(u,decodeURIComponent),m=f.slice(1).join("=");'"'===m.charAt(0)&&(m=m.slice(1,-1));try{if(m=o&&o(m,l)||m.replace(u,decodeURIComponent),this.json)try{m=JSON.parse(m)}catch(a){}if(n===l){c=m;break}n||(c[l]=m)}catch(a){}}return c}return t.get=t.set=t,t.getJSON=function(){return t.apply({json:!0},[].slice.call(arguments))},t.defaults={},t.remove=function(n,o){t(n,"",e(o,{expires:-1}))},t.withConverter=n,t}return n()}); | |
</script> | |
<script type="text/javascript"> | |
// Run the cookie notification functions once the page has loaded | |
$( document ).ready( function() { | |
cookieNotification(); | |
hideCookieNotification(); | |
}); | |
var hideCookieNotification = function() { | |
// Hide the cookie notification after 5 sec | |
$( '.js-cookie-notification' ).delay(5000).fadeOut( "slow" ); | |
// Set a cookie | |
Cookies.set('CookieNotificationCookie', 'true', { expires: 365 }); | |
}; | |
var cookieNotification = function() { | |
var setCookieNotification = function() { | |
// Hide the cookie notification | |
$( '.js-cookie-notification' ).fadeOut( "slow" ); | |
// Set a cookie | |
Cookies.set('CookieNotificationCookie', 'true', { expires: 365 }); | |
// Stop the page reloading | |
return false; | |
}; | |
// Check to see if a cookie notification has been set | |
if ( Cookies.get('CookieNotificationCookie') === 'true' ) { | |
// Tell me a cookie has been set | |
console.log('cookie notification set'); | |
} else { | |
// Tell me a cookie has not been set | |
console.log('cookie notification not set'); | |
// Show cookie notification | |
$('.js-cookie-notification').css({ 'display' : 'block'}); | |
// Hide cookie notification if link clicked | |
$('.js-cookie-notification').find('.js-cookie-notification-hide').click( setCookieNotification ); | |
}; | |
} | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment