Making the web work. Together.

Cookie compliance module in jQuery

Posted by Ed on 30 May 2012 | 0 Comments

Tags: , , , ,

A simple jquery module[tte] to add cookie information discreetly to your site

This is a simple cookie compliance notification gadget/widget, written in jquery/js, allowing compliance with cookie notification requirements without too much pain.

The source files can be found on SourceForge and are pretty simple, so for the most part just copying the code from the sample to your page(s) will work.

For those who may be new to stuff like jQuery, here is a basic tutorial:

The module needs jquery and jquery cookie. Both are available in the sample files, but here are the links anyway.

jQuery

jQuery cookie

You will also need the cookieSelect.js file which is in the SourceForge link above.

To use the module, create an html file.

In the head, add the 3 javascript resources, like:

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="cookieSelect.js" type="text/javascript"></script>

In the body, add a div that is used to invoke and show the cookie information:

<div id="cookiecheck" style="display:none;"></div>

Note the div is set to display:none. This is because we only show it if there is no accepted cookie.

Now back to the head, add a script to call the cookieSelect function:

<script type="text/javascript">
$(document).ready(function()
{
$('#cookiecheck').cookieSelect();
});
</script>

This binds the cookieSelect process to the div we created and uses the module with the default settings. There are only 3 options, and you can apply them in the usual manner as follows:

<script type="text/javascript">

$(document).ready(function()
 {
 $('#cookiecheck').cookieSelect({
 file: '/cookie.html',

approveClass: 'a.cookie-select',
period: 365
 });
});
</script>

This is what the options do:

file: tells the script where the markup is that goes into the notification div.

approveClass: is the selector defined in the file that gets a click() event that sets the cookie when someone approves cookies.

period: is the time, in days, that the cookie is set for.

These are the defaults so if you have your ajax called markup for the display div in cookie.html, with a link to approve cookies with a class of 'cookie-select' and want the cookie to stay for a year, the defaults work fine.

Once you have all these pieces in place, you can style up the notification however you like.

You now have a working cookie notification and approval app/widget/mosule/script on your page or site.


Post your comment

Comments

No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments