Browser-Update.org

Инициатива веб-дизайнеров по информированию пользователей о необходимости обновить браузер

Изменить и проверить

Проверить скрипт

Если добавить к адресу сайта #test-bu, то сообщение будет отображаться всегда. Например: http://browser-update.org/#test-bu. Убедитесь, что сообщение появляется всегда, открыв ссылку в новой вкладке. более подробная информация (на английском)

Параметры

Скрипту могут быть переданы следующие параметры:

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Определяет необходимую версию браузера
    // В браузере старше указанного будет показано уведомление.
    // f:22 ---> Firefox < 22 уведомление будет показано
    // Отрицательные значения указывают на сколько версий браузер может быть старше относительно текущей актуальной.
    // c:-5 ---> Chrome < 35  уведомление будет показано, если последняя версия Chrome 40.
    // более подробная информация (на английском)
    
    reminder: 24,
    // через сколько часов сообщение появится снова
    // 0 = показывать всегда

    reminderClosed: 150,
    // через сколько часов сообщение появится снова, если пользователь его явно закрыл

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // функции выполняемые при появлении уведомления, нажатии по нему, его закрытии

    l: false,
    // устанавливает статичный язык сообщения (например "en"). Это предотвратит автоматическое определение языка.

    test: false,
    // true = всегда показывать панель (для тестирования)

    text: "",
    // измененный текст уведомления (HTML)
    // {brow_name} будет заменено на название браузера, {up_but} на ссылку для обновления браузера, {ignore_but} на ссылку для игнорирования.
    // Пример: "Ваш браузер, {brow_name}, сильно устарел: <a{up_but}>обновить</a> или <a{ignore_but}>игнорировать</a>."
    // более подробная информация (на английском)

    text_in_xx: "",
    // измененный текст уведомления для языка "xx"
    // например text_de для немецкого и text_it для итальянского языка

    newwindow: true,
    // открыть ссылку в новом окне/вкладке

    url: null,
    // ссылка для перехода после нажатия на уведомление

    noclose:false,
    // Не показывать кнопку "Игнорировать" для закрытия уведомления

    nomessage: false,
    // Не показывать сообщение, если браузер устарел, а просто вызвать функцию onshow

    jsshowurl: "//browser-update.org/update.show.min.js",
    // Ссылка, где расположен скрипт отвечающий за отображение уведомления. Скрип загружается только если у пользователя устаревший браузер.

    container: document.body,
    // Элемент DOM куда будет вставлено уведомление.

    no_permanent_hide: false
    // Не давать пользователю право скрыть уведомление навсегда

    api: xxx
    // Это версия API. Пожалуйста, не удаляйте.

};
Статистика Описание Значения Значение по-умолчанию Тип
style Расположение уведомления. Доступные варианты: "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 измененный текст уведомления (HTML)
более подробная информация (на английском)
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
более подробная информация (на английском)
undefined dictionary or string
text_in_xx измененный текст уведомления для языка "xx"
например text_de для немецкого и text_it для итальянского языка
более подробная информация (на английском)
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

Изменить стиль

Приведенные ниже CSS стили будут применены к уведомлению. Вы можете перезаписать их своими. Для этого нужно создать дополнительные CSS-правила, например: 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;
    }