Browser-Update.org

Inicjatywa twórców witryn mająca na celu informowanie użytkowników o potrzebie aktualizowania swoich przeglądarek

Dostosuj i przetestuj

Przetestuj skrypt

Komunikat pojawi się zawsze, gdy otworzysz swój serwis z #test-bu dołączonym do URL. Przykład: http://browser-update.org/#test-bu. Upewnij się, że strona przeładowała się poprawnie otwierając URL w nowej karcie przeglądarki. więcej szczegółów (po angielsku)

Ustawienia

Do skryptu można przekazać następujące opcje:

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Określa wymagane wersje przeglądarki
    // Powiadomienie pojawi się dla przeglądarek starszych niż ta.
    // f:22 ---> Firefox < 22 otrzymuje powiadomienie
    // Liczby ujemne określają liczbę wersji przed bieżącą.
    // c:-5 ---> Chrome < 35  otrzymuje powiadomienie, jeżeli najnowsza wersja Chrome to 40.
    // więcej szczegółów (po angielsku)
    
    reminder: 24,
    // po ilu godzinach komunikat powinien pojawić się ponownie
    // 0 — pokazuj cały czas

    reminderClosed: 150,
    // jeśli użytkownik zamknie komunikat, zostanie on wyświetlony ponownie po × godzinach

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // funkcje zwrotne po pojawieniu się / naciśnięciu / zamknięciu komunikatu

    l: false,
    // ustaw stały język komunikatu, np. „en” (angielski); przesłania to domyślne wykrywanie języka.

    test: false,
    // true – zawsze wyświetla pasek (do testów)

    text: "",
    // niestandardowy tekst powiadomienia (HTML)
    // Symbole „{brow_name}”, „{up_but}” i „{ignore_but}” zostaną zastąpione odpowiednio: nazwą przeglądarki, treścią znacznika z odnośnikiem aktualizacji i treścią znacznika z odnośnikiem ignorowania.
    // Przykład: "Twoja przeglądarka, {brow_name}, jest zbyt stara: <a{up_but}>zaktualizuj</a> lub <a{ignore_but}>zignoruj</a>."
    // więcej szczegółów (po angielsku)

    text_in_xx: "",
    // niestandardowe powiadomienie dla języka „××”
    // np. „text_de” dla niemieckiego, czy „text_it” dla włoskiego

    newwindow: true,
    // otwórz link w nowym oknie lub w nowej karcie

    url: null,
    // adres przekierowania po naciśnięciu powiadomienia

    noclose:false,
    // Nie pokazuj przycisku ignorowania do zamykania powiadomienia

    nomessage: false,
    // Nie pokazuj komunikatu, jeśli przeglądarka jest nieaktualna, wywołaj tylko funkcję zwrotną „onshow”

    jsshowurl: "//browser-update.org/update.show.min.js",
    // URL, gdzie jest zlokalizowany jest skrypt, który pokazuje powiadomienie. Jest on ładowany tylko, jeżeli użytkownik faktycznie ma starszą przeglądarkę.

    container: document.body,
    // Element DOM do którego zostanie wstrzyknięte powiadomienie.

    no_permanent_hide: false
    // Nie dawaj użytkownikowi możliwości trwałego ukrycia powiadomienia

    api: xxx
    // To jest wersja API browser-update do wykorzystania. Nie usuwaj jej.

};
Parametr Opis Wartości Wartość domyślna Typ
style Położenie, w którym wyświetlone powiadomienie. Dostępne możliwości to: "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 niestandardowy tekst powiadomienia (HTML)
więcej szczegółów (po angielsku)
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
więcej szczegółów (po angielsku)
undefined dictionary or string
text_in_xx niestandardowe powiadomienie dla języka „××”
np. „text_de” dla niemieckiego, czy „text_it” dla włoskiego
więcej szczegółów (po angielsku)
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

Zmień styl

Podane reguły CSS zastosowane są przez to powiadomienie. Możesz nadpisać je w swoim własnym CSS. Żeby to zrobić musisz dodać więcej szczegółów do reguł CSS: np. 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;
    }