javascript - How to keep div hidden after page refresh? - Stack Overflow

admin管理员组

文章数量:1415420

I've a simple show and hide div.

The div automatically loads on loading the page and then you can close the div by clicking close.

Once you refresh the page the div shows up again, how do I code it to once closed, to not open again for say a month.

Thanks in advance.

Ben

This is the code I have so far;

 <script src="//ajax.googleapis/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src=".cookie.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').show();
 // shows the slickbox on clicking the noted link  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
 // hides the slickbox on clicking the noted link  
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });

 // toggles the slickbox on clicking the noted link  
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });
});

</script>
<script type="text/javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    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;
}


//user closes your box
createCookie('mybox',1,30);

//check if the box should be hidden
if (readCookie('mybox')) 
    $('#slickbox').hide();
</script>

I've a simple show and hide div.

The div automatically loads on loading the page and then you can close the div by clicking close.

Once you refresh the page the div shows up again, how do I code it to once closed, to not open again for say a month.

Thanks in advance.

Ben

This is the code I have so far;

 <script src="//ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://innosite.s3.amazonaws./cookie/jquery.cookie.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').show();
 // shows the slickbox on clicking the noted link  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
 // hides the slickbox on clicking the noted link  
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });

 // toggles the slickbox on clicking the noted link  
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });
});

</script>
<script type="text/javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    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;
}


//user closes your box
createCookie('mybox',1,30);

//check if the box should be hidden
if (readCookie('mybox')) 
    $('#slickbox').hide();
</script>

• javascript
• jquery
• wordpress

Share Improve this question Follow asked Aug 21, 2012 at 20:49 Ben GoodmanBen Goodman 5522 silver badges88 bronze badges 2

• 1 I'd google something along the lines of "javascript+cookie+splash screen" – Charlie Commented Aug 21, 2012 at 20:53
• 1 I'd just use localStorage instead of cookies. The API is much easier and simpler and effective. There are back-pat jQuery plugins that fallback from localStorage to cookies if the user is using an old version of IE. – Fabrício Matté Commented Aug 21, 2012 at 20:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Here is a reference. With that tiny code its, probably easier just to start over.

http://www.w3schools./js/js_cookies.asp

There was a ment "use a cookie" and then it disappeared, even though it fits the bill perfectly: you can set and read it on the client side. Just ignore it on the server. There's even a jQuery plugin.

You can always just use local storage :

$(function() {

    if (localStorage) { //if local storage
        if (!localStorage.getItem('visited')) { // if not site is visited before
            $('#slickbox').show(); //show element
        }
    } else { //if not local storage use cookies or just show element in old browsers
        $('#slickbox').show();
    }

    // shows the slickbox on clicking the noted link  
    $('#slick-show').click(function() {
        $('#slickbox').show('slow');
        return false;
    });
    // hides the slickbox on clicking the noted link  
    $('#slick-hide').click(function() {
        $('#slickbox').hide('fast');
        localStorage.setItem('visited', true); //set flag, site now visited and element hidden
        return false;
    });

    // toggles the slickbox on clicking the noted link  
    $('#slick-toggle').click(function() {
        $('#slickbox').toggle(400);
        return false;
    });
});​

本文标签： javascriptHow to keep div hidden after page refreshStack Overflow