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:
  • 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=/;";

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>

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;
	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 {
#cookie-accept:hover {
	text-decoration: underline;
a {
	color: #009CFF

That's all folks Download file

Here are some documents to read more.

Author: Admin

Views 1077

Added @ 29.08.2015. 16:28


This article hasn't been commented yet.

Write a comment

* = required field

4 + 2 =