Skip to content
Drop-in jQuery plugin for implied to consent to the EU Cookie directive (UK)
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
README.md
index.html
jquery.cookie.js
jquery.cookieConsent.js
jquery.cookieConsent.min.js

README.md

jquery.cookieConsent

jquery.cookieConsent

Drop-in jQuery plugin for implied consent to the EU Cookie directive (UK implementation).

Compliance in one file and $.cookieConsent(). Please fork and contribute!

Contains jquery.cookie.

This plugin was originally created for The Higgs Design Co.

Usage

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.cookieConsent.min.js"></script>
<script>
  $(function () {
    $.cookieConsent();
  });
</script>

Configuration

You can configure the plugin by passing in an object.

  $.cookieConsent({
    mode: 'default', // Default, tab or popover
    persistence: 'heavy', // Light (hides after viewed once) or Heavy (requires user to interact/close)
    color: {
      main: '#29f', // Border & icon color
      bg: '#fff', // Background color
      popover: 'rgba(0,0,0,.3)', // Popover background color
      text: '#444' // Text color
    },
    font: '12px Tahoma, sans-serif', // Font size & family
    width: 'auto', // Width of the banner
    maxWidth: '50%', // Responsiveness
    link: {
      cookies: "http://en.wikipedia.org/wiki/HTTP_cookie", // The cookies link
      policy: "link/to/your/policy" // The cookie policy link
    },
    content: {
      // Allows you to specify the text content of the plugin, using an aray & object based syntax (explained below)
      // You can also pass in a string, eg: "<p>Read our <a href='/policy.html'>policy</a></p>"
      heading:
        ['strong', {content: 'This site uses '},
          ['a', {href: 'http://en.wikipedia.org/wiki/HTTP_cookie', content: 'cookies.'}]
        ],
      text:
        ['p', {content: "We won't share your data with any third parties."}]
    }
  });

If you'd like to configure the text, you can use the syntax described below:

// The cookieConsent element
// Sytanx is:
//  [element [string], attributes [object], childElements... [arrays]]
// Special attributes:
//  content - inserted as text content of the element
//  css - object run through jQuery's css method

// For example:
var myElement =
['div', {id: "my-element"},
  ['p', {css: {color: "red"}, content: "I love red paragraphs"}],
  ['a', {href: "http://google.com/", content: "Click me!"}]
];

License

MIT License

Copyright (C) Tom Ashworth 2012

Something went wrong with that request. Please try again.