Browser-Update.org

Un'iniziativa sostenuta da diversi web-designer per informare gli utenti sugli aggiornamenti del browser

Personalizza e testa

Testa lo script

Se apri il tuo sito web con <code>#test-bu</ code> aggiunto all'url, la barra verrà sempre visualizzata. Esempio: <code>http://browser-update.org/it/#test-bu</ code>. Assicurati che la pagina sia ricaricata correttamente aprendo l'url in una nuova scheda del browser.

Opzioni

Le seguenti opzioni possono passare il controllo dello script:

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Specifies required browser versions
    // Browsers older than this will be notified.
    // 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.
    // maggiori dettagli (in inglese)
    
    reminder: 24,
    // dopo quante ore il messaggio deve riapparire
    // 0 = mostra tutto il tempo

    reminderClosed: 150,
    // se l'utente chiude esplicitamente il messaggio, riappare dopo x ore

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // funzioni di callback dopo che la notifica è comparsa / è stata cliccata / chiusa

    l: false,
    // imposta una lingua fissa per il messaggio, ad es. "En". Questo sovrascrive il rilevamento predefinito.

    test: false,
    // vero = mostra sempre l'avviso (per testare)

    text: "",
    // testo della notifica personalizzato (utilizza html)
    // I segnaposti {brow_name} verranno sostituiti con il nome del browser, {up_but} con i contenuti del tag del link di aggiornamento e {ignore_but} con i contenuti per il link ignore.
    // Esempio: Il tuo browser, {brow_name}, è troppo vecchio &lt;a{up_but}&gt;aggiorna&lt;/a&gt; o &lt;a{ignore_but}&gt;ignore&lt;/a&gt;.

    text_xx: "",
    // testo della notifica personalizzato per il linguaggio "xx"
    // e.g. text_de for german and text_it for italian

    newwindow: true,
    // apri link in una nuova finestra/scheda

    url: null,
    // the url to go to after clicking the notification

    noclose:false,
    // Do not show the "ignore" button to close the notification

    nomessage: false,
    // Do not show a message if the browser is out of date, just call the onshow callback function

    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 where the notification will be injected.

    no_permanent_hide: false
    // Do not give the user the option to permanently hide the notification

    api: xxx
    // This is the version of the browser-update api to use. Please do not remove.

};
Parameter Description Values Default value Type
style The position where the notification should be shown. Available options are: "top", "bottom", "corner" "top", "bottom", "corner" "top" boolean
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

Cambia lo stile

The following CSS rules are applied by the notification. You can overwrite them in your own CSS. To do so you need to add some more specificity to the css-rules: 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;
    }