JQuery using cookies

Question

Hi all, in my js file i want to be able to load a "splash screen" in a new air app im developing. At present when i call the splash screen it opens and closes fine, but its when i make it set a cookie it doesnt run at all. Please help...

    cookieSplash();

function cookieSplash(){
    var cookieSplash = $.cookie('loadSplash');
    if (cookieSplash == "true") {
        splash();
    };
    if (cookieSplash == "false") {
        loadApplication();
    };
}
function splash(){
    $("#viewport").append('<div id="splash"><img id="splash-close" src="/images/splash-logo.png" alt="click to close"></div>');
    $("#splash").click(function() {
        // Act on the event
        $("#splash").fadeOut("slow");
        $("#jettison").fadeIn("fast");
        $.cookie("loadSplash", "false");
    });
}
function loadApplication(){
    $("#jettison").fadeIn("fast");
}

Please help me out

Answer 1

Make sure you've included jquery_cookie.js. If you have, then I suggest using Firefox/Firebug and check the console for javascript errors.

Answer 2

According to demo page for jQuery cookies, you are setting your cookie incorectly. Use this example syntax:

To set:

$.cookie("MySplashCookie", true, { expires: 10 })

To read:

$.cookie("MySplashCookie")

Note:

"true" != true
"false" != false

make sure you are saving correct types too.

Answer 3

That first function should be different. An unset cookie won't result in values like "true" or "false" (which as @rochal noted are strings, not booleans), it'll be null. Also, if your cookie is keeping track of whether or not the splash screen needs to be shown, how will it have any value in it at all at first?

function cookieSplash(){
  var cookieSplash = $.cookie('loadSplash');
  if (cookieSplash)
      splash();
  else
      loadApplication();
}

function splash() {
  $("#viewport").append('<div id="splash"><img id="splash-close" src="/images/splash-logo.png" alt="click to close"></div>');
  $("#splash").click(function() {
      // Act on the event
      $("#splash").fadeOut("slow");
      $("#jettison").fadeIn("fast");
      $.cookie("loadSplash", "done");
  });
}