Michael_B Michael_B - 1 month ago 7
jQuery Question

When user closes div, hide that div on all site pages

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

enter image description here

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 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 JS 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.