{ Barra per Cookie Low con JQuery & PHP }

Avviso che nel sito si fa uso dei Cookie...

Nella giornata del 3 giugno 2015 è entrata in vigore in Italia la tanto discussa cookie law conformemente a quanto stabilito nel provvedimento del Garante per la protezione dei dati personali dell'8 maggio 2014, recante "Individuazione delle modalit√† semplificate per l'informativa e l'acquisizione del consenso per l'uso dei cookie".
la cookie law, infatti, è un provvedimento nato a livello comunitario (direttiva 2009/136/CE) con l'intento di arginare la diffusione dei cosiddetti cookie di profilazione e dei connessi rischi per la privacy degli utenti di Internet...
In conseguenza, nasce l'esigenza, per legge, di avvisare l'internauta che il nostro sito fa uso dei cookie. A mio avviso questa è una grande boiata , comunque per star tranquilli, mettiamo l'avviso che, almeno questo, non ci costa nulla se non un pò di lavoro...
Per "allertare" l'utente, costruiamo una barra sul footer della nostra pagina che contenga l'avviso su detto. Quest'ultima è comunque un elemento fastidioso per chi naviga in quanto non serve a nulla ma copre, se pur poco, i contenuti della pagina. Faremo in modo che possa scomparire con il click su un pulsante ma anche questa operazione è "fastidiosa", quindi facciamo in modo che scomparga anche al semplice scroll della pagina.
Una volta che la barra si nasconde, dobbiamo trovare un sistema che al reload della pagina non comparga nuovamente, quindi al click del pulsante, eseguiamo la scrittura di un Cookie che in sua "presenza" la barra rimanga "nascosta"

Codice:
onclick="document.cookie='block=set;expires'"

Questo comando andrà insrito nel "pulsante" di dismissione della barra. Al click, verrà "scritto" un cookie chiamato "block" con valore "set", con PHP lo recupero e se esiste valorizzo la variabile "$style" che va a nascondere il "contenitore" della barra e fino a che non chiudiamo il browser rimane memorizzata e non fa più vedere il fastidioso avviso. Con il breve css ho dato uno stile alla barra e al bottone per chiuderla (ovviamente molto grezzo, possiamo fare di meglio)

Codice:
< style type="text/css">
.cookieLaw{position:fixed;top:90%;left:0px;width:100%;height:100px;background-color:#000;z-index:10}
	.text > p{font-family:arial;font-size:14px;color:#fff;padding:10px}
	.text{position:absolute;width:80%;height:100%}
	button{position:absolute;right:10%;top:5px;width:120px;height:50px;background-color:#FFA143;
-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;z-index:20}
</style>

Per finire con Jquery creo l'animazione che fa scomparire la barra in dissolvenza (.fadeOut). Da notare che all'evento "scrol" viene compilato il cookie e "nascosta" la barra

Codice:
<script type="text/javascript">
$( document ).ready( function() {
  function chiudiSlide() { $( '.cookieLaw' ).fadeOut( 3000 ); };
  $( window ).scroll( function() {  chiudiSlide();
  document.cookie='block=set;expires'; // aggiungo il cookie all'evento scroll
  });
  $( '#slide' ).click( function(){  chiudiSlide();  });
});
</script>

Per finire e semplificarvi la vita vi lascio con la pagina html compilata per intero.

Codice:
<html>
<head>
 <title>Barra Cookie Law - By: Filomeni</title>
<?php
$cookie = $_COOKIE["block"]; //recupero il cookie
if($cookie=="set"){
	$style="display:none";
}
?>
<style>
.cookieLaw{position:fixed;top:90%;left:0px;width:100%;height:100px;background-color:#000;z-index:10}
	.text > p{font-family:arial;font-size:14px;color:#fff;padding:10px}
	.text{position:absolute;width:80%;height:100%}
	button{position:absolute;right:10%;top:5px;width:120px;height:50px;background-color:#FFA143;
-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;z-index:20}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
  function chiudiSlide() { $( '.cookieLaw' ).fadeOut( 3000 ); };
  $( window ).scroll( function() {  chiudiSlide();
  document.cookie='block=set;expires'; // aggiungo il cookie all'evento scroll
  });
  $( '#slide' ).click( function(){  chiudiSlide();  });
});
	</script>
</head>
<body>
<div class="cookieLaw" style="<?php echo $style ?>"><!--recupero la variabile per nascondere il div-->
<div class="text"><p>Il mio sito, per offrirti i servizi, utilizza cookie. Se vuoi saperne di piu',leggi qui. Chiudendo questo banner, 
scorrendo questa pagina o cliccando qualunque elemento acconsenti all'uso dei cookie. 
Per utilizzare i servizi è necessario che acconsenti all'utilizzo.</p></div>
<button id="slide" type="button" onclick="document.cookie='block=set;expires'" >Accetto!</button>
</div>
</body>
</html>

Siti Web

Da 20 anni Filomeni Maurizio si dedica con passione e tenacia al mondo del web, le sue realizzazioni sono sempre all'avanguardia perchè la sua passione divenuta professione è al passo con i tempi e sempre in fase di studio e ricerca. Grazie ai suoi collaboratori riesce a dedicare il maggior tempo alla programmazione back-end rendendo le applicazioni molto precise e sofisticate. Dopo un attento monitoraggio, Siti Web diventa Partner Partnership di Aruba Group S.p.A

Newsletter & Info

Iscriviti alla nostra newsletter per ricevere aggiornamenti e novità, non riceverai mail indesiderate da parte nostra, odiamo lo spam!


Ti Piace Siti Web?