Michael_B Michael_B - 1 month ago 8
Javascript Question

When a user closes a <div>, hide that <div> on all site pages

I've developed a couple of alert boxes that display on all site pages.

screenshot of alert boxes

The user is able to close each box separately:



$(document).ready(function() {
$("#close-alert-box-news").click(function() {
$("#alert-box-news").hide(800);
});
$("#close-alert-box-maintenance").click(function() {
$("#alert-box-maintenance").hide(800);
});
});

.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
<h1>News Alerts</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-news">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>

<article class="alert-box" id="alert-box-maintenance">
<h1>Site Maintenance</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-maintenance">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>





jsFiddle



Now I need to make sure that the box the user closes (could be one, could be both), doesn't re-appear as he/she browses the site, or reloads a page.

I'm thinking I could set a PHP cookie to expire in 24 hours. But most of the related posts on this site recommend a JavaScript cookie. Unfortunately, my efforts to implement a JavaScript solution haven't worked (the boxes re-appear after being closed). I've tried various methods, as outlined here:



What would be a simple method to hide each box, sitewide, for 24 hours?

I'm open to jQuery, plain JavaScript, PHP, cookies, sessions or something else.

Answer

IMO, use localStorage()

Local storage is per origin (per domain and protocol)

  • On click of DIV close, you can get the current time-stamp
  • Add number of hours (24) to that time-stamp
  • Store that value in localStorage as localStorage.setItem('desiredTime', time)
  • Check current time-stamp with that stored time-stamp localStorage.getItem('desiredTime'), based on that show/hide

Jquery

$(document).ready(function(){
        //Get current time
        var currentTime = new Date().getTime();
        //Add hours function
        Date.prototype.addHours = function(h) {    
           this.setTime(this.getTime() + (h*60*60*1000)); 
           return this;   
        }
        //Get time after 24 hours
        var after24 = new Date().addHours(10).getTime();
        //Hide div click
        $('.hide24').click(function(){
            //Hide div
            $(this).hide();
            //Set desired time till you want to hide that div
            localStorage.setItem('desiredTime', after24); 
        });
        //If desired time >= currentTime, based on that HIDE / SHOW
        if(localStorage.getItem('desiredTime') >= currentTime)
        {
            $('.hide24').hide();
        }
        else
        {
            $('.hide24').show();
        }
});

HTML

<div>DIV-1</div>
<div class='hide24'>DIV-2</div>

Things to note

  • You can use $.cookie as well but that's old now.
  • DIV with class hide24 will be hidden only.
  • Make sure that you put this code in general JS which load on every HTTP request of your website.
  • For localStorage, you should have HTML5 browsers.

Web Storage HTML5

Hope this helps.