Browser-Update.org

Инициатива на уеб дизайнери за информиране на потребителите за нуждата от актуализация на браузъра

Персонализиране и тестване

Тестване на скрипта

Ако отворите уебсайта си с <code>#test-bu</code> приложен към Url-адреса, адресната лента винаги ще се показва. Например: <code>http://browser-update.org/#test-bu</code>. Уверете се, че страницата се е презаредила правилно, отваряйки Url-адреса в нов раздел на браузъра.

Опции

Следните опции могат да бъдат подадени на скрипта:

$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,
    // след колко часа би трябвало пак да се появи съобщението
    // 0 = винаги се показва

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

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // callback functions after notification has appeared / was clicked / closed

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

    test: false,
    // true = бара се показва винаги отгоре (за тестове)

    text: "",
    // custom notification text (html)
    // Placeholders {brow_name} will be replaced with the browser name, {up_but} with contents of the update link tag and {ignore_but} with contents for the ignore link.
    // Пример: Браузърът ви, {brow_name}, е твърде остарял: &lt;a{up_but}&gt;осъвременете&lt;/a&gt; или &lt;a{ignore_but}&gt;игнорирайте&lt;/a&gt;.

    text_xx: "",
    // custom notification text for language "xx"
    // e.g. text_de for german and text_it for italian

    newwindow: true,
    // отваряне на линка в нов прозорец/таб

    url: null,
    // the url to go to after clicking the notification

    noclose:false,
    // Без показване на бутона "Игнориране" за затваряне на известие

    nomessage: false,
    // Do not show a message if the browser is out of date, just call the onshow callback function

    jsshowurl: "//browser-update.org/update.show.min.js",
    // URL where the script, that shows the notification, is located. This is only loaded if the user actually has an outdated browser.

    container: document.body,
    // DOM Element where the notification will be injected.

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

    api: xxx
    // This is the version of the browser-update api to use. Please do not remove.

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

Промяна на стила

The following CSS rules are applied by the notification. You can overwrite them in your own CSS. To do so you need to add some more specificity to the css-rules: e.g. 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;
    }