jquery slideup and bootstrap's alert(shows one time only)

Question

So I have created a message on my site that say's my site is using cookies:

Cookie Popup

Created with the following code:

<div id="cookies" class="container text-center">
    <h3>This site is using cookies.  
        <a id="hide" class="btn btn-info">Ok! No problem.</a>       
    </h3>
</div>

So I thought, when someone presses the button the message slides up using jquery. With this code:

<script>
$("#hide").click(function() {
    $("#cookies").slideUp(1000);
})

$("#show").click(function() {
    $("#cookies").slideDown(1000);
})
</script>

But for some reason there is nothing happening. This is one of my first times with jquery.

Also:

If someone knows it, is it possible to show this message just one time per IP address? And it doesn't shows up after clicking the button?

Thanks for the answer in advance!

IMHO don't add that kind of message.. no one cares. Year 2014 and every site is using cookies.. — Hardy, Mar 01 '14 at 13:16
Try adding a [ready handler](http://api.jquery.com/ready/) around your JS. — Adrift, Mar 01 '14 at 13:18
you've missed the semi-colon on ever event function, have you added the jQuery library? Have you put your script within a document ready function? — bashleigh, Mar 01 '14 at 13:18
Ok, i'm from Finland (EU) and had newer heard of law like that.. — Hardy, Mar 01 '14 at 13:38
@Hardy here is some information about it: http://www.theeucookielaw.com/ — MrBlackDrag0nfly, Mar 01 '14 at 13:51

score 3 · Accepted Answer · edited May 23 '17 at 12:01

You are trying to slideUp an element (#cookies) that doesn't appear to be in your HTML snippet you posted. Are you sure it's there?

If you want to show the message only once per IP you can store it in a cookie as explained here.

You can get an IP through JavaScript like this.

Update

"Can it be because my head and navigation(where the message is part from) are both separate php files that I include into index.php?" - No, the files get 'merged' together before they are served to the client / browser.

You are trying to execute your script before jQuery is loaded. If you check your console you see this error Uncaught ReferenceError: $ is not defined. jQuery defines $ as a shortcut to jQuery and because it isn't loaded yet it's still not defined and causes your script to error.

Put your script below the jQuery include at the bottom of the page. It's always good practice to put all the scripts at the bottom of your page (like the Google Analytics snippet) just before you close the body-tag. This makes sure that your HTML and CSS renders and doesn't get blocked by any JavaScript.

You might wrap your script inside a ready handler, to make sure it doesn't get execute before the whole page is ready, like this:

$(document).ready(function() {
    $("#hide").click(function() {
        $("#cookies").slideUp(1000);
    }); // don't forget the semicolon here

    $("#show").click(function() {
        $("#cookies").slideDown(1000);
    }); // don't forget the semicolon here
});

Also don't forget to open the body after you close the head and close the body and html tags at the bottom of your page.

You might also want to take a look at the HTML5 Boilerplate for more best practices.

Can it be because my head and navigation(where the message is part from) are both separate php files that I include into index.php? (here is the site if you want to take a look: http://mrblackdragonfly.com) — MrBlackDrag0nfly, Mar 01 '14 at 19:22
Updated my answer with what I've seen on your site. If this works for you please accept my answer :) — Ex-iT, Mar 02 '14 at 12:40
Thanks! It was because my code was in my head! Your code worked perfectly! Thank you so much! — MrBlackDrag0nfly, Mar 11 '14 at 14:39

score 0 · Answer 2 · edited Mar 02 '14 at 15:50

You can manage by jQuery cookie plugin, when you load page on browser, check cookie information if the box already loaded there if yes then simply hide by hide() function.

Cookie jQuery plugin:

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" type="text/javascript"></script>

JavaScript

$(function() {
    var status = $.cookie('the_cookie');
    if (status == "hide") {
        $('#cookies').hide();
        console.log('the box hided on the IP');
    } else {

    }

    $('#hide').click(function() {
        $('#cookies').slideUp(1000, function() {
            $.cookie('the_cookie', 'hide', { expires: 30, path: '/' });
        });
    });
});

JSFiddle demo

The Fiddle is blocked in Chrome, cross-origin problem. – t.mikael.d May 16 '14 at 12:52 — t.mikael.d, May 16 '14 at 12:52

jquery slideup and bootstrap's alert(shows one time only)

2 Answers2