'Simple Cookie Bar Notice

I am using the script from http://cookie-bar.eu/ but for some reason when I set the script to be shown on top of the page, after you dismiss the Cookie Notice, the text from the top of the page is truncated. You can see here how Hello disappears or is truncated:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>cookieBAR</title>
    <script type="text/javascript">
        var expirationDate = new Date();
        expirationDate.setDate(128);
        document.cookie = "dummy=1; expires="+expirationDate.toUTCString()+"; path=/";
    </script>
</head>
<body>
<h1>Demo</h1>
<script type="text/javascript" src="//cdn.jsdelivr.net/cookie-bar/1/cookiebar-latest.js?forceLang=EN&top=1"></script>
</body>
</html>

Any ideas?

javascript cookies

Solution 1:^[1]

The same approach can be achieved easily by using the code below.

Styles: Add the following code to your HTML <head></head> section.

<style>
#cookie-notice {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    max-width: 450px;
    margin: auto;
    padding: 0.5rem;
    border: 1px solid #eee;
    background-color: #fefefe;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 22px;
    font-size: 15px;
    text-align: center;
    color: #555;
}
.cookie-notice-more {
    margin: 0 0.25rem;
    text-decoration-style: dashed;
    color: inherit;
}
.cookie-notice-close {
    padding: 0 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0.125rem;
    line-height: 20px;
    text-decoration: none;
    color: #888;
}
@media only screen and (min-width: 768px) {
    #cookie-notice {
        bottom: 1rem;
        border-radius: 0.25rem;
    }
    .cookie-notice-close {
        float: right;
    }
}
</style>

Notice block: Add the following code to your HTML <body></body> section.

<div id="cookie-notice">
    We use cookies to deliver better experience.
    <a href="https://cookienotice.js.org/about-cookies" class="cookie-notice-more" target="_blank" rel="noopener">More info...</a>
    <a href="javascript:void(0)" class="cookie-notice-close" onclick="closeCookieNotice()">OK</a>
</div>

Script: Add the following code to your HTML footer before the </body> closing tag.

function closeCookieNotice() {
    const nowDate = new Date();
    const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString();
    document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";";
    document.getElementById("cookie-notice").style.display = "none";
};
document.addEventListener("DOMContentLoaded", function() {
    const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0];
    if (cookie_notice !== "0") {
        document.getElementById("cookie-notice").style.display = "block";
    }
});
</script>

Source code, include files, 1-file script install & themes available here: https://cookienotice.js.org

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	zenull

'Simple Cookie Bar Notice

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]