Browser-Update.org

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.

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.

};

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