Browser-Update.org

O initiativa a designer-ilor de pagini web, pentru a informa utilizatorii asupra actualizarii browser-elor de internet

Personalizați și testați

Testează scriptul

Dacă deschideți site-ul cu #test-bu atașat la url, bara o să apară întotdeauna. Exemplu: http://browser-update.org/#test-bu. Asigurați-vă că pagina este reîncărcată, deschizând url-ul într-o nouă filă. mai multe detalii (în engleză)

Opțiuni

Opțiunile următoare pot fi folosite în 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.
    // mai multe detalii (în engleză)
    
    reminder: 24,
    // după câte ore ar trebui să reapară mesajul
    // 0 = arată tot timpul

    reminderClosed: 150,
    // dacă utilizatorul închide mesajele, reapar după x ore

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // funcțiile de returnare au apărut după notificare / s-a apăsat pe ele / închise

    l: false,
    // setați o limbă fixă pentru mesaj, de ex. „Ro“. Acest lucru suprascrie detectarea implicită.

    test: false,
    // adevărat = arată întotdeauna în bară (pentru testare)

    text: "",
    // text de notificare personalizat (html)
    // Placeholders {brow_name} o să fie înlocuiți cu numele browser-ului, {up_but} cu conținutul link-ului actualizat și {ignore_but} cu conținutul link-ului de ignorare.
    // Exemplu: "Browser-ul tău este {brow_name}, prea vechi: <a{up_but}>actualizează</a> sau<a{ignore_but}>ignoră</a>."
    // mai multe detalii (în engleză)

    text_in_xx: "",
    // text de notificare personalizat pentru limba "xx"
    // ex. text_de pentru germană și text_it pentru italiană

    newwindow: true,
    // deschide link-ul într-o fereastră nouă

    url: null,
    // url la care să meargă după notificare

    noclose:false,
    // Nu arăta butonul "ignora" pentru a închide notificarea

    nomessage: false,
    // Nu afișați un mesaj în cazul în care browser-ul nu este actualizat, trebuie doar să apelați funcția de apelare inversă

    jsshowurl: "//browser-update.org/update.show.min.js",
    // URL în care script-ul afișează notificarea, este localizat. Se încarcă doar dacă utilizatorul are browser-ul nu este actualizat.

    container: document.body,
    // Elementul DOM în care notificarea a apărut.

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

    api: xxx
    // Aceasta este versiunea api-ului de actualizare a browser-ului folosit. Nu eliminați.

};
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" 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 notificare personalizat (html)
mai multe detalii (în engleză)
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
mai multe detalii (în engleză)
undefined dictionary or string
text_in_xx text de notificare personalizat pentru limba "xx"
ex. text_de pentru germană și text_it pentru italiană
mai multe detalii (în engleză)
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

Schimbați stilul

Următoarele reguli CSS sunt aplicate după notificare. Le puteți suprascrie în CSS. Pentru a face asta trebuie să specificați următoarele regului css: ex. 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;
    }