Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Programming languages | HTML | jQuery panel to show info about cookies
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

jQuery panel to show info about cookies

This tutorial will show you a way of implementing a customized solution to the impending EU cookie law by showing an info panel using jQuery.

 
  Author: podtalje | Version: Demo | 16th June 2013 |  
 
 
1.
 

The EU Cookie Law is the EU e-Privacy Directive and defines that you have to get your visitors informed consent before placing a cookie on their machine.

This tutorial will show you how to implement a customized solution on your web page.

 
 
2.
 

First we will define a message that will be shown to the users and add "I Agree" button which will hide the message for ever.


Place the code after the <body> tag.

<div id="message">
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
<button class="buttons" onClick="hideForever();">I Agree</button>
</div>


Of course you can change the message to suite your needs.

 
 
3.
 

Use CSS to style your message.

It is important that that you use display: none, so that the message will initially be hidden.

 
 
4.
 

On the image you can see an example of the message that will later be shown in the demo.

 
 
5.
 

In your document set the reference to the CSS file you are using.
<link rel="stylesheet" href="cookies.css">

We will also be using some javascript.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/cookies.js"></script>


jQuery will be used to show, hide and slide the panel.
We will use jquery.cookie to manipulate with cookies.
In cookies.js we will write our own code which is described below.

 
 
6.
 

Now open the file cookies.js.

$(document).ready is executed when the page is loaded.

If the user has not yet confirmed the use of cookies, we will show a our message with one second delay.

$(document).ready(function(){
    if ($.cookie('cookies_enable')) {
        $("#message").css("display:","none");
    } else {
        $('#message').delay(1000).slideDown(500);
        }
});


 
 
7.
 

Now we also add some useful functions below.

// To hide the message but show it again on page reload
function hideMessage(){
  $('#message').delay().slideUp(500);
}

// To hide the hide the message and set the cookie so when the page is reloaded the message does not appear
function hideForever(){
  $('#message').delay().slideUp(500);
  $.cookie('cookies_enable', 'foo', { expires: 180 });
}

// Optional function to show message manually on the demo page
function showMessage(){
  $('#message').delay().slideDown(500);
}

// Delete cookie

function deleteCookie() {
  $.removeCookie('cookies_enable');
}


 
 
8.
 

You can now use this functions in onClick event to control the message panel from your web page.

<button onClick="showMessage();" class="buttons">Show cookie message</button>

<button onClick="hideMessage();" class="buttons">Hide cookie message</button>

<button onClick="deleteCookie();" class="buttons">Delete confirmation cookie</button>





 
 
9.
 

The result should now look similar to the image on the left.

You can of course use CSS to set the style of the text and buttons.

 
 
10.
 

We will now use if statement in javascript to check if the user has confirmed the use of cookies by checking if there is a cookie named cookies_enable present.

<script type="text/javascript">
if ($.cookie('cookies_enable')) {
  //code
}
</script>


Below is an example to enable Google Analytics.

<script type="text/javascript">
if ($.cookie('cookies_enable')) {

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-123456-78']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
}  //end: if cookie
</script>


 
 
11.
 

To see how the final result looks like check our DEMO page.

And complete source code from this tutorial can be found on link SOURCE CODE


If you have any problems or question about this tutorial just ask on forum and we will do our best to help you.

 
 
 
   
  Please login to post a comment
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO