Techs11 | dognmonkey.com

macOS, Windows OS, Apple Software, iOS, WordPress, Internet, IoT, Net Working, Electronics, iPhone, Android, Hackintosh
cookie warning float right
CSS Plugins scripts WordPress

How To Implement EU Cookies Warning

Due to these EU cookies laws, all the website must display a cookie warning for reader to continue or leave.  After so much time to search for the best solution since we display Ad-sense and Amazon ads, we need to comply and finally we found a cookie consent website that shows us how to do it. It’s quite simple.

While we’re searching, we found a way to display the text box with a close button to turn it off.

cookie warning float right text box with close button

We need the scripts

$jC(document).ready(function(c) {
$jC('.alert-close').on('click', function(c){
$jC(this).parent().fadeOut('slow', function(c){
});
});
});

no-conflict and set in the footer.php

<script type="text/javascript">
var $jC=jQuery.noConflict();
$jC(document).ready(function(){
});
</script>
<script src="<?php bloginfo('template_url'); ?>/ijs/cookie.js" type="text/javascript"></script>

The textbox with close button

<div id="cookie"> <p style="text-align=center";><em> Dognmonkey uses <a href="//www.dognmonkey.com/techs/privacy-policy" target="_blank">cookies</a> to give you the best experience. Please continue if you're OK with this.<div class="alert-close">×</div></em></p></div>

CSS for the text box

#cookie {position:fixed;font-size:.6em; background:url(../images/info_icon.png) 10px 11px #0079a9;background:url(../images/info_icon.png) 10px 11px,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#009ddc),color-stop(100%,#0079a9));background:url(../images/info_icon.png) 10px 11px,-moz-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,-ms-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,-o-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,linear-gradient(top,#009ddc,#0079a9);background-repeat:no-repeat;width:100%;color:#fff;height:auto;text-align:center;padding: 2px;word-wrap:break-word;border: 2px solid #fff;bottom:80px;z-index:1000 }

.alert-close{background:rgba(255,255,255,.1);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);color:#FFF;cursor:pointer;font-size:24px;font-weight:600;height:24px;line-height:20px;position:absolute;right:11px;top:9px;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out;width:24px}

Paid Links

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.