jquery.cookiefy
Lightweight jQuery plugin to the EU cookie laws
Demo: kmarryo.github.io/jquery.cookiefy
Installation
-
Install via either bower, npm or downloaded files:
- via bower:
bower install --save jquery.cookiefy
- via npm:
npm install --save jquery.cookiefy
- via CDN (jsDelivr)
- via downloaded files
- via bower:
-
Include jquery.cookiefy in your HTML.
- When using bower
<script src="bower_components/jquery.cookiefy/dist/jquery.cookiefy.min.js"></script>
- When using npm
<script src="node_modules/jquery.cookiefy/dist/jquery.cookiefy.min.js"></script>
- When using CDN
<script src="//cdn.jsdelivr.net/jquery.cookiefy/1.0/jquery.cookiefy.min.js"></script>
- When using downloaded files
<script src="YOUR_PATH/jquery.cookiefy.min.js"></script>
Usage
$('body').cookiefy();
Optional Parameters
Define your own text and styles for the eu-cookie warning.
Name | Default | Sample | Description |
---|---|---|---|
displayedHtml | warning text* | You can insert your own cookie warning text, e.g.with a link to your cookie policy site | |
closeButtonUrl | close-btn.png | Change the close button. Valid parameters: relative/absolute image url or base64 string | |
backgroundColor | #bebebe | tomato | Changes the background-color of the cookie-warning |
color | #000 | #fff | Sets the color. |
fontFamily | Helvetica | Sets the font-family | |
fontSize | 1.25em | Sets the font-size. | |
borderTop | 1px solid #000 | 2px dotted green | Sets the border-top value |
borderTop | 1px solid #000 | 2px dotted green | Sets the border-top value |
zIndex | 50 | 130 | Set the z-index value of the cookie warning container |
devMode | false | true | On true no cookie will be set and the warningshows up every time you open the page |
*We use cookies to ensure that we give you the best experience on our website. If you continue, you agree with <strong>our cookie policy</strong>.
Example
$('body').cookiefy({ backgroundColor: 'dimgray', color: 'ghostwhite', fontFamily: 'Helvetica', fontSize: '1rem', borderTop: '1px solid #000', closeButtonUrl: 'https://cdn3.iconfinder.com/data/icons/interface/100/close_button_1-512.png' });
Customize via CSS
You can style this three css ids:
#cookiefy_bar
(complete cookie message div)#cookiefy_cookie-text
#cookiefy_close
(close button)
License
MIT