Link to home
Create AccountLog in
Avatar of cofcmgr
cofcmgr

asked on

i need a javascript cookie function to present a temporary splash page only ONCE.

I currently have a splashpage that is generated onload.   I only want the splashpage to generate once, when the user goes into the site.  I know this is managed with cookie but I dont know the syntax to add to the javascript file I am using to present the splash page.  
Avatar of rlbalan
rlbalan

Checkout  http://www.quirksmode.org/js/cookies.html for detailed example on creating  & reading cookies
I threw together a very basic example, but it should show the basic idea behind the logic:

<html>
<head>
<script type="text/javascript">
function checkSplashPage()
{
  // pretend that the table is a "splash page"
  var splashPage = document.getElementById("theTable");

  if (document.cookie.indexOf("splash") == -1)
  {
    // couldn't find it in cookie, so display "splash page"
    // your code would go here
    var className = splashPage.className;
    splashPage.className = className.replace(/\s?hidden/,"");

    document.cookie += "splashShown=true";
  }
  else
  {
    // hide or don't show the splash page
    splashPage.className += " hidden";
  }
}

window.onload = checkSplashPage;
</script>
<style type="text/css">
.hidden {
  display: none;
}
</style>
</head>

<body>
<table id="theTable">
  <tr>
    <td>hello</td>
    <td>world</td>
  </tr>
</table>

<p id="content">My other content goes here</p>
</body>
</html>

I don't have a real splash page, so I just used a table as the "splash page."  The key parts of the script are that the function being called onload (checkSplashPage) does a check in document.cookie for the existence of some string.  I used "spash", but feel free to change that.  If it doesn't find it, it builds the splash page; in my case, that was just making sure that the table doesn't have the hidden class applied to it.  In your case, you'd run whatever code currently executes onload.  If it does find it in the cookie, though, it'll hide/not build the splash page.

One note about this is that the cookie doesn't set any expiration dates, or worry about sessions.  It's easy enough to add in, so let me know if you need that functionality.  Either way, hope that helps.
Avatar of cofcmgr

ASKER

excellent!  i understand fully what you are saying.  i am new to building this type of functionality and need a bit more help.  this is the code i am loading.  <body onLoad="loadlyteframe('surfSplash');">  can you place it in your code above?  thank you very much!
Avatar of cofcmgr

ASKER

in fact, maybe not worry about adding my onload code in place but provide an example where you are calling a function onload.  this will make it easier for me to follow your code and insert mine.  
Avatar of cofcmgr

ASKER

i will try to write out what i am asking more clearly...

if the cookie exists then dont perform the onload, if the cookie does not exist perform the onload function.  

does that make it easier to follow?
ASKER CERTIFIED SOLUTION
Avatar of dakyd
dakyd

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of cofcmgr

ASKER

i know you are correct in your response but I am still to new at javascript to insert the functionality you are prescribing.  I should have sent this earlier.  This is the actual function and onload code.  I was going down the road of adding an ifelse that checks for the cookie to the function below.  Can you assist me further please??

<script language="javascript">
var timeoutID = null;

/* Must pass in the "anchors" ID so that Lytebox can call the correct "onclick" handler... */
function loadlyteframe(id) {
    if (typeof myLytebox != 'undefined') {
        // if the myLytebox object exists, start it up!
        myLytebox.start(document.getElementById(id));
    } else {
        // wait 1/10th of a second and attempt loading again...
        if (timeoutID) { clearTimeout(timeoutID); }
        timeoutID = setTimeout('loadlyteframe("'+id+'")', 100);
    }
}
</script>
<!-- /splash lytebox files -->

</head>

<body onLoad="loadlyteframe('surfSplash');">
Give this a shot:

<script type="text/javascript">
var timeoutID = null;

/* Must pass in the "anchors" ID so that Lytebox can call the correct "onclick" handler... */
function loadlyteframe(id)
{
  if (document.cookie.indexOf("splash") == -1)
  {
    if (typeof myLytebox != 'undefined')
    {
      // if the myLytebox object exists, start it up!
      myLytebox.start(document.getElementById(id));
      document.cookie += "splash=true";
    }
    else
    {
      // wait 1/10th of a second and attempt loading again...
      if (timeoutID)
        clearTimeout(timeoutID);
      timeoutID = setTimeout('loadlyteframe("'+id+'")', 100);
    }
  }
}
</script>
<!-- /splash lytebox files -->

</head>

<body onLoad="loadlyteframe('surfSplash');">

The cookie piece of it only gets set once the object is used.  Until then, the function keeps being called.  Hope that helps.
Avatar of cofcmgr

ASKER

a million thanks for your work!  it worked beautifully!
Avatar of cofcmgr

ASKER

a quick question!  where is the cookie that we are setting stored??
The cookie is stored somewhere on the client.  Where it's actually stored depends on the browser you're using, though.