Cookie Warning Widget With JavaScript

Display Cookie Compliancy warnings to website visitors in the European Union according to the GDPR and other mindless laws. Since we don’t wan’t to annoy everyone just the necessary European population we can target the visitors according to their time zones.

This label makes more sense because with a chainsaw you can actually hurt yourself.

See the warning widget in action on this website or on the demo page.

The warning stripe will keep showing up on every page where the script is active until the visitor clicks the accept button. This will create a cookie on the guest’s computer and keep it for 90 days even if he leaves the website.

What Are These Cookie Warnings Anyway?

You’ve probably come across many sites that seem strangely concerned about cookie education. They show redundant and ineffectual pop-ups that warns you that yes, the site uses cookies.

If you know what cookies are aware that yes, every site uses cookies so this is not a news. However if you are not a programmer and you don’t know what cookies are (just like the creators of this stupid law) then the warning will just leave you confused.

If we need to show these messages and ask for the visitor’s consent to use cookies then why don’t we need to ask their permission to run scripts, download the pages and other essential parts of the operation of the website?

The HTML Code

<div id="myCookieConsent">
	<a id="cookieButton">Understood</a>
	<div>This&nbsp;website is&nbsp;using&nbsp;cookies. <a href="https://html-online.com/privacy-terms-and-conditions/">More&nbsp;details</a></div>
</div>

This code needs to be added to every HTML source where you wish to display the stripe. Add your own text and privacy policy link but make sure to use these ID attributes.

CSS Styles

The stylesheet contains the most essential part to stick the semi-tranparent stripe to the bottom of the page but you can adjust the colors and other aspects to fit your own design.

#myCookieConsent {
    z-index: 999;
    min-height: 20px;
    font-family: OpenSans, arial, "sans-serif";
    padding: 10px 20px;
    background: rgba(0,0,0,0.6);
    overflow: hidden;
    position: fixed;
    color: #FFF;
    bottom: 0px;
    right: 10px;
    display: none;
    left: 0;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}
#myCookieConsent div {
    padding: 5px 0 0;
}
#myCookieConsent a {
    color: #ffba55;
    display: inline-block;
    padding: 0 10px;
}
#myCookieConsent a:hover {
	color: #fda016;
}
#myCookieConsent a#cookieButton {
    display: inline-block;
    color: #000000;
    font-size: 1.1em;
	background: #ffba55;
    text-decoration: none;
    cursor: pointer;
    padding: 2px 20px;
    float: right;
    border-radius: 20px;
}
#myCookieConsent a#cookieButton:hover {
    background: #fda016;
	color: #000;
}

The JavaScript Code

The engine of the widget that fades in the compliancy message if the visitor’s time zone is in the European Union and hasn’t accepted the cookies before. If the visitor accepts the use of cookies then the script saves the setting and won’t annoy him/her again for 90 days (7776000000 miliseconds). The script is using jQuery.

// Cookie Compliancy BEGIN
function GetCookie(name) {
  var arg=name+"=";
  var alen=arg.length;
  var clen=document.cookie.length;
  var i=0;
  while (i<clen) {
	var j=i+alen;
	if (document.cookie.substring(i,j)==arg)
	  return "here";
	i=document.cookie.indexOf(" ",i)+1;
	if (i==0) break;
  }
  return null;
}
function testFirstCookie(){
	var offset = new Date().getTimezoneOffset();
	if ((offset >= -180) && (offset <= 0)) { // European time zones
		var visit=GetCookie("cookieCompliancyAccepted");
		if (visit==null){
		   $("#myCookieConsent").fadeIn(400);	// Show warning
	   } else {
			// Already accepted
	   }		
	}
}
$(document).ready(function(){
    $("#cookieButton").click(function(){
		console.log('Understood');
		var expire=new Date();
		expire=new Date(expire.getTime()+7776000000);
		document.cookie="cookieCompliancyAccepted=here; expires="+expire+";path=/";
        $("#myCookieConsent").hide(400);
    });
	testFirstCookie();
});
// Cookie Compliancy END

We have a more simple solution for this using only HTML-CSS.