Getting fadeOut to work once on load

Question

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.

can you provide jsfiddle for this – Rahul Dess Sep 29 '14 at 20:47 — Rahul Dess, Sep 29 '14 at 20:47

score 2 · Answer 1 · answered Sep 29 '14 at 20:46

2

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/

answered Sep 29 '14 at 20:46

Martin Denk

534
2
11

I second that, or alternatively if you using a server side scripting lanaguage like php with a database you could store the value in a database and use ajax to set it on first page load and then in your server side script you cna just output the html for the fade if you need it. – Alistair Laing Sep 29 '14 at 20:53

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

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)

edited May 23 '17 at 12:21

Community

1
1

answered Sep 29 '14 at 20:47

Nowres Rafed

938
8
13

score 1 · Accepted Answer · answered Sep 29 '14 at 20:54

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');
}

Getting fadeOut to work once on load

3 Answers3