I need to have a splash page, but I don't want to make it my index, so I am using this solution.

I am using this technique: http://jsfiddle.net/JjvzT/

on this page: http://www.kineticoriginsofrhythm.com/

But I cant get the "Enter" button to reveal the index page below. Any Suggestions? It just flickers and jumps back to the Video Splas开发者_运维知识库h Page.

Also whats the js cookie code that makes it only appear once per day?

Thank You Very Much.

Also, if you can save your "anti-Splash" debates for another time that would be great. Client "MUST HAVE" this splash page. Not my idea.

Change the href attribute for your "Enter" anchor to "#". Right now you are redirecting them to the same page after hiding the splash, which is forcing them to load the page in its initial state again.

EDIT: For the cookie,

jQuery(function(){
    if(document.cookie.indexOf("firstvisit") != -1){
        $("#splash").hide();
        $("#container-index").show();
    }
    else{
        $("#splash span").click(function() {
            $("#splash").hide();
            $("#container-index").show();

            var expireDate = new Date();
            /* sets expire date to current date + 1 day */
            expireDate.setDate(expireDate.getDate() + 1);
            var newCookie = "firstvisit=0;expires=" + expireDate.toUTCString();
            document.cookie = newCookie;
        });
    }
});

Caveat: I haven't tested this. See here for more on JavaScript and cookies: http://www.w3schools.com/JS/js_cookies.asp

I took ZDYN's answer and created splash.js, which can simply be added to your splash page (not a hidden div) and to the page that you want to redirect from, ie. index.html or something.

Anyway, here's the commented, working code:

/*
1. Create a separate html page to be the splash page

2. Out a referrence to this script in the splash page
    -put below the "jquery.js" script reference
    <script type="text/javascript" src="Scripts/splash.js"></script>

3. Put a reference to this script in every page that you want to have the splash page appear on
    -put below the "jquery.js" script reference
    <script type="text/javascript" src="Scripts/splash.js"></script>

4. Set the "splashPageName" below to the file name of the splash page

5. Set the date variables below
*/


var splashPageName = "splash.html";  
var endSplashDate = new Date("12/7/2011");
var expireCookieDate = new Date();


(function() {
    var url = window.location.toString();   


if (url.toLowerCase().indexOf(splashPageName) >= 0) {
    /* sets expire date to date + 1 day */
    expireCookieDate.setDate(expireCookieDate.getDate() + 1);
    var newCookie = splashPageName + "=0;expires=" + expireCookieDate.toUTCString();
    document.cookie = newCookie;
}
else {

    if (document.cookie.indexOf(splashPageName) != -1) {
        //stay here, they've already seen the splash page
    }
    else {
        var today = new Date();
        if (endSplashDate > today) {
            window.location = splashPageName;
        }
    }
}
} ());

Try this

$(document).ready(function(){
  $("#splash").click(function() {
    $(this).hide();
    $("#container-index").show();
  });
});