Headerbalk

Handig! Ik ga het eens uitproberen.

Ik heb nog het een en ander aangepast, dit is de laatste versie, de header balk is nu ook weg te klikken door bezoekers van de website als ze deze hinderlijk vinden.

Dit is het nieuwe script voor Google tag manager, vergeet niet je eigen background-color: en je eigen tekst aan te passen! Nu staat er deze tekst in het script: Bestel vóór 14:00 uur op vrijdag, en je bestelling wordt dezelfde dag nog verzonden. 🚚  Op deze plek in het onderstaande script kun je een eigen tekst ingeven!
 

Kopieer onderstaande als HTML TAG in Google Tag manager, publiceer op alle pagina's.
Laat even weten als je de top balk gaat gebruiken, dan kom ik even op je website kijken.

<!-- Stijl voor de header-banner -->
<style>
  #header-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-color: #931245;
    z-index: 9999;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
  }

  #close-banner {
    cursor: pointer;
    margin-left: 10px;
  }
</style>

<!-- De header-banner zelf -->
<div id="header-banner" role="banner">
  Bestel vóór 14:00 uur op vrijdag, en je bestelling wordt dezelfde dag nog verzonden. 🚚
  <span id="close-banner">✖</span>
</div>

<!-- JavaScript -->
<script>
  window.addEventListener('load', setPaddingTop);
  window.addEventListener('resize', setPaddingTop);

  document.getElementById('close-banner').addEventListener('click', function() {
    document.getElementById('header-banner').style.display = 'none';
    setPaddingTop();
  });

  function setPaddingTop() {
    var headerHeight = document.getElementById('header-banner').offsetHeight;
    document.body.style.paddingTop = headerHeight + 'px';
  }
</script>
 

Hallo Johan, 

Bedankt voor de code. Ik heb de headerbalk geprobeerd en heb nog twee vragen/opmerkingen. Als de balk wordt weggeklikt door de gebruiker en hij/zij vervolgens een nieuwe pagina opent in de webwinkel, komt de balk weer tevoorschijn. Is het mogelijk om de balk na het wegklikken op elke volgende pagina ook onzichtbaar te houden? Daarnaast heb ik gemerkt dat op kleinere schermpjes bv iPhone alleen het laatste gedeelte van de zin wordt weergegeven op het scherm. De eerste regel wordt dan niet weergegeven. Is het mogelijk om de afmetingen van de balk aan te passen o.b.v. de breedte van het scherm? Ik hoor graag wat de mogelijkheden zijn. Alvast bedankt.

Groeten, Corne

Hoi Corne,

Ik ben even aan het knutselen geweest, je zou de banner nu weg moeten kunnen klikken en daarna komt hij 4 minuten lang niet terug. Die 4 minuten kun je instellen. Om de tijd te wijzigen, pas je de waarde van hideFor aan. Deze is momenteel ingesteld op 240.000 milliseconden (wat gelijk is aan 4 minuten). Als je bijvoorbeeld wilt dat de banner 10 minuten verborgen blijft, verander je hideFor naar 600000 (10 minuten x 60 seconden x 1000 milliseconden). Je kunt deze gegevens vinden onderaan het script. Vergeet ook niet je eigen tekst in te vullen. 

Volgens Chat gebruikt de banner geen cookies, dus ik denk dat de cookie toestemming niet nodig is, je kunt het script ook zelf ik ChatGPT kopiëren en chat vragen aanpassingen te doen.

Dit is het script wat nu zou moeten werken, heb je nog wat problemen, druk even ctrl + F5 in, of probeer het uit in de Chrome incognito modus.

Voor wat betreft de kleine schermen, ik heb er zelf op mijn kleine iPhone 7 geen problemen mee, misschien is je tekstregel te lang?

 

<!-- Stijl voor de header-banner en sluitknop -->
<style>
  #header-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #931245;
    z-index: 9999;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    font-weight: bold;
    color: white;
    display: none;  /* Initieel verborgen */
  }
  #close-button {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    color: white;
  }
</style>

<!-- De header-banner zelf -->
<div id="header-banner">
  Welkom in onze online winkel
  <span id="close-button">X</span>
</div>

<!-- JavaScript -->
<script>
  window.addEventListener('load', function() {
    var headerBanner = document.getElementById('header-banner');
    var closeButton = document.getElementById('close-button');

    var currentTime = new Date().getTime();
    var hideUntil = localStorage.getItem('hideUntil');

    // Controleer of de banner eerder is gesloten en of de verbergtijd is verstreken
    if (hideUntil && currentTime < hideUntil) {
      headerBanner.style.display = 'none';
    } else {
      headerBanner.style.display = 'block';
      var headerHeight = headerBanner.offsetHeight;
      document.body.style.paddingTop = headerHeight + 'px';
    }

    // Voeg een klik-event toe aan de sluitknop
    closeButton.addEventListener('click', function() {
      headerBanner.style.display = 'none';
      document.body.style.paddingTop = '0px';

      // Verberg de banner voor de volgende 4 minuten (240000 milliseconden)
      var hideFor = 240000; // 4 minuten in milliseconden
      localStorage.setItem('hideUntil', currentTime + hideFor);
    });
  });
</script>

Groet,

Johan
 

Ik heb ook eens zitten spelen met de codering! Voor mij hoeft het niet weg te klikken te zijn, en ik wilde het statisch bovenaan laten staan (dus niet sticky). Is gelukt! 😊 (www.nanaas.nl)

Bij mij liep de balk namelijk over mijn sticky header heen, waardoor het niet meer leesbaar was. Het zou voor mij nog wel boven mijn sticky header mee mogen lopen (zoals op de website https://www.sissy-boy.com/), maar ik weet niet of dat in de codering eenvoudig te maken is?

Ja, zal ik doen. Ik ben nog niet helemaal content omdat het op mobiel nog niet helemaal lekker staat - daar valt namelijk mijn navigatie er nog overheen. Dus dat moet ik nog zien te fixen. 😅