Vi bruger også småkager på biblioteket

Vi har faktisk småkager på biblioteket

Men desværre ikke denne slags:

Alle danske websites skal som bekendt være forsynet med en stor, grim meddelelse om de cookies der lægges på den besøgendes computer.

På Horsens kommunes biblioteker kører vi (lidt endnu) på WordPress og har hidtil brugt plugin’et Cookie Law Info. Det virker da, men det er ikke kønt og plugins har det generelt med at tilføje ekstra JavaScripts, CSS og dermed flere HTTP kald til websitets kodebase, hvilket er med til at gøre det sløvt og tungere at hente ned for brugeren.

Kunne man gøre det bare lidt diskret?

Derfor valgte jeg en simpel løsning. At hardcode det ind i det theme, jeg i forvejen har bygget til websitet. Beskeden skal naturlivis være synlig, men jeg vil gerne have, at den er bare lidt diskret. Du må gerne få koden.

Kyl lidt HTML ind i dit sites‛ sidefod:

<div class="cookie-message">
    <p class="cookie-header">Cookies</p>
    <p class="cookie-content">Dette website bruger cookies. Du kan håndtere eller blokere disse i din browsers indstillinger.</p>
    <p class="cookie-content"><button class="button">Ok, tak!</button> &nbsp; <a href="http://link-til-din-side-om-cooki.es">L&aelig;s mere om cookies</a></p>    
</div>

Føj et par linier til dit JavaScript (du skal i forvejen bruge jQuery):

$('.cookie-header').click(function() {
    $('.cookie-content').slideToggle('fast');
    $('.cookie-content button').click(function() {
        $('.cookie-content').slideUp('fast');
    });
});

Føj dette til din CSS:

.cookie-message {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  color: #ddd;
  padding: 1em 1em .5em;
  position: fixed;
  left: -5px;
  bottom: 2em;
  text-align: left;
}
.cookie-message p {
  font: normal 1em/1.5em Helvetica, Sans-serif;
  margin: 0 0 .5em 5px;
}
.cookie-message .cookie-header {
  font-size: 1.2em;
  cursor: pointer;
}
.cookie-message .cookie-content {
  display: none;
  width: 20em;
}
.cookie-message a {
  color: #fff;
}

Se også Codepen eksempel med SASS.

Translations: English