0

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 Splash 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.

3 Answers 3

2

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

1
  • You Rock! Thanks thats exactly what I needed. ^_^ Any chance you know how to cookie it to only happen once per day? I have home buttons on other pages and would like them to skip the splash after the first time seeing it.
    – Varazi
    Feb 23, 2011 at 22:13
2

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;
        }
    }
}
} ());
0

Try this

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.