forked from wimagguc/jquery-eu-cookie-law-popup
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
199 lines (169 loc) · 6.56 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>jQuery EU Cookie Law popups</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Dependencies: JQuery should be loaded first -->
<script src="js/jquery-2.1.3.min.js"></script>
<!-- CSS and JS for our code -->
<link rel="stylesheet" type="text/css" href="css/jquery-eu-cookie-law-popup.css"/>
<script src="js/jquery-eu-cookie-law-popup.js"></script>
<!-- Bootstrap for the Bootstrap examples -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
<div class="eupopup eupopup-top eupopup-style-compact"></div>
<h1>jQuery EU Cookie Law popups</h1>
<div class="description">
<b>An easy-to-install jQuery plugin to create EU Cookie Law popups.</b>
<br/><br>
Supports multiple layouts out of the box. Works well with Bootstrap 3. Easy to customize markup and CSS.
<br/><br>
This is a demo page; the newest live demo will always be <a href="http://www.wimagguc.com/2015/03/jquery-eu-cookie-law-popup/">here</a>.
<br/>
For the code, install instructions and to see how amazingly free it is, <a href="https://github.com/wimagguc/jquery-eu-cookie-law-popup">go to Github</a>.
<br/>
Also, you might find other interesting things on my blog at <a href="http://www.wimagguc.com/">wimagguc.com</a>.<br/>
</div>
<H2>Get started</H2>
<div class="description">
To get started, first include jQuery and import the plugin's files:
</div>
<div class="code">
<script src="js/jquery-2.1.3.min.js"></script>
<br>
<link rel="stylesheet" type="text/css" href="css/jquery-eu-cookie-law-popup.css"/>
<br>
<script src="js/jquery-eu-cookie-law-popup.js"></script>
</div>
<div class="description">
(Mind you, you need to run the code on a webserver to be able to set cookies.)
</div>
<H2>Simple popup</H2>
<div class="description">
In its simplest form, you can add an EU Cookie Law popup by simply adding the "eupopup" classes to any HTML tag.
</div>
<div class="code">
<body class="eupopup eupopup-top">
</div>
<div class="description">
You can also choose from these layouts:
<br/>
<img src="docs/eucookielaw-demo.jpg" width="70%"/>
<br/>
<ul>
<li>Top of the page (“eupopup”, or “eupopup eupopup-top”)</li>
<li>Fixed banner on top (“eupopup eupopup-fixedtop”)</li>
<li>Fixed to bottom (“eupopup eupopup-bottom”)</li>
<li>Fixed window, to bottom left (“eupopup eupopup-bottomleft”)</li>
<li>Fixed window, bottom right (“eupopup eupopup-bottomright”)</li>
<li>Inline (“eupopup eupopup-block”)</li>
</ul>
<br>
And these colours or styles:
<br>
<img src="docs/eucookielaw-demo2.jpg" width="70%"/>
<ul>
<li>White text on dark background ("eupopup-color-default")</li>
<li>Dark text on light background ("eupopup-color-inverse")</li>
<li>Compact ("eupopup-style-compact")</li>
</ul>
</div>
<H2>Custom HTML</H2>
<div class="description">
To use a custom HTML markup, you can either add it as a Javascript parameter (read about it later), or by adding a DIV with the classname "eupopup-markup".
</div>
<div class="code">
<div class="eupopup eupopup-container eupopup-container-block">
<br>
<div class="eupopup-markup">
<br>
<div class="eupopup-head">This website is using cookies</div>
<br>
<div class="eupopup-body">We use cookies to ensure that we give you the best experience on our website. If you continue using the site, we\'ll assume that you are happy to receive all cookies on this website.</div>
<br>
<div class="eupopup-buttons">
<br>
<a href="#" class="eupopup-button eupopup-button_1">Continue</a>
<br>
<a href="http://www.wimagguc.com/?cookie-policy" target="_blank" class="eupopup-button eupopup-button_2">Learn more</a>
<br>
</div>
<br>
<div class="clearfix"></div>
<br>
<a href="#" class="eupopup-closebutton">x</a>
<br>
</div>
<br>
</div>
</div>
<H2>Parameters</H2>
<div class="description">
The script takes quite a few parameters. The suggested method to override these is from the init method (find the out-of-the-box one in the jquery-eu-cookie-law-popup.js):
</div>
<div class="code">
$(document).euCookieLawPopup().init({
<br>
cookiePolicyUrl : 'http://www.wimagguc.com/?cookie-policy',
<br>
popupPosition : 'top',
<br>
colorStyle : 'default',
<br>
compactStyle : false,
<br>
popupTitle : 'This website is using cookies',
<br>
popupText : 'We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we\'ll assume that you are happy to receive all cookies on this website.',
<br>
buttonContinueTitle : 'Continue',
<br>
buttonLearnmoreTitle : 'Learn more',
<br>
buttonLearnmoreOpenInNewWindow : true,
<br>
agreementExpiresInDays : 30,
<br>
autoAcceptCookiePolicy : false,
<br>
htmlMarkup : null
<br>
});
</div>
<H2>Events</H2>
<div class="description">
If you need to be notified about the consent somewhere in your code (for example, to enable the cookies in other parts of your software), you can listen to the 'user_cookie_consent_changed' event.
</div>
<div class="code">
$(document).bind("user_cookie_consent_changed", function(event, object) {
<br>
// true or false
<br>
console.log("User consent: " + $(object).attr('consent') );
<br>
});
</div>
<H2>As seen on</H2>
<div class="description">
<a href="http://www.buntlabs.com/">Bunt Creative</a>,
<a href="http://www.divespy.com/">Divespy</a>,
<a href="http://www.appwoodoo.com/">Appwoodoo</a>
<br>
...and perhaps many more in the EU :)
</div>
<H2>Created By</H2>
<div class="description">
Richard Dancsi<br/><br/>
Blog: <a href="http://www.wimagguc.com/">www.wimagguc.com</a>
<br/>
Twitter: <a href="http://twitter.com/wimagguc">twitter.com/wimagguc</a>
<br/>
Github: <a href="http://github.com/wimagguc/">github.com/wimagguc</a>
<br/><br/>
<a href="https://github.com/wimagguc/jquery-eu-cookie-law-popup/blob/master/LICENSE.md">MIT, do-with-the-code-whatever-you-please License</a>
</div>
</body>
</html>