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. meer details (in het Engels)

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 het Engels)
    
    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: <a{up_but}>update</a> of <a{ignore_but}>negeer</a>."
    // meer details (in het Engels)

    text_in_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;
    }