The cookies are used to store the information at the user’s computer. The information can be stored and then used for different reasons like saving the user ID and password, shopping cart items, etc. Similarly, it can be used by Ad networks to check the user’s interests based on browsing history.
In 2011, an EU Directive was started that enabled individuals to accept or refuse cookies from a website. If a website does not comply with the EU directive, it may result in serious consequences. You may read more about this here.
In this article, I am going to share a jQuery plug-in for implementing cookie law directives on your website. It simply requires adding the plug-in file and specifying the classes for the direction and style of the cookie notice.
After including the reference files of jQuery and the plug-in JS file, you simply need to use an element like <div> is used in the demo below. In the <div> tag, the following classes are specified for the top direction cookie policy notice:
<div class=”eupopup eupopup-top”></div>
Have a look at the code and top bar policy message:
The complete code of the demo including reference files:
<!DOCTYPE html> <html> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <!-- CSS and JS for our code --> <link rel="stylesheet" type="text/css" href="css/jquery-eu-cookie-law/jquery-eu-cookie-law-popup.css"/> <script src="js/jquery-eu-cookie-law/jquery-eu-cookie-law-popup.js"></script> <body > <div class="eupopup eupopup-top"></div> </body> </html>
You may download this plug-in from the GutHub website here.
In the above example, you saw a div element where the class for direction is specified. The plug-in gives different options for setting the direction. See this example where I set this notice to appear at the bottom of the web page:
The markup for this example:
<!DOCTYPE html>
<html>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- CSS and JS for our code -->
<link rel="stylesheet" type="text/css" href="css/jquery-eu-cookie-law/jquery-eu-cookie-law-popup.css"/>
<script src="js/jquery-eu-cookie-law/jquery-eu-cookie-law-popup.js"></script>
<body >
<div class="eupopup eupopup-bottom"></div>
</body>
</html>
An example of setting notice in the bottom left
This example displays the policy notice on the bottom left. This is done by using the eupopup-bottomleft class. Besides, the style of the cookie notice is eupopup-color-inverse. This sets the light background with dark text.
The code:
<!DOCTYPE html>
<html>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- CSS and JS for our code -->
<link rel="stylesheet" type="text/css" href="css/jquery-eu-cookie-law/jquery-eu-cookie-law-popup.css"/>
<script src="js/jquery-eu-cookie-law/jquery-eu-cookie-law-popup.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-eu-cookie-law/demo.css"/>
<body>
<div class="eupopup eupopup-bottomleft eupopup-color-inverse"></div>
</body>
</html>
Similarly, you may set the right bottom position by using the eupopup-bottomright class while you may also set this as inline by using the eupopup-block class.
You may read more about this plug-in by visiting the above link on the source site.