script voor cookie waarschuwing

Status
Niet open voor verdere reacties.
R

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Weet iemand een manier om op een html website een melding te laten verschijnen met bijvoorbeeld de tekst:

Wij maken gebruik van cookies
Door gebruik te maken van onze website ga je akkoord met onze cookies. Voor meer informatie kun je kijken bij ons cookie- en privacybeleid.

Zie als voorbeeld : https://fysiotherapie.zorgsaamnijverdal.nl
 
Ik gebruik deze onderstaande code.
Let op: Ik gebruik wel de jQuery-library erbij
Code: 
$(document).ready(function () {
    if (getCookie("cb_hide") == null) {
		$('body').prepend('<div id="cb"><div id="cb_wrapper"></div></div>');
		$('#cb_wrapper').append('<span id="cb_description">Deze website maakt gebruik van \'cookies\'. Klik <strong><a href="/page/cookies" target="_blank" >hier</a></strong> voor meer informatie.</span>');
		$('#cb_wrapper').append('<span id="cb_hide"><button onclick="setCookie(\'cb_hide\')" class="CookiesOK">Verberg</button></span>');
	}
});

function setCookie(c_name) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + 365);
    var c_value = escape('true') + ((365 == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value + ";path=/";
    $('#cb').hide();
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}
Je moet zelf even zorgen voor mooie opmaak in CSS. Zorg er ook voor dat je embeds die cookies plaatsen (Twitter, YouTube, TikTok etc..) enkel toestaat als de cookie 'cb_hide' bestaat.
 
Het is Javascript-code. Dus tussen bij sterke voorkeur in een .js bestand welke je onderaan in je <body>-sectie invoegt:

Code: 
/* Laad hier jQuery in */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
/* Laad hier je Cookie-bar javascript code in */
<script type="text/javascript" src="cookiebar.js"></script>

Gebruik je al jQuery, dan kan je de eerste twee regels negeren.
 
Laatst bewerkt:
Ik sta op het punt om op en neer naar Marseille te rijden. Ik heb woensdag tijd om het uit te proberen.

Alvast bedankt weer
 
Veel succes, en wees veilig!
 
Een css vormgeving voor het script van php4u bij berichtje 2.
Code: 
#cb, #cb * {
    margin: 0;
    box-sizing: border-box;
    font: 400 14px/1.5 inherit;
}
#cb {
    position: fixed;
    top:0; left:0;
    width: 100%;
    z-index: 999;
    background-color: #444;
    color: #fff;
}
#cb_wrapper {
    padding: 6px 15px;
    text-align: center;
}
#cb a, #cb a:hover, #cb a:active {
    color: #ffa;
    text-decoration: underline;
    outline: none;
}
#cb button {
    display: inline-block;
    margin: 0 6px;
    padding: 4px 12px;
    border: 1px solid #060;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    background-color: #3a4;
}
 
Ik dacht dat ik het snapte maar helaas

Ik heb onderaan de html code dit toegevoegd: <script type="text/javascript" src="assets/vendor/cookiebar/cookiebar.js"></script>
Zie screenshot.

Ik heb een js.bestand aangemaakt met daarin deze code
Code: 
$(document).ready(function () {
    if (getCookie("cb_hide") == null) {
		$('body').prepend('<div id="cb"><div id="cb_wrapper"></div></div>');
		$('#cb_wrapper').append('<span id="cb_description">Deze website maakt gebruik van \'cookies\'. Klik <strong><a href="/page/cookies" target="_blank" >hier</a></strong> voor meer informatie.</span>');
		$('#cb_wrapper').append('<span id="cb_hide"><button onclick="setCookie(\'cb_hide\')" class="CookiesOK">Verberg</button></span>');
	}
});

function setCookie(c_name) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + 365);
    var c_value = escape('true') + ((365 == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value + ";path=/";
    $('#cb').hide();
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

De locatie van dit js bestand kun je zien in bijgevoegd screenshot.

Ik dacht dat het zo zou moeten lukken maar ik zie niks verschijnen.

https://met-rob.com/fysio/
 

Bijlagen

  • Schermafbeelding 2020-12-27 om 15.14.01.png
    Schermafbeelding 2020-12-27 om 15.14.01.png
    141,5 KB · Weergaven: 32
  • Schermafbeelding 2020-12-27 om 15.13.49.png
    Schermafbeelding 2020-12-27 om 15.13.49.png
    68 KB · Weergaven: 24
  • Schermafbeelding 2020-12-27 om 15.20.33.png
    Schermafbeelding 2020-12-27 om 15.20.33.png
    179,5 KB · Weergaven: 22
Het cookie script van php4u werkt goed want de html is toegevoegd in je pagina.
Heb je ook de css van berichtje #7 toegevoegd?

cookie.jpg
 
Laatst bewerkt:
Zo te zien mist de stijl.
 
Als je tijdelijk even // voor deze regel zet dan kan je telkens opnieuw testen.
Zodra je het script live zet haal je de // weer weg.
Code: 
// $('#cb').hide();
 
bron zei:
Het cookie script van php4u werkt goed want de html is toegevoegd in je pagina.
Heb je ook de css van berichtje #7 toegevoegd?

Bekijk bijlage 353815
Klik om te vergroten...

Waar in mijn html pagina zie jij dit staan dan?

Het bericht zou toch meteen moeten verschijnen als je de pagina opent?

En ik snap ook niet zo goed hoe ik dat css bestand eraan moet koppelen.

Sorry dat ik weer zoveel vragen heb, maar wat voor jullie gesneden koek is, is voor mij nog steeds erg lastig.
 
De HTML-code wordt door dynamisch door jQuery aan je body-sectie toegevoegd.
De bijbehorende code voor de opbouw van de cookiebar staat niet in de normale HTML-source, maar in de DOM. Die kan je vinden door te rechtsklikken, en te kiezen voor 'Element inspecteren'.

Die CSS kan je in je CSS-stijlbestand plaatsen, of in een eigen stijl-bestand.
 
Gelukt

Het is gelukt.

Heb ook de kleuren en de link voor het privacy statement aan kunnen passen.

Er zou theoretisch nog 1 dingetje aan kunnen verbeteren maar dat is niet noodzakelijk.

Op een gewone computer is het 100% in orde.

Alleen op een telefoon valt de tekst nét onder die 3 streepjes voor het menu uit te laten klappen.

Dit is geen ramp maar als het op een simpele manier zou kunnen door deze melding helemaal op de voorgrond te krijgen op mobiele weergave is het helemaal perfect.


Maar zoals gezegd, dit is niet noodzakelijk.

Erg bedankt weer voor de hulp en ik wens jullie niets dan goeds voor 2021!!!!!!!
 

Bijlagen

  • Schermafbeelding 2020-12-27 om 18.52.20.png
    Schermafbeelding 2020-12-27 om 18.52.20.png
    61,9 KB · Weergaven: 19
Het menu heeft een hoge z-index. Verander bij de cookie melding daarom de z-index in 9999
Code: 
#cb {
    position: fixed;
    top:0; left:0;
    width: 100%;
    z-index: 9999;
    background-color: #444;
    color: #fff;
}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan