Menu

website comply with the new EU Cookie Law

Updated: June 18, 2012

Ali Taheri

Here’s how to tell website users your site uses cookies like Google Analytics: 

  1. Add reference to jquery script in the head section of HTML
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  2. Download jquery cookie plugin from 
    https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
    or alternatively download it from here
  3. Add a reference to jQuery cookie that you downloaded from Step 2 as below:
     <script type="text/javascript" src="/scripts/jquery.cookie.js"></script>
  4. Download close.png from here and place it in the images folder in the root folder of your website.
  5. Add the following css to your page:
    <style>
    .cookiesToolbar {  
            background: none repeat scroll 0 0 #E3E3E3;
          border-top:1px solid #C6C6C6;
            margin-bottom: 10px;
        }
    
        .cookiesToolbarContent {
            padding: 7px 10px;
            float: left;
        }
    
        .cookiesToolbarContent span {
            color: #333;
        }
    
        .cookiesToolbarContent a {
            text-decoration: underline;
            color: #333;
        }
    
        .cookiesToolbarContent a:hover {
            text-decoration: none;
            color: #333;
        }
    
        .cookiesToolbar .collapseTop {
          background: url("/images/close.png") no-repeat scroll left top transparent;
            cursor: pointer;
            display: block;
            height: 32px;
            overflow: hidden;
            text-indent: 100%;
            white-space: nowrap;
            width: 32px;
            float: right;
        }
    </style>
    
     
  6. Add the following HTML to your page
    <div id="cookiesToolbar" class="cookiesToolbar" style="display: none; ">
          <span class="cookiesToolbarContent">
            This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies. Read our <a href="/Disclaimer" title="Read our privacy policy">privacy policy</a>
          </span>
          <span class="collapseTop">Hide</span>
          <div style="clear:both;"></div>
        </div>
    
     
  7. Add the following script into your page:
    $(document).ready(function() {
        // COOKIES TOOLBAR:
        // When the collapse button is clicked:
        $('.collapseTop').click(function() {
            $('#cookiesToolbar').css("display", "none");
            $.cookie('cookiesToolbar', 'collapsed', {
                expires: 90
            });
    
        });
        // COOKIES
        // Cookies Toolbar state 
        var cookiesToolbar = $.cookie('cookiesToolbar');
        // Set the user's selection for the Cookies toolbar
        if (cookiesToolbar != 'collapsed') {
            $('#cookiesToolbar').css("display", "block");
        }
    });​
    
     

Tags

jQuery
comments powered by Disqus

© 2017 - Ali Sheikh Taheri