I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears. The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.

How can I do this?

This is the script I'm using for now:

$(document).ready(function(){
    $("div#mask").click(function() {
        $("div#intro").fadeToggle('slow');
        $("div#container").fadeToggle('slow');
        $("div#mask").css("z-index", "-99");
    });
});

Thank you!

I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears. The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.

How can I do this?

This is the script I'm using for now:

$(document).ready(function(){
    $("div#mask").click(function() {
        $("div#intro").fadeToggle('slow');
        $("div#container").fadeToggle('slow');
        $("div#mask").css("z-index", "-99");
    });
});

Thank you!

• javascript
• jquery

• Have you considered using cookies? w3schools.com/js/js_cookies.asp – w00 Commented Dec 8, 2011 at 9:56

4 Answers 4

You can try using a simple counter.

// count how many times click event is triggered
var eventsFired = 0;
$(document).ready(function(){
    $("div#mask").click(function() {
        if (eventsFired == 0) {
            $("div#intro").fadeToggle('slow');
            $("div#container").fadeToggle('slow');
            $("div#mask").css("z-index", "-99");
            eventsFired++; // <-- now equals 1, won't fire again until reload
        }
    });
});

To persist this you will need to set a cookie. (e.g. $.cookie() if you use that plugin).

// example using $.cookie plugin
var eventsFired = ($.cookie('eventsFired') != null)
    ? $.cookie('eventsFired')
    : 0;

$(document).ready(function(){
    $("div#mask").click(function() {
        if (eventsFired == 0) {
            $("div#intro").fadeToggle('slow');
            $("div#container").fadeToggle('slow');
            $("div#mask").css("z-index", "-99");
            eventsFired++; // <-- now equals 1, won't fire again until reload
            $.cookie('eventsFired', eventsFired);
        }
    });
});

To delete the cookie later on:

$.cookie('eventsFired', null);

Just point to an empty function once it has been called.

var myFunc = function(){
     myFunc = function(){}; // kill it
     console.log('Done once!'); // your stuff here
};

Web pages are stateless in that they don't hold states between page refreshes. When you reload the page it has no clue what has happened in the past.

Cookies to the rescue! You can use Javascript (and jQuery has some nice plugins to make it easier) to store variables on the client's browser. Store a cookie when the mask is clicked, so that when the page is next loaded it never shows.

this code with will work perfect for you and it is the standard way provided by jquery to bind events that you want to execute only once

 $(document).ready(function(){
        $("div#mask").one('click', function() {
            $("div#intro").fadeToggle('slow');
            $("div#container").fadeToggle('slow');
            $("div#mask").css("z-index", "-99");
        });
    });