Im sorry it has taken me so long to put up this second blog. If you are reading this and you have not read the first blog you might want to go and check it out. Make a Flashy IntroOverlay with jQuery. Well first things first take the codes we used in the first blog.

Demo

Now we need to overcome the problem of multiple page refreshes. In this blog we are going to use javascript, and more specifically cookies. We can code this out in pure Javascript, but if your using jQuery already why not take a short cut (write less do more). So im going to attach a jQuery plugin that optimizes the creation and checking of cookies. The name is cookies.

Download jQuery.cookies.js

Take a bit to read over the API its a pretty simple plugin to use. After attaching this plugin below jQuery we are ready to code out some Javascript. First we need to create the cookie.

//create cookie
$.cookie('introCookie', 'viewed', {expires: 0});

First we need to name the cookie(for this example we used introCookie). Then the next parameter is what we want the cookie to say, we are going to use viewed because it seems appropriate. For this use Im going to make the cookie delete when the browser window is closed, which is represented by 0. If I were to use a larger number the number would represent the number of days.

Now we need a way to checks if the cookie is properly working. So to check if the cookie is stored I am going to add a conditional statement that checks if we made the cookie, and then I am going to add an alert inside to run if true.

//create cookie
$.cookie('introCookie', 'viewed', {expires: 0});

if($.cookie('introCookie') === 'viewed'){
    alert('cookie is working now clear you cookies');
}

If you are checking the sample multiple times I suggest finding out how to delete cookies rather then actually closing your browser window.

Now lets add everything together. Im going to modularize everything into functions so that we can keep the code neater and easily editable. Also we need to flip our conditional statement because we are only interested if the statement is false.

$(function(){

if($.cookie('introCookie') !== 'viewed'){
    intro();
}    

function intro(){
    var introCon = $('div#introContainer');

    introCon.show();

    introCon.click(function(){
        $(this).fadeOut(500);
    });

    window.setTimeout(function() {
        introCon.fadeOut(3000);
    }, 2000);

    createCookie();

}

function createCookie(){
    $.cookie('introCookie', 'viewed', {expires: 0});
}

});

Now you should have a working intro. Note that in this sample I added the createCookie function in the bottom of the intro function because I only want to create the cookie if the intro shows. Also I added in a variable, sorry if it has confused anyone, its just habit.

If you are having any problems go ahead and talk to me in the comments about them. Let me know what you think about the tutorial. Also I am developing a plugin that will take care of your intro needs while also doing many other things if you have any suggestions for that plugin leave them in the comments below.