CODEWITHSUNDEEP
javascriptjquery
hersu gjima
hersu gjima

Reputation: 33

hide div when refresh page

I have this <div> where I have an "X" which closes the <div> but shows up again upon refreshing the page. I want the <div> to stay hidden even after refreshing the page. How can I do that?

I want to hide them also when page is refreshed.

<div class="cookie">
    <a href="#" class="cookie-close">
    <span class="icon" onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>X</span>
    </a>
</div>

Upvotes: 2

Views: 8081

Answers (6)

Snowmonkey
Snowmonkey

Reputation: 3761

Making it actually show the localstorage do what you want in here or in jsfiddle is iffy. What happens is, if you click the X, you hide the panel and save a variable on the localStorage. Then, when the page loads, you check for the presence of that variable. I've also added a "show" button so you can play with toggling the pane. I've set up a test page here https://snowmonkey.000webhostapp.com/cookieThing.html

$(document).ready(function(){
console.log("I've got "+localStorage.getItem("panelHidden"));
if(localStorage.getItem("panelHidden") == "true" ){
  $(".panel").hide();
} else {
  $(".panel-show-control").hide();
};

$(".panel-close-control").on("click", function(){
  // First, close the panel..
  $(".panel").hide();
  $(".panel-show-control").show();
  // then, set a cookie.
  localStorage.setItem("panelHidden", "true");
});

$(".panel-show-control").on("click", function(){
  // hide the button...
  $(this).hide();
  $(".panel").show();
  
  // then, unset the cookie!
  localStorage.setItem("panelHidden", "false");
});
  });
.panel-close-control {
  border: 1px solid black;
  background-color: #ccc;
  font-family: Arial, sans-serif;
  font-size: 9px;
  float: right;
}
.panel {
  border: 1px dotted red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
  <span class="icon panel-close-control">X</span>
  <div class="pane-contents">
    <p>A designer can use default text to simulate what text would look like. Humans are creative beings. However, standard default text can do the trick. Your design looks awesome by the way. I hope you enjoyed the fake text. It looks even better with you
      using this text. Using default text is a simple way to create the appearance of content without having to create it. If it is not real text, they will focus on the design. This text will not appear in a consistent order. However, standard default
      text can do the trick.</p>
  </div>
</div>
<button class="panel-show-control">
Show the panel
</button>

Upvotes: 0

Curiousdev
Curiousdev

Reputation: 5788

Add cookie there are some functions related to CREATE ,READ and REMOVE cookie please find this fiddle or below snippet for more information.

I hope it'll help you..

function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            var expires = "; expires=" + date.toUTCString();
        }
        else var expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

   $(function(){
 
      if(readCookie('CodefireOnce') == null)
      {
        $(".cookie").css("display","block");
      }
      $("body").on("click",".icon",function(){
        $(this).closest("div.cookie").remove();
        createCookie('CodefireOnce','true',7);
      });
    });
<div class="cookie" style="display:none;">
    <a href="#" class="cookie-close">
    <span class="icon">X</span>
    </a>
</div>

Upvotes: 0

Elhebert
Elhebert

Reputation: 51

As Jersh and Adrian Bratu said, you could use the localstorage to store the state of your div (hidden or not).

But, I would suggest use a cookie instead.

The cookie allow you to have a expiration date where the localstorage is everlasting. If, for whatever reason, you made changes in your div that you want the user to see eventually, using the localstorage, you'll have to clean it.

Which mean, either adding new data (with a date for example) to your storage.

Using a cookie, when the expiration date expire, the div will display again automatically, and you'll just need to set a new cookie with a new expiration date when it's expire.

The implementation is quite similar :

document.cookie = "hidden=true; expires=Fri, 20 Jan 2017 23:59:59 GMT"

Hope this help you.

Upvotes: 0

Adrian Bratu
Adrian Bratu

Reputation: 508

Consider storing the option into localStorage, when the user clicks on x. 

localStorage.setItem('showDiv', false)

hope this helps.. cheers

please consider the following code:

<body onload="onLoad()">
    <div id="myDiv" class="cookie" style="display: none">
        <a href="#" class="cookie-close">
        <span class="icon" onclick='onClose()'>X</span>
        </a>
    </div>

    <script>
        function onLoad() {
            var showDiv;
            if(localStorage.getItem("showDiv") == null) {
                showDiv = true;
            }
            else {
                showDiv = localStorage.getItem("showDiv")
            }

            if (showDiv) {
                 document.getElementById('myDiv').style.display = 'block';
            }
            else {
                document.getElementById('myDiv').remove();
            }
        }

        function onClose() {
            document.getElementById('myDiv').remove();
            localStorage.setItem("showDiv", false);
        }

    </script>
</body>

Upvotes: 1

Angelo Michel
Angelo Michel

Reputation: 265

you could make a script which looks a bit like this:

<div id="cookie_message" class="cookie" style="display: none;">
    <a href="#" class="cookie-close">
    <span class="icon" onclick="document.getElementById('cookie_message').style.display = 'none'; document.cookie = 'hideCookieMessage=true'; return false;">X</span>
    </a>
</div>
<script>
// checks if the cookie is NOT present, if not, then it shows the cookie message
if (!document.cookie.match(/^(.*;)?hideCookieMessage=[^;]+(.*)?$/)) {
   document.getElementById('cookie_message').style.display = 'block';
}
</script>

It now only shows it when the cookie hideCookieMessage has not been set. Be sure to check in the backend as well for the cookie and don't even send it if the cookie is present.

Upvotes: 0

Josh
Josh

Reputation: 725

If you want the div to be hidden everytime the page loads, just do as @FunkDoc said and add display:none; to your css. If you want it to open only on the first time you load the page, you have to save the details locally:

 // Retrieve
 if(localStorage.getItem("visited") == null){

    document.getElementsByClassName('cookie')[0].style.display = 'none';
 }

 // Store
 localStorage.setItem("visited", "true");

JS Fiddle: https://jsfiddle.net/mb06490w/1/

Upvotes: 0

Related Questions