Develop Reference

Cookie Consent blocking rest of JavaScripts

I got this library from google, this cookie consent script. It works well but the problem is that untill you press the button and refresh the page the rest of javascripts won't work, so my navigation on phone isn't working neither the data-scroll animation. This is the code. I don't know where the problem is, if somebody could help me I would be thankful. Have a great day!
// --- Config --- //
var purecookieTitle = 'Cookies.'; // Title
var purecookieDesc =
'Acest website folosește cookie-uri pentru a vă îmbunătăți experiența. Folosind site-ul nostru web, sunteți de acord cu toate cookie-urilor în conformitate cu politica noastră de confidențialitate.'; // Description
var purecookieLink =
'Citesțe mai mult'; // Cookiepolicy link
var purecookieButton = 'Am înțeles'; // Button text
// --- --- //
function pureFadeIn(elem, display) {
var el = document.getElementById(elem);
el.style.opacity = 0;
el.style.display = display || 'block';
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += 0.02) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
function pureFadeOut(elem) {
var el = document.getElementById(elem);
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= 0.02) < 0) {
el.style.display = 'none';
} else {
requestAnimationFrame(fade);
}
})();
}
function setCookie(name, value, days) {
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = '; expires=' + date.toUTCString();
}
document.cookie = name + '=' + (value || '') + expires + '; path=/';
}
function getCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name + '=; Max-Age=-99999999;';
}
function cookieConsent() {
if (!getCookie('purecookieDismiss')) {
document.body.innerHTML +=
'<div class="cookieConsentContainer" id="cookieConsentContainer"><div class="cookieTitle"><a>' +
purecookieTitle +
'</a></div><div class="cookieDesc"><p>' +
purecookieDesc +
' ' +
purecookieLink +
'</p></div><div class="cookieButton"><a onClick="purecookieDismiss();">' +
purecookieButton +
'</a></div></div>';
pureFadeIn('cookieConsentContainer');
}
}
function purecookieDismiss() {
setCookie('purecookieDismiss', '1', 14);
pureFadeOut('cookieConsentContainer');
}
window.onload = function () {
cookieConsent();
};

Just in case someone else stumble upon this issue, the problem is in this line:
document.body.innerHTML +=
If you replace it with this, for example, it works perfectly and does not block any other javascript, but obviously you have to add the id footer somewehere in your page
document.getElementById("footer").innerHTML+=

In your HTML, put any div and assign an id to it:
<div class="any" id="footer"></div>
...
In the JS file, in the cookieConsent() function, change
document.body.innerHTML += to document.getElementById('footer').innerHTML +=.
The complete code would look like this:
function cookieConsent() {
if (!getCookie('purecookieDismiss')) {
document.getElementById('footer').innerHTML +=
'<div class="cookieConsentContainer" id="cookieConsentContainer"><div class="cookieTitle"><a>' +
purecookieTitle +
'</a></div><div class="cookieDesc"><p>' +
purecookieDesc +
'' +
purecookieLink +
'</p></div><div class="cookieButton"><a onClick="purecookieDismiss();">' +
purecookieButton +
'</a></div></div>';
pureFadeIn('cookieConsentContainer');
}
}
Sorry for my bad English ;(

Javascript - Set a Browser Cookie

When a user click on a button it would take them to a link but before they go to that link, the cookie will need to be set to either English (EN) or French (FR). I got an example here:
http://www.quirksmode.org/js/cookies.html
but for some reason, it's not reading in the cookie and I'm not sure where I'm going wrong.
This is what I have:
<!DOCTYPE html>
<html>
<body>
<p>This is for the Browser Cookies.</p>
<button onclick="EN_Cookie()">English Link</button> <button onclick="FR_Cookie()">French Link</button>
<script>
function EN_Cookie() {
setCookie("SMDCookie","EN",7);
//location.href = 'https://google.com';
}
function FR_Cookie() {
setCookie("SMDCookie","FR",7);
//location.href = 'https://google.com';
}
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
</script>
</body>
</html>
Any suggestions??

I reviewed your code and found your set cookie function is correct.
May be your getCookie not working, i am sharing get cookie function:
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

Here are functions you can use for creating and retrieving cookies
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
Copied from How do I create and read a value from cookie with javascript?

Show hide javascript cookie

function showhide() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
I have this working javascript function to hide a row in a table - like this
<tr id="hidethis" style="display:table-row;">
It works fine but i want to use cookies to remember which option user chose. I cant figure out how to properly set cookies, some advice would be much appreciated.

Try this:
You need to store the value in cookies and read those values on DOMContentLoaded event ad set your style accordingly
Reference used to create and read cookies values
var createCookie = function(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
};
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
document.addEventListener('DOMContentLoaded', function() {
var cookieVal = getCookie('display');
if (cookieVal) {
document.getElementById("hidethis").style.display = cookieVal;
}
});
function showhide() {
if (document.getElementById("hidethis").style.display == 'none') {
document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
createCookie('display', 'table-row', 365);
} else {
document.getElementById("hidethis").style.display = 'none';
createCookie('display', 'none', 365);
}
}
<table>
<tr id="hidethis" style="display:table-row;">
</table>

Hide popup when clicked

I use the script below to create a popup. How can I hide the popup when the user clicks it?
if (document.cookie.indexOf('_visited=1') == -1) {
var delay_popup = 1000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
var date = new Date;
date.setDate( date.getDate() + 1 ); // текущая дата + 1 день
document.cookie = '_visited=1; path=/; expires=' + date.toUTCString();
}

You can add onclick event like this:
if (document.cookie.indexOf('_visited=1') == -1) {
var delay_popup = 1000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
var date = new Date;
date.setDate(date.getDate() + 1); // текущая дата + 1 день
document.cookie = '_visited=1; path=/; expires=' + date.toUTCString();
document.getElementById('parent_popup').onclick = function() {
this.style.display = 'none';
}
}

Getting Last Cookie Expiration

cookie_name = "Counter_Cookie";
function doCookie() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
}
else {
index = -1;
alert("Welcome the site! Please don't forget to bookmark this page!");
}
var expires = new Date();
expires.setFullYear(expires.getFullYear() + 1);
if (index == -1) {
document.cookie = cookie_name + "=1; expires=" + expires.toUTCString();
}
else {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {
countend = document.cookie.length;
}
count = eval(document.cookie.substring(countbegin, countend)) + 1;
document.cookie=cookie_name+"="+count+"; expires=" + expires.toUTCString();
}
document.write("<p>You have been to my site "+getTimes()+".</p>");
}
function getTimes() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
if (index != -1) {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {
countend = document.cookie.length;
}
count = document.cookie.substring(countbegin, countend);
if (count == 1) {
return (count+" time");
}
else {
return (count+" times");
}
}
}
return ("0 times");
}
I want to know how to get the last cookies expiration date to show the last time the person visited the site. I'm assuming I'll need an array but, I can't seem to find out how to do that with the code I've written.

The Microsoft says: "The browser is responsible for managing cookies, and the cookie's expiration time and date help the browser manage its store of cookies. Therefore, although you can read the name and value of a cookie, you cannot read the cookie's expiration date and time. When the browser sends cookie information to the server, the browser does not include the expiration information." http://msdn.microsoft.com/en-us/library/ms178194(v=vs.100).aspx
So you can append expire timestamp with separator into cookie's value: count + '|' + expires.getTime()
Then parse time in getTimes():
data = document.cookie.substring(countbegin, countend).split('|');
count = data[0];
expirationDate = new Date();
expirationDate.setTime(data[1]);
Whole code:
cookie_name = "Counter_Cookie";
function doCookie() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
}
else {
index = -1;
alert("Welcome the site! Please don't forget to bookmark this page!");
}
var expires = new Date();
expires.setFullYear(expires.getFullYear() + 1);
if (index == -1) {
document.cookie = cookie_name + "=1|" + expires.getTime() + "; expires=" + expires.toUTCString();
}
else {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {
countend = document.cookie.length;
}
count = eval(document.cookie.substring(countbegin, countend)) + 1;
document.cookie=cookie_name+"="+count+"|" + expires.getTime() + "; expires=" + expires.toUTCString();
}
document.write("<p>You have been to my site "+getTimes()+".</p>");
}
function getTimes() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
if (index != -1) {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {
countend = document.cookie.length;
}
data = document.cookie.substring(countbegin, countend).split('|');
count = data[0];
date = new Date();
date.setTime(data[1]);
if (count == 1) {
message = count+" time";
}
else {
message = count+" times";
}
return message + ", last expire: " + date.toUTCString();
}
}
return ("0 times");
}