An easy notification toolbar cookie

Making a notification toolbar with simple javascript and php.

Step 1) Javascript
A jquery click function to add our cookie
- Note is too easy to make work without jquery, just plain javascript, but for making more easy I write it like this -
Let me explain what does this script.
When someone clik on "cookie-accept" a javascript cookie added to your broswer with the following data*
and hides the "cookie-toolbar"

  • * Data to store in our cookie
  • Name of our cookie: ourCookie
  • Value to hold our cookie: value_is_set
  • Path to store we set in root i.e. for all pages: /
  • Domain to operate our cookie: simply4all.net
  • We not add a date to expire, this is for make our cookie to expire when browser is closed.
$('#cookie-accept').on('click', function(e){
	document.cookie = "ourCookie=value_is_set; path=/; domain=simply4all.net";
	$('#cookie-toolbar').hide();
	e.preventDefault();
	});

Step 2) HTML & PHP
Write a few lines html with inline php to check if cookie exist and to make toolbar to show or hide.
How this is working?
This piece of code $_COOKIE['ourCookie']!='value_is_set' read our cookie and check if "ourCookie" have the value "value_is_set"
if in our cookie "value_is_set" exist (i.e user has accepted our cookie by clicking "cookie-accept") hides "cookie-toolbar" else display it!
Simple as that..

<div id="<?php echo ($_COOKIE['ourCookie']!='value_is_set' ? 'cookie-toolbar' :'toolbar-off')?>">
	<span>We use cookies just to track visits to our website, we store no personal details.</span> 
	<a href="#" id="cookie-accept">Got it!</a> or <a href="#">read more</a>
</div>

Step 3) CSS
Styling the toolbar it's fair easy with CSS!

#toolbar-off {
	display: none;
}

#cookie-accept {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	background: #7DAF3B;
	padding: 2px 10px;
	height: 30px;
	line-height:30px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
	text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	}

#cookie-toolbar {
	display: block;
	position: fixed;
	z-index: 3000;
	bottom: 0; /* or top:0 */
	width: 100%;
	color: #fff;
	background: #4F4A41;
	padding: 10px 0;
	text-align: center;
	line-height: 36px;
	overflow: hidden;
	}
	
#cookie-toolbar a {
	margin:0 5px;
	}

#cookie-toolbar a:hover {
	color:#fff;
	}
	
#cookie-accept:hover {
	text-decoration: underline;
	}
a {
	color: #009CFF
}

That's all folks Download file

Here are some documents to read more.
https://en.wikipedia.org/wiki/HTTP_cookie
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
http://www.quirksmode.org/js/cookies.html
http://code.tutsplus.com/tutorials/an-introduction-to-cookies--net-12482
http://cookiecuttr.com/
https://github.com/js-cookie/js-cookie
http://www.sitepoint.com/how-to-deal-with-cookies-in-javascript/
http://php.net/manual/en/function.setcookie.php

Author: Admin

Views 1022

Added @ 29.08.2015. 16:28



Comments

This article hasn't been commented yet.

Write a comment

* = required field





7 + 5 =