CODEWITHSUNDEEP
jquerycookiesdrop-down-menu
Ashley Briscoe
Ashley Briscoe

Reputation: 737

How to remember if a user has closed a dropdown div

I have a little drop down message I want to add to a site, it uses the following code

<script>$(document).ready(function(){
$('#someid1') .slideDown('slow');}); $(document).ready(function() $('#hide').click(function(){
 $('#someid1').slideUp('slow'); });});</script>


<div id="someid1"><div id="someid2">some gibberish <a id="hide" href="#">HERE</a></div></div>

when the user clicks here to hide I want to remember this choice. Problem is I know I probably need a cookie to do this but don't have a clue about them any help appreciated

thanks in advance Ash

Upvotes: 1

Views: 1055

Answers (2)

Jason Kulatunga
Jason Kulatunga

Reputation: 5894

You don't necessarily need to use a cookie; you can try storing the data using store.js, which encapsulates browser local storage and a few other methods to store data on the client side.

/*
store.js groups your values into something called a store. Multiple stores are separated from each other.
So let's make a new store:
*/

var settings = new Store("settings");

/*
Just choose a name for the new store, and save it in a variable. Always remember to use the "new" keyword! Never leave it off!
Now you can almost normally get, set and remove values:
*/

settings.set("color", "blue");
settings.set("enable_test1", true);
settings.set("number_of_rainbows", 8);

// and

var color = settings.get("color");

// and

settings.remove("color");

...edit with code..

 <div id="cookiemsg"><div id="cookiecenter"><p>This website places a
 Google Analytics cookie on your machine, this helps us collect
 anonymous information so that we can provide a better experiance for
 you. By using this site you imply your consent to this. For more
 information or to find out how you can remove this cookie please visit
 our privacy policy <a href="#">HERE</a> or if you are happy with this
 click <a id="hide" href="#">HERE</a></p></div><!--end of
 cookiecenter--></div><!--end of cookiemsg-->

​

$(function(){
    var store = new Store("com.domain.page.store")
    var acceptedCookie = store.get("acceptedCookie");
    if(typeof acceptedCookie == "undefined"){
     //set a default
       acceptedCookie = false
     }
    if(!acceptedCookie){
        $('#cookiemsg').slideDown('slow');
    }

    $('#hide').click(function(){
         $('#cookiemsg').slideUp('slow');
         store.set("acceptedCookie", true);
   });

});

Upvotes: 2

gearsdigital
gearsdigital

Reputation: 14225

Try this jQuery Plugin: https://github.com/carhartl/jquery-cookie It's a simple, lightweight jQuery plugin for reading, writing and deleting cookies.

You can simply create Cookies

$.cookie('the_cookie', 'the_value');

And read Cookies

$.cookie('the_cookie'); // => 'the_value'

So you ask for it...

if ($.cookie('the_cookie') === 'the_value') {
    $('#someid1').addClass('open');
}

CSS

#someid1 {
    display:none;
}

#someid1.open {
    display:block
}

Example Implemtation

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>

        <!-- Get jQuery Core -->
        <script src="/path/to/jquery.js" type="text/javascript"></script>

        <!-- Get Cookie Plugin -->
        <script src="/path/to/jquery.cookie.js" type="text/javascript"></script>


        <script type="text/javascript">

            // Is DOM ready?
            $(document).ready(function() {

                $('#hide').click(function(e){

                    // Set Cookie named 'notification'to the value 'hide'
                    $.cookie('notification', 'hide'); 

                    // Hide your Div
                    $('#someid1').slideUp('slow');

                    // Disable default behavior
                    e.preventDefault();
                });

                // Hide DIV is Cookie is Set
                if( $.cookie('notification') === 'hide' ){
                    $('#someid1').hide();
                }

            });
        </script>

    </head>
    <body>
        <div id="someid1">

            <div id="someid2">some gibberish</div>
            <a id="hide" href="#">HERE</a>

        </div>
    </body>
</html>

Note: This code is not tested and might not be work. But it gives you a hint to the right direction.

Upvotes: 3

Related Questions