cookies code help needed (html,css,js)

Question

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

Have tried with document.ready? - learn.jquery.com/using-jquery-core/document-ready — Luís P. A.
– Luís P. A., Commented Oct 13, 2015 at 14:58

SeeSharp · Accepted Answer · 2015-10-13 15:58:20Z

3

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.

edited Oct 13, 2015 at 15:58

answered Oct 13, 2015 at 15:05

SeeSharp

2,80017 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Surreal Dreams Over a year ago

This is probably correct. The code you are using will look for elements with the class .cookie-message as soon as it can - which may be before any .cookie-message elements exist. By adding the document ready block, the code will wait until the document is finished loading and then start working. Good catch on the mismatched class!

Arcsn Over a year ago

I corrected my code as @SeeSharp suggested, but now i cannot see any message... and in a fiddle I can see that the dialogBox is not dissappearing, just hiding... i would like it to dissappear...

SeeSharp Over a year ago

@arcsn Any chance of posting a fiddle? Isn't related to the fact you've already got a cookie set and thus the message isn't showing? You're referencing the JQuery library somewhere in the HTML doc too, right?

Arcsn Over a year ago

i checked my html, and i have a js code for google analytics and also for IE9...should I subscribe to the fiddle site? (I'm new here....)

SeeSharp Over a year ago

Nah, just head to jsfiddle.net and enter your HTML, CSS && JS in their relevant boxes. Press 'Save' along the top and copy and paste the URL back here to share.

|

Sharpy310 · Accepted Answer · 2015-10-13 15:00:37Z

1

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');
          });
    });
});

answered Oct 13, 2015 at 15:00

Sharpy310

11311 bronze badges

Comments

Mattia Nocerino · Accepted Answer · 2015-10-13 16:45:49Z

0

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-->
 <?}?>

answered Oct 13, 2015 at 16:45

Mattia Nocerino

1,5231 gold badge17 silver badges33 bronze badges

10 Comments

Arcsn Over a year ago

Hi I just used your code in my Fiddle... and it's not working... maybe i am doing somthing wrong... (i am completly new to java...)

Mattia Nocerino Over a year ago

You have to change the jquery selector based on your code! So, in your case it should be $(.button).on('click', function(){ this part of code mean: When the element with class 'button' is clicked, perform the following actions. (When you button is clicked, close the disclaimer). Then $('.cookie-message').slideUp(); If you link the jsfiddle i will edit it so you can see it in action!

Arcsn Over a year ago

and if it is possible, I would like to make "dissappear" a message after clicking the "ok" button... now it still stays there just minimise, but stays there (and make my design "ugly"). I'm talking about @SeeSharp version.

Mattia Nocerino Over a year ago

look at this updated fiddle.. pay attention that to make the cookie disclaimer disappear forever once the user has clicked on ok you will need to use cookies! In the main answer there's an example with php but you can use whatever you want like asp or even javascript i guess jsfiddle.net/aLwpmcqg/7

Arcsn Over a year ago

looks perfect. One question: should I create a separate js file for the js script or include it into my html page? (i want a fast load and i guess it's preferable to separate). and should I leave (or remove) a jquery.min.js script in my <head> tag?

|

Collectives™ on Stack Overflow

cookies code help needed (html,css,js)

3 Answers 3

8 Comments

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related