jQuery CookieBar Plugin
On the 26th of May 2012, the EU government decided it was necessary for every website available inside the EU to have to give visitors the option to allow or disable cookies. While most people saw this as unnecessary and a disruption to collecting analytical data, etc, the EU law was passed. One of the EU's steps towards ruining the internet.
But rather than simply refuse to comply and potentially face consequences in the future, a lot of website owners and developers took the step of implementing code on their websites to give users the option to enable or disable cookies.
PrimeBox has it's own code for this; the CookieBar plugin.
- Example 1 - Default settings
- Example 2 - Decline button
- Example 3 - Fixed position
- Example 4 - Accept cookies on scrolling
Once a user has made the decision to either accept or decline, the Cookie Bar slides up, then disappears.
The Cookie Bar can be set up to work in a variety of ways. By default, it uses assumed consent. This means that when a user visits the website, cookies can be set as normal with no interruption. The Cookie Bar is still displayed to provide the user with options for cookies.
It can also be set up to assume refusal. So when a user visits the website, until they press the accept button on the Cookie Bar, no cookies should be set.
The Cookie Bar is also very easy to style. There are just 9 lines of CSS code in total. Changing the heights, widths, background colours, etc. is very quick and easy meaning it can fit in with the website design and colour scheme.
You will also need to initialise the Cookie Bar, which can be done with the following code (Make sure if you already use $(document).ready() that you only copy what you need of below so you don't have too many $(document).ready()'s).
Refresh your website, and the Cookie Bar should appear!
A basic setup may look like the following:
If the cookiebar continues to show after accepting/declining, make sure to remove the option "forceShow" from your code, or set it to "false".
Disabling Google Analytics and other cookies
If a user chooses to disable cookies (If you give them that option), you need to make sure that scripts such as Google Analytics need to be disabled.
This can be done by wrapping the code in a simple if statement.
//Google Analytics or other code here
There are a number of options allowing you to customise how the plugin works:
acceptText: 'I Understand',
declineText: 'Disable Cookies',
If you have any questions about the CookieBar plugin, let us know.
24/07/2015 - acceptAnyClick improved for bootstrap and other frameworks
16/07/2015 - Bug with acceptAnyClick fixed.
15/07/2015 - Added "acceptAnyClick".
11/06/2015 - Bug with acceptOnScroll fixed.
08/06/2015 - Added "acceptOnScroll", "renewOnVisit", "acceptFunction", "declineFunction". Removed "redirect".
06/05/2015 - Bugfixes and CSS adjustment.
03/07/2014 - Added "bottom" and "acceptOnContinue" options. Bottom requires "fixed" set to true.
27/01/2014 - Added "zindex" option. Leave blank to ignore, set as a numerical value to use.
13/06/2013 - Fixed bug when decline button pressed.
24/04/2013 - Added options "effect" and "element".
15/04/2013 - Updated to correctly deal with "fixed" class.
Contact us to find out more
- Ant is a joy to work with, he has great attention to detail whilst bringing ideas of his own to projects. He works without fuss and at speed and often the jobs are complete ahead of schedule. We have been particularly impressed with the clarity of his proposals and his ability to deliver on time and on budget. I would happily recommend PrimeBox to others. Mani, In-Light Ltd