Cookies are an important part of modern browsers. Without them, we couldn’t browse websites that require authentication, such as social networks since we’d be asked for our password on every page we’d browse. We wouldn’t be able to write a simple e-mail, or purchase stuff online. Website usage would be limited to browsing only static websites. In this tutorial we’ll focus only on creating and editing cookies using jQuery.
I’ll be using a cookie plugin created by Klaus Hartl. We do not need to edit anything in this file, just call it after jQuery. Download the script
##Step 1 - HTML first
Based on the example above, we create a DIV and inside it we add two messages. One that will be displayed only once, when the page is loaded, and the other will be displayed after the first one was shown. Whether to show the first or second message is the job of CSS:
<div class="message change-message--on-load hide--second">
<p>This message is displayed only the first time you visit this page. Refresh your page to hide it!</p>
<p>This is shown only after the previous message was shown in the last visit. Even when you refresh the page, the browser remembers your option.</p>
</div>
##Step 2 - CSS
With CSS we tell the browser to hide the first message if the div’s class is .hide--first or hide the second message if the div’s class is .hide--second:
.hide--first > *:first-child {
display: none;
}
.hide--second > *:last-child {
display: none;
}
##Step 3 - Initialising
For faster loading times, add your JavaScript to the bottom of the page, before closing the </body> tag. First, we need to call jQuery.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Next we call the cookie script. Make sure you add the correct URL pointing to the script.
<script type="text/javascript" src="cookie.js"></script>
Below it, we add an empty script tag and we can start coding:
<script type="text/JavaScript">
</script>
##Step 4 - JavaScript
First we add the cookie code. There are two parts to this: one that checks if cookie exists, and the other part is the one that adds the cookie. First, we will check for the cookie (I’ll explain why later). If the cookie is true, hide the initial message and show the other one (with CSS) by changing the class of the <div>:
if ($.cookie('hide-after-load') == 'yes') {
$('.change-message--on-load').removeClass('hide--second');
$('.change-message--on-load').addClass('hide--first');
}
Before we close the script tag, we have to add the cookie that will hide the first message. We add it to the end, because if we were to add it before the code that checks (see above) the cookie, it would hide the first message from the start. Adding it at the end ensures that the message will be hidden the next time the page is loaded. It’s set to expire in 7 days.
$.cookie('hide-after-load', 'yes', {expires: 7 });
The complete code for the first example:
<script type="text/JavaScript">
$(document).ready(function() {
if ($.cookie('hide-after-load') == 'yes') {
$('.change-message--on-load').removeClass('hide--second');
$('.change-message--on-load').addClass('hide--first');
}
$.cookie('hide-after-load', 'yes', {expires: 7 });
});
</script>
##Step 5 - Add cookie on click
In the demo page, you saw that the second container would hide the first message and show the other one, only after you clicked on the “×” icon. First we need to add an empty href tag for the icon to our HTML:
<p>You can only hide this message, by clicking the × on the right of this box <a href="#" class="close" title="Hide This Message">×</a></p>
To position the “×” icon to the top-right of the container, we use the absolute inside relative container trick in the CSS:
.message {
position: relative
}
.close {
color: #f00;
position: absolute;
text-transform: lowercase;
right: 20px;
font-size: 1.5em;
top: 10px;
line-height: 1;
border: none !important;
}
Inside the JavaScript tag, we add the code to do something once the icon is clicked. In this case, return nothing so that the URL is not populated with the empty href hash (#) symbol:
$('.close').click(function() {
return false;
})
Once the user has clicked on the icon, we need to check whether the parent container of the icon is displaying the first message or the second. If it displays the first message, hide it by changing its class. Finally, we also add a cookie with the variable yes so that this option is remembered next time.
if (!$('.change-message--on-click').is('hide--first')) {
$('.change-message--on-click').removeClass('hide--second');
$('.change-message--on-click').addClass('hide--first');
// add cookie setting that user has clicked
$.cookie('hide-after-click', 'yes', {expires: 7 });
}
The complete script when clicking the icon looks like this:
$('.close').click(function() {
if (!$('.change-message--on-click').is('hide--first')) {
$('.change-message--on-click').removeClass('hide--second');
$('.change-message--on-click').addClass('hide--first');
$.cookie('hide-after-click', 'yes', {expires: 7 });
}
return false;
})
But wait, we are not done! We also need to check if the clicked cookie has the yes variable attached to it. If it does, show the second message, and hide the first:
if ($.cookie('hide-after-click') == 'yes') {
$('.change-message--on-click').removeClass('hide--second');
$('.change-message--on-click').addClass('hide--first');
}
The complete code for the second example:
<script type="text/JavaScript">
$(document).ready(function() {
// COOKIES
// if the cookie is true, hide the initial message and show the other one
if ($.cookie('hide-after-click') == 'yes') {
$('.change-message--on-click').removeClass('hide--second');
$('.change-message--on-click').addClass('hide--first');
}
// when clicked on “X” icon do something
$('.close').click(function() {
// check that “X” icon was not cliked before (hidden)
if (!$('.change-message--on-click').is('hide--first')) {
$('.change-message--on-click').removeClass('hide--second');
$('.change-message--on-click').addClass('hide--first');
// add cookie setting that user has clicked
$.cookie('hide-after-click', 'yes', {expires: 7 });
}
return false;
})
});
</script>
Download and browse the complete code on GitHub.
##Conclusion
Cookies can be used in many ways. Now you know how to create your own Hellobar. You could take it a step further and figure out how to authenticate users (remember login details) and save entire sessions in the cookies (sign up process doesn’t get lost in case you refresh the page).