New design: better compatibility, more readable, faster

css/tarteaucitron.css

@@ -2,13 +2,6 @@
  * Responsive layout for the control panel
  */
 @media screen and (max-width:479px) {
-    #tarteaucitron #tarteaucitronInfo {
-        background-image: none;
-        font-size: 16px !important;
-        padding-right: 0;
-        text-align: center;
-    }
-
     #tarteaucitron .tarteaucitronLine .tarteaucitronName {
         width: 90% !important;
     }
@@ -33,6 +26,14 @@
         width: 100% !important;
     }
     
+    #tarteaucitron .tarteaucitronBorder {
+        border: 0 !important;
+    }
+    
+    #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList {
+        border: 0 !important;
+    }
+    
     #tarteaucitron #tarteaucitronServices .tarteaucitronTitle {
         text-align: left !important;
     }
@@ -111,20 +112,25 @@
 }
 
 #tarteaucitron {
-    background: #fff;
-    box-shadow: 0 0 15px #4a4a4a;
     display: none;
+    max-height: 80%;
     left: 50%;
     margin: 0 auto 0 -430px;
-    max-height: 80%;
-    overflow: auto;
     padding: 0;
     position: fixed;
-    top: 10%;
+    top: 6%;
     width: 860px;
     z-index: 2147483647;
 }
 
+#tarteaucitron .tarteaucitronBorder {
+    background: #fff;
+    border: 4px solid #333;
+    border-top: 0;
+    height: auto;
+    overflow: auto;
+}
+
 #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronClosePanelCookie,
 #tarteaucitron #tarteaucitronClosePanel {
     background: #333333;
@@ -140,16 +146,6 @@
     width: 70px;
 }
 
-#tarteaucitron #tarteaucitronInfo {
-    background: rgba(51, 51, 51, 0.1);
-    border-bottom: 4px solid #fff;
-    clear: both;
-    color: #333;
-    font-size: 24px;
-    padding: 20px 20px 18px 20px;
-    text-align: center;
-}
-
 #tarteaucitron #tarteaucitronDisclaimer {
     color: #555;
     font-size: 12px;
@@ -157,52 +153,100 @@
     width: 80%;
 }
 
-#tarteaucitron #tarteaucitronServices {
-    background: #fff;
-    border-bottom: 4px solid #fff;
-    min-height: 250px;
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronHidden,
+#tarteaucitron #tarteaucitronServices .tarteaucitronHidden {
+    background: rgba(51, 51, 51, 0.07);
 }
 
 #tarteaucitron #tarteaucitronServices .tarteaucitronHidden {
     display: none;
+    position: relative;
 }
 
-#tarteaucitron #tarteaucitronServices .tarteaucitronTitle {
-    background: rgba(51, 51, 51, 0.2);
-    color: #333;
-    font-size: 20px;
-    padding: 18px 22px;
-    text-align: center;
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle,
+#tarteaucitron #tarteaucitronServices .tarteaucitronTitle,
+#tarteaucitron #tarteaucitronInfo,
+#tarteaucitron #tarteaucitronServices .tarteaucitronDetails {
+    background: #333;
+    color: #fff;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    margin: 20px 0px 0px;
+    padding: 5px 20px;
+    text-align: left;
+    width: auto;
 }
 
-#tarteaucitron #tarteaucitronServices .tarteaucitronTitle .tarteaucitronDetails {
-    color: #555;
+#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName a,
+#tarteaucitron #tarteaucitronServices .tarteaucitronTitle a {
+    color: #fff;
+    font-weight: 500;
+}
+
+#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName a:hover,
+#tarteaucitron #tarteaucitronServices .tarteaucitronTitle a:hover {
+    text-decoration: none !important;
+}
+
+#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName a {
+    font-size: 22px;
+}
+
+#tarteaucitron #tarteaucitronServices .tarteaucitronTitle a {
+    font-size: 14px;
+}
+
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle {
+    padding: 5px 10px;
+}
+
+#tarteaucitron #tarteaucitronInfo,
+#tarteaucitron #tarteaucitronServices .tarteaucitronDetails {
+    color: #fff;
+    display: none;
     font-size: 12px;
+    font-weight: 500;
+    margin-top: 0;
+    max-width: 270px;
+    padding: 20px;
+    position: absolute;
+    z-index: 2147483647;
+}
+
+#tarteaucitron #tarteaucitronInfo a {
+    color: #fff;
+    text-decoration: underline;
 }
 
 #tarteaucitron #tarteaucitronServices .tarteaucitronLine:hover {
-    background: #f5f5f5;
+    background: rgba(51, 51, 51, 0.2);
 }
 
 #tarteaucitron #tarteaucitronServices .tarteaucitronLine {
-    background: #fafafa;
-    border-left: 5px solid #f5f5f5;
-    margin: 1px 0;
+    background: rgba(51, 51, 51, 0.1);
+    border-left: 5px solid transparent;
+    margin: 0;
     overflow: hidden;
     padding: 15px 5px;
 }
 
 #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine {
-    background: #444;
-    border: 0;
-    margin-bottom: 5px;
+    background: #333;
+    border: 3px solid #333;
+    border-left: 9px solid #333;
+    border-top: 5px solid #333;
+    margin-bottom: 0;
+    margin-top: 21px;
+    position: relative;
 }
 
 #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine:hover {
-    background: #444;
+    background: #333;
 }
 
 #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName {
+    margin-left: 15px;
     margin-top: 2px;
 }
 
@@ -217,7 +261,7 @@
 #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName {
     display: inline-block;
     float: left;
-    margin-left: 15px;
+    margin-left: 10px;
     text-align: left;
     width: 50%;
 }
@@ -252,20 +296,6 @@
     font-size: 12px;
 }
 
-#tarteaucitron #tarteaucitronFooter {
-    background: rgba(51, 51, 51, 0.1);
-    border-top: 1px solid #eee;
-    margin: 20px auto 0px;
-    padding: 15px 0 15px;
-    text-align: center;
-}
-
-#tarteaucitron #tarteaucitronFooter a {
-    color: #666;
-    font-style: normal;
-    text-decoration: underline;
-}
-
 /***
  * Big alert
  */
@@ -394,9 +424,8 @@
 
 #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer {
     display: none;
-    max-height: 80%;
+    max-height: 70%;
     max-width: 500px;
-    overflow: auto;
     position: fixed;
     right: 0;
     width: 100%;
@@ -404,8 +433,11 @@
 
 #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList {
     background: #fff;
+    border: 4px solid #333;
     color: #333;
     font-size: 11px;
+    height: auto;
+    overflow: auto;
     text-align: left;
 }
 
@@ -413,20 +445,20 @@
     color: #333;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList #tarteaucitronCookiesTitle {
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle {
     background: #333;
-    margin-top: 20px;
-    padding: 8px;
+    margin-top: 21px;
+    padding: 13px 0 7px 13px;
+    text-align: left;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList #tarteaucitronCookiesTitle b {
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle b {
     color: #fff;
     font-size: 16px;
 }
 
 #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain {
     background: rgba(51, 51, 51, 0.1);
-    border-bottom: 4px solid #fff;
     padding: 7px 5px 10px;
     word-wrap: break-word;
 }
@@ -445,6 +477,10 @@
     width: 50%;
 }
 
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListLeft a b {
+    color: darkred;
+}
+
 #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListRight {
     color: #333;
     display: inline-block;

tarteaucitron.js

@@ -10,7 +10,7 @@ var scripts = document.getElementsByTagName('script'),
     tarteaucitronNoAdBlocker = false;
 
 var tarteaucitron = {
-    "version": 156.2,
+    "version": 201,
     "cdn": cdn,
     "user": {},
     "lang": {},
@@ -42,6 +42,13 @@ var tarteaucitron = {
                         tarteaucitron.userInterface.openPanel();
                     }
                 }, false);
+                window.addEventListener("resize", function () {
+                    if (document.getElementById('tarteaucitron').style.display === 'block') {
+                        tarteaucitron.userInterface.jsSizing('main');
+                    } else if (document.getElementById('tarteaucitronCookiesListContainer').style.display === 'block') {
+                        tarteaucitron.userInterface.jsSizing('cookie');
+                    }
+                }, false);
             } else {
                 window.attachEvent("onload", function () {
                     tarteaucitron.load();
@@ -56,6 +63,13 @@ var tarteaucitron = {
                         tarteaucitron.userInterface.openPanel();
                     }
                 });
+                window.attachEvent("onresize", function () {
+                    if (document.getElementById('tarteaucitron').style.display === 'block') {
+                        tarteaucitron.userInterface.jsSizing('main');
+                    } else if (document.getElementById('tarteaucitronCookiesListContainer').style.display === 'block') {
+                        tarteaucitron.userInterface.jsSizing('cookie');
+                    }
+                });
             }
             
             if (typeof XMLHttpRequest !== 'undefined') {
@@ -145,44 +159,43 @@ var tarteaucitron = {
                 html += '   <div id="tarteaucitronClosePanel" onclick="tarteaucitron.userInterface.closePanel();">';
                 html += '       ' + tarteaucitron.lang.close;
                 html += '   </div>';
-                html += '   <div id="tarteaucitronInfo">';
-                html += '       ' + tarteaucitron.lang.info;
-                html += '       <div id="tarteaucitronDisclaimer">';
-                html += '           ' + tarteaucitron.lang.disclaimer;
-                html += '      </div>';
-                html += '   </div>';
                 html += '   <div id="tarteaucitronServices">';
-                html += '      <div class="tarteaucitronLine tarteaucitronMainLine">';
+                html += '      <div class="tarteaucitronLine tarteaucitronMainLine" id="tarteaucitronMainLineOffset">';
                 html += '         <div class="tarteaucitronName">';
-                html += '            <b>' + tarteaucitron.lang.all + '</b>';
+                html += '            <b><a href="#" onclick="tarteaucitron.userInterface.toggle(\'tarteaucitronInfo\');return false">&#10798;</a> ' + tarteaucitron.lang.all + '</b>';
                 html += '         </div>';
-                html += '         <div class="tarteaucitronAsk">';
+                html += '         <div class="tarteaucitronAsk" id="tarteaucitronScrollbarAdjust">';
                 html += '            <div id="tarteaucitronAllAllowed" class="tarteaucitronAllow" onclick="tarteaucitron.userInterface.respondAll(true);">';
-                html += '               ' + tarteaucitron.lang.allow;
+                html += '               &#10004; ' + tarteaucitron.lang.allow;
                 html += '            </div> ';
                 html += '            <div id="tarteaucitronAllDenied" class="tarteaucitronDeny" onclick="tarteaucitron.userInterface.respondAll(false);">';
-                html += '               ' + tarteaucitron.lang.deny;
+                html += '               &#10007; ' + tarteaucitron.lang.deny;
                 html += '            </div>';
                 html += '         </div>';
                 html += '      </div>';
-                html += '      <div class="clear"></div>';
+                html += '      <div id="tarteaucitronInfo">';
+                html += '         ' + tarteaucitron.lang.disclaimer;
+                if (defaults.removeCredit === false) {
+                    html += '        <br/><br/>';
+                    html += '        <a href="https://opt-out.ferank.eu/" rel="nofollow" target="_blank">' + tarteaucitron.lang.credit + '</a>';
+                }
+                html += '      </div>';
+                html += '      <div class="tarteaucitronBorder" id="tarteaucitronScrollbarParent">';
+                html += '         <div class="clear"></div>';
                 for (i = 0; i < cat.length; i += 1) {
-                    html += '      <div id="tarteaucitronServicesTitle_' + cat[i] + '" class="tarteaucitronHidden">';
-                    html += '          <div class="tarteaucitronTitle">';
-                    html += '             ' + tarteaucitron.lang[cat[i]].title;
-                    html += '             <div class="tarteaucitronDetails">';
-                    html += '                 ' + tarteaucitron.lang[cat[i]].details;
-                    html += '             </div>';
-                    html += '          </div>';
-                    html += '      </div>';
-                    html += '      <div id="tarteaucitronServices_' + cat[i] + '"></div>';
+                    html += '         <div id="tarteaucitronServicesTitle_' + cat[i] + '" class="tarteaucitronHidden">';
+                    html += '            <div class="tarteaucitronTitle">';
+                    html += '               <a href="#" onclick="tarteaucitron.userInterface.toggle(\'tarteaucitronDetails' + cat[i] + '\');return false">&#10798;</a> ' + tarteaucitron.lang[cat[i]].title;
+                    html += '            </div>';
+                    html += '            <div id="tarteaucitronDetails' + cat[i] + '" class="tarteaucitronDetails">';
+                    html += '               ' + tarteaucitron.lang[cat[i]].details;
+                    html += '            </div>';
+                    html += '         </div>';
+                    html += '         <div id="tarteaucitronServices_' + cat[i] + '"></div>';
                 }
+                html += '         <div class="tarteaucitronHidden" id="tarteaucitronScrollbarChild" style="height:20px;display:block"></div>';
+                html += '       </div>';
                 html += '   </div>';
-                if (defaults.removeCredit === false) {
-                    html += '   <div id="tarteaucitronFooter">';
-                    html += '      <a href="https://opt-out.ferank.eu/" rel="nofollow" target="_blank">' + tarteaucitron.lang.credit + '</a>';
-                    html += '   </div>';
-                }
                 html += '</div>';
                 
                 if (defaults.orientation === 'bottom') {
@@ -204,7 +217,7 @@ var tarteaucitron = {
                     html += '       ' + tarteaucitron.lang.alertBig;
                     html += '   </span>';
                     html += '   <span id="tarteaucitronPersonalize" onclick="tarteaucitron.userInterface.respondAll(true);">';
-                    html += '       ' + tarteaucitron.lang.acceptAll;
+                    html += '       &#10004; ' + tarteaucitron.lang.acceptAll;
                     html += '   </span>';
                     html += '   <span id="tarteaucitronCloseAlert" onclick="tarteaucitron.userInterface.openPanel();">';
                     html += '       ' + tarteaucitron.lang.personalize;
@@ -230,6 +243,9 @@ var tarteaucitron = {
                         html += '       <div id="tarteaucitronClosePanelCookie" onclick="tarteaucitron.userInterface.closePanel();">';
                         html += '           ' + tarteaucitron.lang.close;
                         html += '       </div>';
+                        html += '       <div class="tarteaucitronCookiesListMain" id="tarteaucitronCookiesTitle">';
+                        html += '            <b id="tarteaucitronCookiesNumberBis">0 cookie</b>';
+                        html += '       </div>';
                         html += '       <div id="tarteaucitronCookiesList"></div>';
                         html += '    </div>';
                     } else {
@@ -339,10 +355,10 @@ var tarteaucitron = {
             html += '   </div>';
             html += '   <div class="tarteaucitronAsk">';
             html += '       <div id="' + service.key + 'Allowed" class="tarteaucitronAllow" onclick="tarteaucitron.userInterface.respond(this, true);">';
-            html += '           ' + tarteaucitron.lang.allow;
+            html += '           &#10004; ' + tarteaucitron.lang.allow;
             html += '       </div> ';
             html += '       <div id="' + service.key + 'Denied" class="tarteaucitronDeny" onclick="tarteaucitron.userInterface.respond(this, false);">';
-            html += '           ' + tarteaucitron.lang.deny;
+            html += '           &#10007; ' + tarteaucitron.lang.deny;
             html += '       </div>';
             html += '   </div>';
             html += '</div>';
@@ -538,6 +554,7 @@ var tarteaucitron = {
             tarteaucitron.userInterface.css('tarteaucitron', 'display', 'block');
             tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block');
             tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'display', 'none');
+            tarteaucitron.userInterface.jsSizing('main');
         },
         "closePanel": function () {
             "use strict";
@@ -569,10 +586,10 @@ var tarteaucitron = {
                 return;
             }
             
-            tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'bottom', (parseInt(document.getElementById('tarteaucitronAlertSmall').offsetHeight, 10) + 10) + 'px');
             if (div.style.display !== 'block') {
                 tarteaucitron.cookie.number();
                 div.style.display = 'block';
+                tarteaucitron.userInterface.jsSizing('cookie');
                 tarteaucitron.userInterface.css('tarteaucitron', 'display', 'none');
                 tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block');
             } else {
@@ -581,6 +598,20 @@ var tarteaucitron = {
                 tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'none');
             }
         },
+        "toggle": function (id) {
+            "use strict";
+            var div = document.getElementById(id);
+            
+            if (div === null) {
+                return;
+            }
+            
+            if (div.style.display !== 'block') {
+                div.style.display = 'block';
+            } else {
+                div.style.display = 'none';
+            }
+        },
         "order": function (id) {
             "use strict";
             var main = document.getElementById('tarteaucitronServices_' + id),
@@ -601,6 +632,45 @@ var tarteaucitron = {
                     main.appendChild(element);
                 });
             }
+        },
+        "jsSizing": function (type) {
+            "use strict";
+            var start = 8,
+                parent,
+                child,
+                e = window,
+                a = 'inner';
+            
+            if (type === 'main') {
+                // height services list container
+                tarteaucitron.userInterface.css('tarteaucitronScrollbarParent', 'height', 'auto');
+                tarteaucitron.userInterface.css('tarteaucitronScrollbarParent', 'height', (document.getElementById('tarteaucitron').offsetHeight - document.getElementById('tarteaucitronClosePanel').offsetHeight - document.getElementById('tarteaucitronMainLineOffset').offsetHeight - 2) + 'px');
+
+                if (window.innerWidth === undefined) {
+                    a = 'client';
+                    e = document.documentElement || document.body;
+                }
+
+                if (e[a + 'Width'] <= 767) {
+                    start = 12;
+                }
+                
+                // indent the global allow/deny buttons
+                parent = document.getElementById('tarteaucitronScrollbarParent').offsetWidth;
+                child = document.getElementById('tarteaucitronScrollbarChild').offsetWidth;
+                tarteaucitron.userInterface.css('tarteaucitronScrollbarAdjust', 'marginRight', ((parent - child) + start) + 'px');
+                
+                if (e[a + 'Width'] <= 479) {
+                    tarteaucitron.userInterface.css('tarteaucitronScrollbarAdjust', 'marginLeft', '11px');
+                }
+
+            } else if (type === 'cookie') {
+                // height cookies list container
+                tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'bottom', (parseInt(document.getElementById('tarteaucitronAlertSmall').offsetHeight, 10) + 10) + 'px');
+                
+                tarteaucitron.userInterface.css('tarteaucitronCookiesList', 'height', 'auto');
+                tarteaucitron.userInterface.css('tarteaucitronCookiesList', 'height', (document.getElementById('tarteaucitronCookiesListContainer').offsetHeight - document.getElementById('tarteaucitronClosePanelCookie').offsetHeight - document.getElementById('tarteaucitronCookiesTitle').offsetHeight - 6) + 'px');
+            }
         }
     },
     "cookie": {
@@ -695,8 +765,6 @@ var tarteaucitron = {
             if (document.getElementById('tacCL' + key) !== null) {
                 document.getElementById('tacCL' + key).innerHTML = html;
             }
-            
-            tarteaucitron.cookie.number();
         },
         "crossIndexOf": function (arr, match) {
             "use strict";
@@ -714,26 +782,45 @@ var tarteaucitron = {
                 nb = (document.cookie !== '') ? cookies.length : 0,
                 html = '',
                 i,
+                name,
+                namea,
+                nameb,
+                c,
+                d,
                 s = (nb > 1) ? 's' : '',
-                name;
+                savedname,
+                host = (tarteaucitron.domain !== undefined) ? tarteaucitron.domain : tarteaucitron.cdn;
             
             cookies = cookies.sort(function (a, b) {
-                if (a > b) { return 1; }
-                if (a < b) { return -1; }
+                namea = a.split('=', 1).toString().replace(/ /g, '');
+                nameb = b.split('=', 1).toString().replace(/ /g, '');
+                c = (tarteaucitron.cookie.owner[namea] !== undefined) ? tarteaucitron.cookie.owner[namea] : '0';
+                d = (tarteaucitron.cookie.owner[nameb] !== undefined) ? tarteaucitron.cookie.owner[nameb] : '0';
+                if (c + a > d + b) { return 1; }
+                if (c + a < d + b) { return -1; }
                 return 0;
             });
-
-            html += '<div class="tarteaucitronCookiesListMain" id="tarteaucitronCookiesTitle">';
-            html += '    <b>' + nb + ' cookie' + s + '</b>';
-            html += '</div>';
+            
             if (document.cookie !== '') {
                 for (i = 0; i < nb; i += 1) {
                     name = cookies[i].split('=', 1).toString().replace(/ /g, '');
-                    html += '<div class="tarteaucitronCookiesListMain">';
-                    html += '    <div class="tarteaucitronCookiesListLeft"><a href="#" onclick="tarteaucitron.cookie.purge([\'' + cookies[i].split('=', 1) + '\']);tarteaucitron.cookie.number();return false">[x]</a> <b>' + name + '</b>';
-                    if (tarteaucitron.cookie.owner[name] !== undefined) {
-                        html += '        <br/>' + tarteaucitron.cookie.owner[name].join('<br/>');
+                    if (tarteaucitron.cookie.owner[name] !== undefined && tarteaucitron.cookie.owner[name].join(' // ') !== savedname) {
+                        savedname = tarteaucitron.cookie.owner[name].join(' // ');
+                        html += '<div class="tarteaucitronHidden">';
+                        html += '     <div class="tarteaucitronTitle">';
+                        html += '        ' + tarteaucitron.cookie.owner[name].join(' // ');
+                        html += '    </div>';
+                        html += '</div>';
+                    } else if (tarteaucitron.cookie.owner[name] === undefined && host !== savedname) {
+                        savedname = host;
+                        html += '<div class="tarteaucitronHidden">';
+                        html += '     <div class="tarteaucitronTitle">';
+                        html += '        ' + host;
+                        html += '    </div>';
+                        html += '</div>';
                     }
+                    html += '<div class="tarteaucitronCookiesListMain">';
+                    html += '    <div class="tarteaucitronCookiesListLeft"><a href="#" onclick="tarteaucitron.cookie.purge([\'' + cookies[i].split('=', 1) + '\']);tarteaucitron.cookie.number();tarteaucitron.userInterface.jsSizing(\'cookie\');return false"><b>&times;</b></a> <b>' + name + '</b>';
                     html += '    </div>';
                     html += '    <div class="tarteaucitronCookiesListRight">' + cookies[i].split('=').slice(1).join('=') + '</div>';
                     html += '</div>';
@@ -745,6 +832,8 @@ var tarteaucitron = {
                 html += '</div>';
             }
             
+            html += '<div class="tarteaucitronHidden" style="height:20px;display:block"></div>';
+            
             if (document.getElementById('tarteaucitronCookiesList') !== null) {
                 document.getElementById('tarteaucitronCookiesList').innerHTML = html;
             }
@@ -752,6 +841,10 @@ var tarteaucitron = {
             if (document.getElementById('tarteaucitronCookiesNumber') !== null) {
                 document.getElementById('tarteaucitronCookiesNumber').innerHTML = nb;
             }
+            
+            if (document.getElementById('tarteaucitronCookiesNumberBis') !== null) {
+                document.getElementById('tarteaucitronCookiesNumberBis').innerHTML = nb + ' cookie' + s;
+            }
         }
     },
     "getLanguage": function () {
@@ -922,7 +1015,7 @@ var tarteaucitron = {
         html += '   <div class="tac_float">';
         html += '      <b>' + tarteaucitron.services[id].name + '</b> ' + tarteaucitron.lang.fallback;
         html += '      <div class="tarteaucitronAllow" id="Eng' + r + 'ed' + id + '" onclick="tarteaucitron.userInterface.respond(this, true);">';
-        html += '          ' + tarteaucitron.lang.allow;
+        html += '          &#10004; ' + tarteaucitron.lang.allow;
         html += '       </div>';
         html += '   </div>';
         html += '</div>';
@@ -969,5 +1062,7 @@ var tarteaucitron = {
             
             tarteaucitron.proTemp = '';
         }
+        
+        tarteaucitron.cookie.number();
     }
 };