Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 516
  • Last Modified:

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.  
0
cofcmgr
Asked:
cofcmgr
  • 6
  • 4
1 Solution
 
rlbalanCommented:
Checkout  http://www.quirksmode.org/js/cookies.html for detailed example on creating  & reading cookies
0
 
dakydCommented:
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.
0
 
cofcmgrAuthor Commented:
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!
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
cofcmgrAuthor Commented:
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.  
0
 
cofcmgrAuthor Commented:
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?
0
 
dakydCommented:
Sorry, you caught me at the end of my working day, so haven't had a chance to get back to this until now.  As far as your questions go, I'll put the answers below, since they help explain what my ultimate suggestion would be:

>>if the cookie exists then dont perform the onload, if the cookie does not exist perform the onload function.
There's no need to make it this complicated.  Why not call the onload function all the time, but within that function insert an if/else that controls whether the function does anything?  That's pretty much what the example I threw together does.  If that's not possible, you can apply the same idea, but you need a new function that basically acts as a wrapper.

>> ... provide an example where you are calling a function onload
My example *does* have a function that's called onload.  However, the onload is set programmatically, rather than in the <body> tag.  This:
  window.onload = checkSplashPage;

is the same as:
  <body onload="checkSplashPage();">

The only difference is that the top way does it with pure javascript, whereas the second way mixes it in with the HTML.  I prefer the first way (the reasons for that are a bit pedantic, so I'll spare you), but they produce the same result.

So, with all that said, if you're calling the loadlyteframe() function onload, I'm suggesting modifying that function to do something like this:

function loadlyteframe(str)
{
  if (document.cookie.indexOf("splash") == -1)
  {
    // the current contents of your function go here
  }
  else
  {
    // anything you want to happen the subsequent times go here
    // it's possible you don't want anything at all to happen, so
    // you might not need the else case at all
  }
}

Let me know if that doesn't make sense or if you can't modify that function.  Hope that helps.
0
 
cofcmgrAuthor Commented:
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');">
0
 
dakydCommented:
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.
0
 
cofcmgrAuthor Commented:
a million thanks for your work!  it worked beautifully!
0
 
cofcmgrAuthor Commented:
a quick question!  where is the cookie that we are setting stored??
0
 
dakydCommented:
The cookie is stored somewhere on the client.  Where it's actually stored depends on the browser you're using, though.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now