Jord Jord - 4 months ago 31
jQuery Question

Show a loading div once per visit, thereafter, a different loading div

Fairly new to Javascript and web developing in general, just looking for some help with the loading / transition DIVs I have on a site.

I use the jquery below to display an intro on the homepage and the same script on other pages (with a shorter fadeout and different div) to imitate a sort of transition. On the homepage I'd like to just show the intro div once per session or set period, however rather than displaying nothing between, I want to swap it for the other 'transition' div I use on other pages.

I looked at using cookies and session storage but not had any luck getting much to work specifically for this. Any help would be great, thanks!

$(window).load(function () {
setTimeout(function(){
$('#splash').fadeOut('slow', function () {
});
},1200);
});


UPDATE

After using the suggestion from @brad this is what I ended up using and works perfectly for what I was trying to achieve.

HTML

<div id="preloader">

<div id="splash1">
</div>

<div id="splash2">
</div>

</div>


CSS

#splashback {
display: none;
}

#splashback2 {
display: none;
}


JQUERY

$(document).ready(function(){

if (sessionStorage.getItem('splash') !== 'true') {
$( "#splash1" ).show();
setTimeout(function(){
$('#preloader').fadeOut('slow', function () {
});
},2500);
sessionStorage.setItem('splash','true');
}
else {
setTimeout(function(){
$( "#splash2" ).show();
$('#preloader').fadeOut('slow', function () {
});
},500);
}


});

Answer

LocalStorage is the appropriate place for client-side-only variables you need to use. It's also very well supported.

To set a variable in local storage, just set it like so:

localStorage.yourVariable = "some value";

Note that all local storage variables are strings. If you put some non-string value in, it will be converted to string. Because of this, it's very common to read/write JSON with local storage.

localStorage.config = JSON.serialize({
  exampleSetting1: true,
  exampleSetting2: false
});

Then when you want to get the data back...

console.log(JSON.parse(localStorage.config));

Fortunately in your case, type or anything doesn't matter. You just need to set the variable to something.

localStorage.shownSplashScreen = true;

Then, to test whether or not you've shown the splash screen:

!!localStorage.shownSplashScreen;  // true if shown, false if not

Again, the value in localStorage.shownSplashScreen is a string with the value of true, not a boolean. By using !!, we effectively cast to boolean, and detect whether or not that variable has a truthy value (which the string "true" is).

I'm mentioning all this so you can look some of these things up, if you aren't familiar with it. The end solution is quite simple. Untested but try this:

$(window).load(function () {
    setTimeout(function () {
        $('#splash').fadeOut('slow');    
    }, (!!localStorage.shownSplashScreen) ? 0 : 1200); 
    localStorage.shownSplashScreen = true;
});

All we do here is set the splash screen time from 1200 ms if we haven't shown it, and 0 ms if we have (which will execute the function to hide it once this call stack is complete).

Comments