CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Arcsn
Arcsn

Reputation: 231

cookies code help needed (html,css,js)

I'm getting crazy over this script. It's not working. Can anyone give me a tip how to fix it?

My code: inside the tag in my html:

HTML Code:

<div class="cookie-message">
    <p class="cookie-content">This website uses cookies. By Browsing this website you acconsent to the use of cookies. </p>
    <p class="cookie-content"><button class="button">OK</button> &nbsp; <a href="http://here-goes-my-cookie-page.com">Read more about cookies</a></p>   
</div>

My CSS file (it's more for styling): Code:

.cookie-message {
      width: 100%;
      background: #333;
      color: #ddd;
      padding: 1em 1em .5em;
      position: fixed;
      left: -5px;
      bottom: 2em;
      text-align: left;
      z-index: 1;
      }

And my javascript is following: Code:

<!--Start Cookie Script--> 
<script>
$('.cookie-header').click(function() {
        $('.cookie-content').slideToggle('fast');
          $('.cookie-content button').click(function() {
                $('.cookie-content').slideUp('fast');
          });
    });
    </script>
     <!--End Cookie Script-->

in fact I'm completely new to JavaScript so I copied it and inserted it before the </body> tag and obviously it is not working...

Can someone help me? I need the message to close when pressing the "ok" button...

Upvotes: 1

Views: 1014

Answers (3)

Mattia Nocerino
Mattia Nocerino

Reputation: 1513

One more important thing about your code is that you're not setting a cookie variable and the user will have to select ok everytime he connects to your website.

This is the piece of code that i use for all my projects

$('#cookie_stop').on('click', function(){//#cookie stop is the Id of the button that closes the disclaimer
    $('#cookie_disclaimer').slideUp(); //#cookie_disclaimer is the Id of the cookie disclaimer container

   //here i set the cookie variable "disclaimer" to true so i can check if the user 
       var nDays = 999; 
       var cookieName = "disclaimer";
       var cookieValue = "true";

       var today = new Date();
       var expire = new Date();
       expire.setTime(today.getTime() + 3600000*24*nDays);
       document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString()+";path=/";
  //done with the cookie
 });

So, when in the HTML where i write the cookie disclaimer part, there's something like this (Php example)

 <?if isset($_COOKIE['disclaimer']){?>
    <!--cookie disclaimer part-->
 <?}?>

Upvotes: 0

SeeSharp
SeeSharp

Reputation: 2800

You have a mismatch on the class names in the HTML and JQuery selectors.

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- Stuff -->
    $(document).ready(function(){
        $('.cookie-message').click(function() {
            $('.cookie-content').slideToggle('fast');
              $('.cookie-content button').click(function() {
                    $('.cookie-content').slideUp('fast');
              });
        });
    });
</body>

I believe this is what you're looking for JSFiddle example.

Upvotes: 3

Sharpy310
Sharpy310

Reputation: 113

You need to wrap the jQuery function with document ready:

$(document).ready(function(){
    $('.cookie-header').click(function() {
        $('.cookie-content').slideToggle('fast');
          $('.cookie-content button').click(function() {
                $('.cookie-content').slideUp('fast');
          });
    });
});

Upvotes: 1

Related Questions