Browser-Update.org

Una iniciativa de dissenyadors web per informar als usuaris sobre les actualitzacions del navegador

Personalitza i prova

Prova l'script

Si obriu el vostre lloc web amb #test-bu afegit a la URL, la barra es mostrarà sempre. Exemple: http://browser-update.org/#test-bu. Assegureu-vos que la pàgina es torna a carregar correctament obrint la URL en una nova pestanya del navegador. més detalls (en anglès)

Opcions

Les següents opcions poden ser passades a l'script:

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Especifica les versions necessàries del navegador
    // Els navegadors anteriors a això seran notificats.
    // f:22 ---> Firefox < 22 es notifica
    // Els números negatius especifiquen quantes versions hi ha darrere de la versió actual.
    // c:-5 ---> Chrome < 35  es notifica si la versió més recent de Chrome és 40.
    // més detalls (en anglès)
    
    reminder: 24,
    // després de quantes hores hauria de reaparèixer el missatge
    // 0 = mostra-ho sempre

    reminderClosed: 150,
    // si l'usuari tanca explícitament el missatge torna a aparèixer després de x hores

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // les funcions de devolució després de la notificació han aparegut / es van clicar / tancar

    l: false,
    // estableix un llenguatge fix per al missatge, p. ex. Això anul·la la detecció predeterminada.

    test: false,
    // true = mostra sempre la barra (per proves)

    text: "",
    // text de notificació personalitzat (html)
    // Els marcadors de posició {brow_name} se substituiran pel nom del navegador, {up_but} amb els continguts de l'etiqueta de l'enllaç d'actualització i {ignore_but} amb els continguts de l'enllaç d'ignorar.
    // Exemple: "El vostre navegador, {brow_name}, és massa antic: <a{up_but}>actualitza</a> o <a{ignore_but}>ignora</a>."
    // més detalls (en anglès)

    text_in_xx: "",
    // text de notificació personalitzada per a l'idioma "xx"
    // per exemple. text_de alemany i text_it per a italià

    newwindow: true,
    // obre l'enllaç en una nova finestra/pestanya

    url: null,
    // la url a la que anar després de fer clic a la notificació

    noclose:false,
    // No mostris el botó "ignorar" per tancar la notificació

    nomessage: false,
    // No mostreu un missatge si el navegador està desactualitzat, només crideu a la funció de devolució

    jsshowurl: "//browser-update.org/update.show.min.js",
    // URL on es troba la seqüència de comandaments, que mostra la notificació. Això només es carrega si l'usuari realment té un navegador obsolet.

    container: document.body,
    // Element DOM on s'injectarà la notificació.

    no_permanent_hide: false
    // No proporcioneu a l'usuari l'opció d'ocultar la notificació de forma permanent

    api: xxx
    // Aquesta és la versió de l'api d'actualització del navegador que voleu utilitzar. No elimineu.

};
Paràmetre Descripció Valors Valor per defecte Tipus
style La posició on s'ha de mostrar la notificació. Les opcions disponibles són: "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 text de notificació personalitzat (html)
més detalls (en anglès)
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
més detalls (en anglès)
undefined dictionary or string
text_in_xx text de notificació personalitzada per a l'idioma "xx"
per exemple. text_de alemany i text_it per a italià
més detalls (en anglès)
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

Canvia l'estil

La notificació aplica les regles CSS següents. Les podeu sobreescriure al vostre propi CSS. Per fer-ho necessiteu afegir una mica més d'especificitat a les regles CSS: e.g. 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;
    }