CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
MrBlackDrag0nfly
MrBlackDrag0nfly

Reputation: 58

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

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!

Upvotes: 1

Views: 1481

Answers (2)

Girish
Girish

Reputation: 12117

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

Upvotes: 0

Ex-iT
Ex-iT

Reputation: 1477

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.

Upvotes: 3

Related Questions