Browser-Update.org

Eine Initiative von Webseiten, um Benutzer über Updates für ihren Webbrowser zu informieren

Anpassen und testen

Skript testen

Wenn sie die Webseite mit #test-bu an die Url angehängt öffnen, wird die Leiste immer erscheinen. Beispiel: http://browser-update.org/#test-bu. Stellen sie sicher, dass die Seite korrekt neu geladen wurde indem Sie die Seite in einem neuen Browser Tab öffnen. mehr Details (auf Englisch)

Optionen

Die folgenden Einstellungen können an das Script übergeben werden:

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Legt die benötigten Browserversionen fest
    // Browsers older than this will be notified.
    // f:22 ---> Firefox < 22 wird benachrichtigt
    // Negative numbers specify how much versions behind current version.
    // c:-5 ---> Chrome < 35  gets notified if latest Chrome version is 40.
    // mehr Details (auf Englisch)
    
    reminder: 24,
    // nach wie vielen Stunden soll die Nachricht erscheinen
    // 0 = immer anzeigen

    reminderClosed: 150,
    // wenn der Nutzer die Nachricht schließt erscheint sie nach x Stunden wieder

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // Callback-Funktionen die Aufgerufen werden wenn die Nachricht erscheint / geklickt wurde / geschlossen wurde

    l: false,
    // setzte eine feste Sprache für die Nachricht, z.B. "en". Dies hebelt die automatische Erkennung der Sprache aus.

    test: false,
    // wahr = zeigt Leiste immer an (für Testzwecke)

    text: "",
    // eigener Banchrichtigungstext (html)
    // Der Platzhalter {brow_name} wird mit dem Browsernamen ersetzt, {up_but} mit dem Inhalt des "Update"-Link-tags und {ignore_but} mit dem Inhalt des "Ignorieren"-Links.
    // Beispiel: "Ihr Browser {brow_name}, ist zu alt: <a{up_but}>Aktualisieren</a> oder <a{ignore_but}>Ignorieren</a>."
    // mehr Details (auf Englisch)

    text_in_xx: "",
    // eigener Benachrichtigungstext für die Sprache "xx"
    // z. B. Text_de für Deutsch und Text_en für Englisch

    newwindow: true,
    // den Link in einem neuen Tab öffnen

    url: null,
    // die URL die beim klick auf die Webseite aufgerufen werden soll

    noclose:false,
    // "Ignorieren"-Knopf zum schließen der Benachrichtigung verstecken

    nomessage: false,
    // Keine Nachricht zeigen wenn der Browser veraltet ist, sonder nur die "onshow" callback-Funktion aufrufen

    jsshowurl: "//browser-update.org/update.show.min.js",
    // URL zu dem Skript, welches die Benachrichtigung anzeigt. Dies wird nur geladen wenn der Benutzer gerade einen veralteten Browser verwendet.

    container: document.body,
    // DOM Element wo die Benachrichtigung eingefügt werden soll.

    no_permanent_hide: false
    // Gib dem Benutzer keine Möglichkeit die Benachrichtigung dauerhaft auszublenden

    api: xxx
    // Dies ist die Version der browser-update Api die verwendet werden soll. Bitte nicht entfernen.

};
Parameter Beschreibung Werte Standardwert Typ
style Die Position an welcher die Benachrichtigung angezeigt werden soll. Verfügbare Optionen sind: "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
text eigener Banchrichtigungstext (html)
mehr Details (auf Englisch)
text: { 'msg':'Your web browser ({brow_name}) is out of date.', 'msgmore': 'Update your browser for...', 'bupdate': 'Update browser', 'bignore': 'Ignore', 'remind': 'You will be reminded in {days} days.', 'bnever': 'Never show again' } dictionary or string
text_for_x custom notification text for browser x
mehr Details (auf Englisch)
undefined dictionary or string
text_in_xx eigener Benachrichtigungstext für die Sprache "xx"
z. B. Text_de für Deutsch und Text_en für Englisch
mehr Details (auf Englisch)
undefined dictionary or string
text_for_x_in_xx custom notification text for browser x in language xx
text_for_i: {'msg':'Internet Explorer is not supported on this site.'}
undefined dictionary or string
nostatistics For every 1000th visitor anonymous statistics on the used browser are collected.
Turns off sending anonymous statistics.
true, false false boolean

Change the style

Die Folgende CSS-Regeln werden auf die Benachrichtigung angewandt. Man kann sie im eigenen CSS überschreiben. Um das zu tun müssen die eigenen regeln aber spezifischer sein, d.h. z.B. 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;
    }