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.

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: &lt;a{up_but}&gt;actualitza&lt;/a&gt; o &lt;a{ignore_but}&gt;ignora&lt;/a&gt;.

    text_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

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