Browser-Update.org

Aanpassen en testen

Test het script

Als u uw website opent met #test-bu aan het eind van de url, wordt de balk altijd getoond. Voorbeeld: http://browser-update.org/#test-bu. Zorg dat de pagina correct is ververst door de url in een nieuw tabblad te openen.

Opties

De volgende opties kun je doorgeven aan het script:

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Specificeert de benodigde browser versie
    // Browsers ouder dan dit zullen worden verwittigd.
    // f:22 ---> Firefox < 22 krijgt notificaties
    // Negatieve nummers tonen hoeveel versies achterlopend op de huidige versie.
    // c:-5 ---> Chrome < 35  krijgt een notificatie als Chrome versie 40 de meest recente versie is.
    // meer details (in english)
    
    reminder: 24,
    // na hoeveel uur de melding weer moet verschijnen
    // 0 = continu tonen

    reminderClosed: 150,
    // als de gebruiker het bericht expliciet sluit, wordt het opnieuw getoond na x uur

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // call back-functies nadat melding verscheen / op werd geklikt / sloot

    l: false,
    // stel een vaste taal in voor het bericht. Bijvoorbeeld "en". Dit overschrijft de standaard detectie.

    test: false,
    // true = toont de balk altijd (om te testen)

    text: "",
    // aangepaste html melding
    // Placeholders {brow_name} worden vervangen met de browsernaam, {up_but} met de inhoud van de update knop en {ignore_but} met de inhoud van de negeer knop.
    // Voorbeeld: Jouw browser, {brow_name}, is te oud: &lt;a{up_but}&gt;update&lt;/a&gt; of &lt;a{ignore_but}&gt;negeer&lt;/a&gt;.

    text_xx: "",
    // aangepaste waarschuwingstekst voor taal "xx"
    // vb. text_de voor Duits en text_it voor Italiaans

    newwindow: true,
    // open link in nieuw venster/tab

    url: null,
    // de url waarnaar wordt doorgestuurd nadat de waarschuwing is aangeklikt

    noclose:false,
    // Laat de "negeer" knop niet zijn om de notificatie te sluiten

    nomessage: false,
    // Toon geen bericht als de browser gedateerd is, roep enkel de callback-functie onshow aan

    jsshowurl: "//browser-update.org/update.show.min.js",
    // URL waar het script zich bevindt die de notificatie toont. Deze wordt alleen geladen als de gebruiker een verouderde browser heeft.

    container: document.body,
    // DOM element waar de notificatie zal worden geïnjecteerd.

    no_permanent_hide: false
    // Geef de gebruiker niet de mogelijkheid om de melding permanent te verbergen

    api: xxx
    // Dit is de versie van de browser-update api die gebruikt wordt. Niet verwijderen.

};

Opmaak aanpassen

De volgende CSS regels worden toegepast op de waarschuwing. Je kunt deze overschrijven in je eigen CSS. Dit doe je door specifiekere CSS-regels te gebruiken: vb. body .buorg {font-size:20px}

    .buorg {
        position: absolute;
        position: fixed;
        z-index: 111111;
        width: 100%;
        top: 0px;
        left: 0px;
        border-bottom: 1px solid #A29330;
        text-align: center;
        color: #000;
        background-color: #fff8ea;
        font: 18px Calibri, Helvetica, sans-serif;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        animation: 1s ease-out 0s buorgfly
    }

    .buorg-pad {
        padding: 9px;
        line-height: 1.7em;
    }

    .buorg-buttons {
        display: block;
        text-align: center;
    }

    #buorgig, #buorgul, #buorgpermanent {
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
        padding: 1px 10px;
        border-radius: 4px;
        font-weight: normal;
        background: #5ab400;
        white-space: nowrap;
        margin: 0 2px;
        display: inline-block;
    }

    #buorgig {
        background-color: #edbc68;
    }

    @media only screen and (max-width: 700px) {
        .buorg div {
            padding: 5px 12px 5px 9px;
            line-height: 1.3em;
        }
    }

    @keyframes buorgfly {
        from {
            opacity: 0;
            transform: translateY(-50px)
        }
        to {
            opacity: 1;
            transform: translateY(0px)
        }
    }

    .buorg-fadeout {
        transition: visibility 0s 8.5s, opacity 8s ease-out .5s;
    }

    .buorg-icon {
        width: 22px;
        height: 16px;
        vertical-align: middle;
        position: relative;
        top: -0.05em;
        display: inline-block;
        background: no-repeat 0px center;
    }