I have already created a splash screen using jquery's fadeOut option. It is working fine but the problem is the screen is loading every time I click to go to next page. I need splash screen only at startup. I think I need to use session or something but I am not able to find the solution. I am using following script.

 $(document).ready(function () {
 $("#splashscreen").click(function () {
    $("#splashscreen").fadeOut(2000); 
 });
 });

I have already created a splash screen using jquery's fadeOut option. It is working fine but the problem is the screen is loading every time I click to go to next page. I need splash screen only at startup. I think I need to use session or something but I am not able to find the solution. I am using following script.

 $(document).ready(function () {
 $("#splashscreen").click(function () {
    $("#splashscreen").fadeOut(2000); 
 });
 });

• javascript
• php
• codeigniter
• splash-screen

4 Answers 4

This should work:

$(document).ready(function () {
    if( $.cookie('splashscreen') == null ) { // Here you are checking if cookie is existing if not you are showing a splash screen and set a cookie
        $("#splashscreen").fadeIn();
        $.cookie("splashscreen", 1, { expires : 10 }); // cookie is valid for 10 days
    }
    $("#splashscreen").click(function () {
        $("#splashscreen").fadeOut(2000); 
    });
});

You can set cookie and check for it when page refreshes. I suggest you to use library like this:

https://github./js-cookie/js-cookie

One option is to handle this in PHP, but you also can use the local storage in JS. Here is a related Topic: How to set session variable in jquery?

Yes, you can use a session for this. on the first line of your code add <?php session_start();

Now, later in your code, you can do:

if(!$_SESSION['splash'])
{
    $_SESSION['splash'] = true;

    //echo your splash code here
}