"Bandeau de notification des cookies (loi européenne)"
Bootstrap 3.3.0 Snippet by VisionDesign.fr

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body id="body">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Afficher / Masquer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Nom du site</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Lien <span class="sr-only">(actuel)</span></a></li>
<li><a href="#">Lien</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Lien</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Liste <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body{ top:0; -moz-transition: top 0.35s ease-in-out; -webkit-transition: top 0.35s ease-in-out; -o-transition: top 0.35s ease-in-out; -ms-transition: top 0.35s ease-in-out; transition: top 0.35s ease-in-out; }
#cookies-banner{ position:fixed; top:0; left:0; z-index:9999; width:100%; border-radius:0; padding:5px 10px; vertical-align:middle; margin:0; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/* jQuery Google Analytics Plugin https://github.com/shamasis/jquery-ga - http://www.shamasis.net/projects/ga/ @version 2.0.2 */
(function(b){var d=window,c,f=function(a,b){return function(){a.apply(c,b)}},g=function(){var a;if(!c)throw"Tracker has not been defined";for(a in c)"_"===a.charAt(0)&&b.isFunction(c[a])&&(b.ga[a.substr(1)]=f(c[a],arguments))};b.ga={};b.ga.load=function(a,e){b.ajax({type:"get",url:("https:"===document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js",cache:!0,success:function(){if(!d._gat||!d._gat._getTracker)throw"Tracker has not been defined";c=d._gat._getTracker(a);g();
b.isFunction(e)&&e(c);c._trackPageview()},dataType:"script",data:null})}})(jQuery);
// création du cookie
function createCookie(name, value, days) {
if(days){
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
// lecture du cookie
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i ++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
$(document).ready(function(){
// Notifications pour les cookies
var cookie_avert = readCookie("cookie_avert"),
g_analytics_id = "xxxxxx-x", // Id unique google analytics
domain_name = "www.domain-name.fr"; // nom de domaine du site
if(cookie_avert === null) { // si le cookie n'existe pas
banner_text = 'En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies à des fins de mesure d\'audience. <button class="btn btn-success btn-gradient btn-sm" id="accept-cookie">J\'accepte</button> <button class="btn btn-danger btn-gradient btn-sm" id="deny-cookie">Je refuse</button>';
$("body").prepend('<div id="cookies-banner" class="alert alert-warning text-center">' + banner_text + '</div>');
$("body").css({"top" : $("#cookies-banner").outerHeight() + "px", "position" : "relative"});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Je suis certainement nul, mais ce script à l'air super, par contre comment s'en servir ? où met-on me HTML, le CCS et le javascript ?
merci
Gérard

Gaeil () - 8 years ago - Reply 0