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 <code>#test-bu</code> atașat la url, bara o să apară întotdeauna. Exemplu: <code>http://browser-update.org/#test-bu</code>. Asigurați-vă că pagina este reîncărcată, deschizând url-ul într-o nouă filă.

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.
    // more details (in english)
    
    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: &lt;a{up_but}&gt;actualizează&lt;/a&gt; sau&lt;a{ignore_but}&gt;ignoră&lt;/a&gt;.

    text_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" boolean
shift_down_page 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

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