How to keep hidden a div after refreshing the page?

Question

I have the following div called "load". I would like to keep it hidden when you refresh the site. However, this div should be showed every time you land on the page (first time or not first time).

Is it possible? How?

Thanks

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('load').style.visibility = "hidden";
    }, 2500);
  }
}

#load {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2000;
  background-color: #29d4e6;
  top: 0;
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  -o-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
</head>

<body>
  <div class="animated fadeOut" id="load"></div>
  <div> Hello there! </div>
</body>

</html>

Try setting a Cookie ,LocalStorage or can store the first time counter in your database if you are using any login for your webpage. — Bhuwan, Mar 15 '17 at 12:02

Bhuwan · Answer 1 · 2017-03-15T12:35:54.190

Use onbeforeunload events in Browser for detecting the refresh button and localStorage for storing refresh status

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('load').style.visibility = "hidden";

    }, 2500);
<!-- this will hide the #load when you refresh the page --!>

window.onbeforeunload = refresh;

function refresh()
{           
localStorage.refresh=1;
}

if(localStorage.refresh==1)
{
document.getElementById('load').style.visibility = "hidden";
localStorage.refresh=0;
}


}

This will show the div every time you land on the page whether first time or not but wont show if you refresh the page .

This does not solve the **"However, this div should be showed every time you land on the page"** — Dejan.S, Mar 15 '17 at 12:11

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Set a sessionStorage variable. sessionStorage variables are stored only for the browsing session and won't reset if the page is refreshed unless you willingly reset them.

 var i;
 if(state == 'complete') {
     setTimeout(function() {
         document.getElementById('interactive');
         document.getElementById('load').style.visibility = "hidden";
     }, 2500);
     sessionStorage.setItem('i','true');
 }

Then use,

 var s = sessionStorage.getItem('i');

to get the value and check if it's set or true or a specified value. Check the variable before you call the load animation.

Reference:

How to get JS variable to retain value after page refresh?

Global Variable usage on page reload

edited May 23 '17 at 12:32

Community

1
1

answered Mar 15 '17 at 15:05

bowl0stu

352
1
12

Hello @bowl0stu I have tried it, but it doesn't work or maybe I don't how to use it. – Mar 16 '17 at 14:15
My code is not complete; just an example. Look at the links I referenced to learn more about them. – bowl0stu Mar 16 '17 at 17:56

score -1 · Answer 3 · answered Mar 15 '17 at 11:56

-1

You can hide div when page load using javascript. Like

$(function(){
    $("#load").hide();

});

answered Mar 15 '17 at 11:56

Dipen Soni

224
2
8

Your contribution is valid, but it doesn't answer the question. – bowl0stu Mar 15 '17 at 12:12
okay then just write hidden in div like – Dipen Soni Mar 15 '17 at 12:14
That still doesn't answer the original question. The first time you visit the page, `
` needs to show. If you were to refresh the page, `
` needs to be hidden. Your code and comment set the ready state to `hidden` and `display` property to `hidden` instead of a viable solution for displaying `
` once the first time you visit the page.
– bowl0stu Mar 15 '17 at 14:40

score -1 · Answer 4 · answered Mar 15 '17 at 11:57

I can only think of two way to accomplish this. One is to maintain a session variable on the server to know that the page has been hit, and pass a variable the first time to the page to know that it should make the div visible. Or two, using a session cookie to accomplish the same thing. Creating a session cookie and creating a variable to indicate that the users has already visited that page during this session.

How to keep hidden a div after refreshing the page?

4 Answers4