first of all, I know that a similar question has been answered before but I really don't get it, I am a nub at jquery right now and I am really not sure how to implement this on my code or get how it works. If someone could not only give me the solution but also explain what it does and how that would be fantastic.

So here is my HTML

<div id="cookieConsent">
                    This website is using cookies. <a href="#" target="_blank">More info</a>.<a class="cookieConsentOK">That's Fine</a>
</div>

Obviously I have my script file linked and the jquery CDN aswell so no need to show that, now here is my css for it.

/*Cookie Consent Begin*/
#cookieConsent {
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: #ccc;
    line-height: 26px;
    padding: 8px 0 8px 30px;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 9999;
    text-align: center;
}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}
#closeCookieConsent {
    display: inline-block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: -15px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #FFF;
}
#cookieConsent a.cookieConsentOK {
    background-color: #4B8EE7;
    color: white;
    display: inline-block;
    border-radius: 5px;
    padding: 0 20px;
    cursor: pointer;
    margin: 0 60px 0 10px;
    transition: background-color 650ms;
}
#cookieConsent a.cookieConsentOK:hover {
    background-color: #3e75bd;
}
/*Cookie Consent End*/

And finally my working but annoying jquery js file

$(document).ready(function(){   
    setTimeout(function () {
        $("#cookieConsent").fadeIn(700);
     }, 1000);
    $(".cookieConsentOK").click(function() {
        $("#cookieConsent").fadeOut(700);
    }); 
}); 

If someone could help me with making the pop up only show once per IP or user session(and I mean like till they close their browser pletely, trying to focus on mobile as well) and not only provide me with a solution but also explain it, I WOULD LOVE YOU!

first of all, I know that a similar question has been answered before but I really don't get it, I am a nub at jquery right now and I am really not sure how to implement this on my code or get how it works. If someone could not only give me the solution but also explain what it does and how that would be fantastic.

So here is my HTML

<div id="cookieConsent">
                    This website is using cookies. <a href="#" target="_blank">More info</a>.<a class="cookieConsentOK">That's Fine</a>
</div>

Obviously I have my script file linked and the jquery CDN aswell so no need to show that, now here is my css for it.

/*Cookie Consent Begin*/
#cookieConsent {
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: #ccc;
    line-height: 26px;
    padding: 8px 0 8px 30px;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 9999;
    text-align: center;
}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}
#closeCookieConsent {
    display: inline-block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: -15px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #FFF;
}
#cookieConsent a.cookieConsentOK {
    background-color: #4B8EE7;
    color: white;
    display: inline-block;
    border-radius: 5px;
    padding: 0 20px;
    cursor: pointer;
    margin: 0 60px 0 10px;
    transition: background-color 650ms;
}
#cookieConsent a.cookieConsentOK:hover {
    background-color: #3e75bd;
}
/*Cookie Consent End*/

And finally my working but annoying jquery js file

$(document).ready(function(){   
    setTimeout(function () {
        $("#cookieConsent").fadeIn(700);
     }, 1000);
    $(".cookieConsentOK").click(function() {
        $("#cookieConsent").fadeOut(700);
    }); 
}); 

If someone could help me with making the pop up only show once per IP or user session(and I mean like till they close their browser pletely, trying to focus on mobile as well) and not only provide me with a solution but also explain it, I WOULD LOVE YOU!

• javascript
• jquery
• html
• css

• cookies or localstorage – WilomGfx Commented Nov 28, 2019 at 18:00
• @WilomGfx what do you mean I don't understand, like I said I am a nub so please could you explain the difference between them, sorry – KrapnixTheFootballer Commented Nov 28, 2019 at 18:02
• 1 For a cookie notice to work you'll need a way to make the browser remember, like a small note or message. This can be achieved with either cookies (message for the server) or localStorage (message for your browser). With either API's you can make your browser remember if the cookie message has been accepted, or declined if you want it. Look into how these API's work and try it out. MDN always has great documentation. – Emiel Zuurbier Commented Nov 28, 2019 at 18:11

3 Answers 3

As suggested in a ment, in the response to "cookieConsentOk" you can store the information that they OKed the cookie as a cookie or as localStorage.

With localStorage:

localStorage.setItem('cookies_enabled', '1'); // Use cookies

or if disabled

localStorage.setItem('cookies_enabled', '0'); // No cookies

You can check this value by getting

if (localStorage.getItem('cookies_enabled') === '1') {
    // save cookies for session
}

You can display the banner if:

if (localStorage.getItem('cookies_enabled') === null) {
    // display banner
}

If you indeed need to display a banner per ip (as stated in your question title) then I'm afraid the only 100% plying solution would involve at least some sort of backend, basically to detect ip address reliably.

However I believe you simply need a regular cookie banner, so a solution with localStorage should definitely suffice.

If you are interested you may also experiment with fingerprinting instead of cookies. Again, some backend is needed, but depending on your application you may not need that annoying banner at all while still having user tracking enabled.

You can do it directly in your project by using the answer above, but you can also use Google Tag Manager instead.

I have build a version of a cookie banner that will show for new visitors and if they choose to allow cookies, it will hide by use of 1st part cookie, and if they decline it will do the same. Then depending on the answer the visitor give it will insert scripts and allow 3rd part cookies.

It is simply done by first loading GTM which will load the cookie banner if a cookie hasn't been set. If they accept we will place a cookie that will hide the banner and accept scripts (then GTM add the scripts and such that will allow 3rd part cookies) and if they decline we will place a 1st part cookie that will keep GTM from loading scripts and 3rd part cookies. The cookie banner will first show again when the cookie runs out or if the user interact with the button that reopens the banner.

To see exactly how I did, you are wele to read this article I made: GDPR pliant Cookie Banner