|
|
|
|
|
jQuery panel to show info about cookies
This tutorial will show you a way of implementing a customized solution to the impending EU cookie law by showing an info panel using jQuery.
|
|
 |
|
|
|
|
|
|
|
|
|
|
 |
1.
|
|
|
The EU Cookie Law is the EU e-Privacy Directive and defines that you have to get your visitors informed consent before placing a cookie on their machine.
This tutorial will show you how to implement a customized solution on your web page.
|
|
| |
2.
|
|
|
First we will define a message that will be shown to the users and add "I Agree" button which will hide the message for ever.
Place the code after the <body> tag.
<div id="message">
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
<button class="buttons" onClick="hideForever();">I Agree</button>
</div>
Of course you can change the message to suite your needs.
|
|
| |
3.
|
|
|
Use CSS to style your message.
It is important that that you use display: none, so that the message will initially be hidden.
|
|
| |
4.
|
|
|
On the image you can see an example of the message that will later be shown in the demo.
|
|
| |
5.
|
|
|
In your document set the reference to the CSS file you are using.
<link rel="stylesheet" href="cookies.css">
We will also be using some javascript.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/cookies.js"></script>
jQuery will be used to show, hide and slide the panel.
We will use jquery.cookie to manipulate with cookies.
In cookies.js we will write our own code which is described below.
|
|
| |
6.
|
|
|
Now open the file cookies.js.
$(document).ready is executed when the page is loaded.
If the user has not yet confirmed the use of cookies, we will show a our message with one second delay.
$(document).ready(function(){
if ($.cookie('cookies_enable')) {
$("#message").css("display:","none");
} else {
$('#message').delay(1000).slideDown(500);
}
});
|
|
| |
7.
|
|
|
Now we also add some useful functions below.
// To hide the message but show it again on page reload
function hideMessage(){
$('#message').delay().slideUp(500);
}
// To hide the hide the message and set the cookie so when the page is reloaded the message does not appear
function hideForever(){
$('#message').delay().slideUp(500);
$.cookie('cookies_enable', 'foo', { expires: 180 });
}
// Optional function to show message manually on the demo page
function showMessage(){
$('#message').delay().slideDown(500);
}
// Delete cookie
function deleteCookie() {
$.removeCookie('cookies_enable');
}
|
|
| |
8.
|
|
|
You can now use this functions in onClick event to control the message panel from your web page.
<button onClick="showMessage();" class="buttons">Show cookie message</button>
<button onClick="hideMessage();" class="buttons">Hide cookie message</button>
<button onClick="deleteCookie();" class="buttons">Delete confirmation cookie</button>
|
|
| |
9.
|
|
|
The result should now look similar to the image on the left.
You can of course use CSS to set the style of the text and buttons.
|
|
| |
10.
|
|
|
We will now use if statement in javascript to check if the user has confirmed the use of cookies by checking if there is a cookie named cookies_enable present.
<script type="text/javascript">
if ($.cookie('cookies_enable')) {
//code
}
</script>
Below is an example to enable Google Analytics.
<script type="text/javascript">
if ($.cookie('cookies_enable')) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-123456-78']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
} //end: if cookie
</script>
|
|
| |
11.
|
|
|
To see how the final result looks like check our DEMO page.
And complete source code from this tutorial can be found on link SOURCE CODE
If you have any problems or question about this tutorial just ask on forum and we will do our best to help you.
|
|
|
 |
|
 |
|
 |
|
|
| |
|
|
|
|
GoXBet,
20th Jul 2021, 8:59 AM |
|
|
| Гоу икс бет казино или же [url=https://goxbet-casino.cyou/GoXBet] Casino[/url] является официальным онлайн заведением на територии СНГ! |
|
|
|
|
|
|
|
|
GoXBet,
24th Jul 2021, 4:58 PM |
|
|
| Гоу икс бет казино или же [url=https://goxbet-casino.cyou/GoXBet] Casino[/url] является официальным онлайн заведением на територии СНГ! |
|
|
|
|
|
|
|
|
|
| Cheap SMM Panel Social Media Marketing is a huge field with a lot of competition. If you want to stand out from the crowd, you need to know how to find ways to make your content go viral. If you are interested in using social media to market your product, this service is perfect for you. The panel gives you access to hundreds of different social media sites, so that you can find new ways to market your business. Visit our website at: https://thefansbuzz.com/ |
|
|
|
|
|
|
|
|
|
| ¿Buscando una manera sencilla de usar ChatGPT en Español sin requerir registro o tokens? ¡Bienvenido a https://gptgratis.net/, un sitio web que permite a cualquier usuario usar ChatGPT sin limitaciones! Nuestra solución ayuda a los usuarios a generar contenidos de manera inmediata, aplicando técnicas de aprendizaje automático que permiten a los usuarios interactuar con la plataforma. |
|
|
|
|
|
|
|
|
boles9,
13th Dec 2023, 8:21 PM |
|
|
| 백링크업체's SEO audits are thorough and insightful. They helped me understand my site's SEO needs better.https://backlinkhigh.com |
|
|
|
|
|
|
|
|
boles9,
21st Dec 2023, 3:44 PM |
|
|
| Find respite in the city with 오피매거진. Its officetel-focused content is a breath of fresh air.https://www.오피가이드.co |
|
|
|
|
|
|
|
|
|
| 천안오피 - a destination for rejuvenation. Their Aromatherapy Massage is heavenly, leaving you refreshed and invigorated.https://www.천안오피.org |
|
|
|
|
