Browser-Update.org

Een initiatief van webdesigners om bezoekers te informeren over browser-updates

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},
    // Specifies required browser versions
    // Browsers ouder dan dit zullen worden verwittigd.
    // f:22 ---> Firefox < 22 gets notified
    // Negative numbers specify how much versions behind current version.
    // c:-5 ---> Chrome < 35  gets notified if latest Chrome version is 40.
    // more 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,
    // set a fixed language for the message, e.g. "en". This overrides the default detection.

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

    text: "",
    // aangepaste html melding
    // Placeholders {brow_name} will be replaced with the browser name, {up_but} with contents of the update link tag and {ignore_but} with contents for the ignore link.
    // 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 where the script, that shows the notification, is located. This is only loaded if the user actually has an outdated browser.

    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
    // This is the version of the browser-update api to use. Please do not remove.

};
Parameter Omschrijving Values Standaardwaarde Type
style The position where the notification should be shown. Available options are: "top", "bottom", "corner" "top", "bottom", "corner" "top" string
shift_page_down Shift down the page in order not to obscure content behind the notification bar. Adds margin-top to the <body> tag. true, false true boolean
notify_esr Also notify Firefox ESR (Extended Support releases) versions if they are below requirement - although they are still supported. Default is to not notify them. They are supported by mozilla for about a year after their initial release. true, false false boolean

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