CODEWITHSUNDEEP
jqueryfadeout
HectorOfTroy407
HectorOfTroy407

Reputation: 1897

Getting fadeOut to work once on load

Trying to get an overlaid div to fadeout to reveal my blog only the first time a user accesses the site. Right now it's loading every time I go back to the home page. How can I modify what I have below to make it only load the first time the page is loaded, not every time the home page is accessed? 

 <script>
  var flag=true;
   $(document).ready(function(){
      if(flag){
    setTimeout(function(){ $('#fadeout_image_div').fadeOut('slow') }, 2000);
    flag=false};
  //the else statement I'm not so sure about, I was trying to hide the div if the flag was set
  else
    $('#fadeout_image_div').css('display', 'none');
  });

Logically I thought this would work but it doesn't appear to be doing so. I don't think the flag is being recognized. It still fadesout every time the home page is accessed. Still relatively new to jQuery so any help is much appreciated.

Upvotes: 0

Views: 74

Answers (3)

Giannis Grivas
Giannis Grivas

Reputation: 3412

Try to use sessionStorage or localStorage at the document ready to check whether visited or not before.

like:

if (localStorage.popUpShown != 'true') {
    localStorage.popUpShown = 'true';
    alert("ok");
    setTimeout(function () {
        $('#fadeout_image_div').fadeOut('slow');
    }, 2000);
} else {
    alert('already shown the popup');
}

Upvotes: 1

Nowres Rafed
Nowres Rafed

Reputation: 1138

Use cookies to store your flag How do I set/unset cookie with jQuery? 1- get your flag: $.cookie('myFlag') 2- if flag is undefined activate fadeout effect then set your flag $.cookie('myFlag', true)

Upvotes: 1

Martin Denk
Martin Denk

Reputation: 554

JavaScript variables are reset on every page load. The only option I can think of is storing the value in a cookie: http://plugins.jquery.com/cookie/

Upvotes: 2

Related Questions