CODEWITHSUNDEEP
jquerycookies
user1765661
user1765661

Reputation: 595

Don't show div anymore after user closed it

I have a simple floating div on the bottom right corner of my website

How can I check if the user already clicked to close it and in a new page reload don't show that floating div again to him since he already shown that he is not interested in that message. Is this possible at all? maybe with cookies or local storage?

My simple code:

jQuery(window).load(function() {
    var jsBox = jQuery('<div class="floatBox">Nice float box </div>').hide().fadeIn(1000);
    //more code like closing btn...
    jQuery('body').append(jsBox);
});

jQuery("span.closeBtn").click(function() {
    jQuery('div.floatBox').fadeOut(200);
});

Upvotes: 2

Views: 1883

Answers (3)

Aaron
Aaron

Reputation: 3245

For web storage, you should use localStorage.foo

This is a very simple Example of how web storage works.

$('.box').on('click', function() {   
   if(localStorage.blue !== '1') {
    $(this).addClass('blue');
       alert("this hasn't been clicked before");
       localStorage.blue='1';
    }  
});

Upvotes: 1

cpreid
cpreid

Reputation: 621

Try something like this:

//dom ready
jQuery(window).load(function() {

    if(!localStorage.shown) {
        var jsBox = jQuery('<div class="floatBox">Nice float box </div>').hide().fadeIn(1000);
        //more code like closing btn...
        jQuery('body').append(jsBox);
    }

    jQuery("span.closeBtn").click(function() {
        jQuery('div.floatBox').fadeOut(200);
        localStorage.shown = true;
    });

});

Upvotes: 2

Enders
Enders

Reputation: 708

A server's side setting would be better than a cookie or localstorage, obviously but for a quick&dirty solution, both of those options are OK...

Using cookies, for instance: jquery-cookie is very simple to use (you can deal with cookies directly, but as usual, some smart people already covered the main browser differences...)

jQuery(window).load(function() {
    if(!$.cookie('hideFloatBox', Boolean)){
        var jsBox = jQuery('<div class="floatBox">Nice float box </div>').hide().fadeIn(1000);
        //more code like closing btn...
        jQuery('body').append(jsBox);
    }
});

jQuery("span.closeBtn").click(function() {
    jQuery('div.floatBox').fadeOut(200);
    $.cookie('hideFloatBox', true);
});

Upvotes: 1

Related Questions