Turn off Splash screen after initial load

Question

Currently for a website, I have index.html, about.html, etc. The splash screen loads on index.html, but I don't want it to appear anymore after initially loading on the home screen. (even going from about page -> index)

This is the jquery I have:

$(document).ready(function() {
    if ($(".splash").is(":visible")) {
        $(".wrapper").css({"opacity":"0"});
    }

    $(".splash-arrow").click(function() {
        $(".splash").slideUp("800", function() {
            $(".wrapper").delay(100).animate({"opacity":"1.0"}, 800);
        });
    });
});

It is connected to index.html. Any suggestions as to how to fix this problem?

Answer 1

If you want to show the splash screen only when the user visits index.html for the first time you need to store that information somewhere. Typically this is done via either LocalStorage or Cookies . For the latter there is an excellent library on github available:

js-cookies .

Keep in mind though that Cookies are sent back to the server with each and every request you make.

Sample Code:

$(document).ready(function() {
    if (typeof Cookies.get("seen_splash") !== "undefined") {
        // Insert code to show the splash screen here
    }

    // Set the cookie for 365 days.
    $(".splash-arrow").on("click", function() {
        Cookies.set("seen_splash", true, { expires: 365 });
    });
});