iMAD iMAD - 4 months ago 21
HTML Question

HTML & CSS: Hiding the cookie bar after clicking on "I accept"

I am working on a web site, and I wanted to know how is it possible to hide the cookie notice after clicking on "I accept" or whatever. I don't want to use webkits, I want pure HTML (and CSS if needed), or even PHP.



#cookie-bar.fixed {
position: fixed;
bottom: 5;
left: 0;
z-index: 100;

}

#cookie-bar {
line-height: 24px;
color: #eeeeee;
text-align: center;
padding: 3px 0;
width: 100%;
color: white;
background-color: #444;


}

.cb-enable {
border-radius: 10%;
margin-left: 100px;
color: white;
padding: 5px;
border-radius: 10%;
font-family: serif;
text-decoration: none;
transition: .3s background-color;



}

.cb-enable:hover {
background-color: darkcyan;
}

.cb-policy {
color: white;
text-decoration: underline;
}

.cb-policy:hover {
color: darkcyan;
}

<div id="cookie-bar" class="fixed">
<p>We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="/privacy-policy/#cookies" class="cb-policy">Cookies Policy</a>
<a href="#" class="cb-enable">I Understand</a>
</p>

</div>





Thank you very much.

Answer

This is the piece of code that i use for all my projects. It's pretty easy to understand. All you have to do is to create a cookie with javascript once the user click on "ok" and then you check if the cookie is set. If so, the disclaimer won't show.

<?if (!isset($_COOKIE["disclaimer"])){?>
    <div id="cookie_disclaimer">
        <div>
            <div class="titolo">COOKIE POLICY</div>

            blablabla cookie disclaimer blablabla

            <span id="cookie_stop">Ok</span>
        </div>
    </div>
<?}?>



<script type="text/javascript">
$(function(){
     $('#cookie_stop').click(function(){
        $('#cookie_disclaimer').slideUp();

        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=/";
     });

});
</script>

If you don't want to use javascript/jquery you can just do the same but with a form, but the user will se the page reloading and to me it's not so good to see

Comments