Mukauta ja testaa

Testaa koodi

Lisäämällä verkko-osoitteeseen #test-bu, näytetään ilmoitus aina. Esimerkki: http://browser-update.org/#test-bu. Varmista että sivu ladataan kokonaan uudelleen, avaamalla osoite selaimen uudessa välilehdessä.

Valinnat

Seuraavat vaihtoehdot voidaan välittää koodille:

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Määrittää vaaditut selain versiot
    // Tätä vanhempi selain saa huomautuksen.
    // f:22 ---> Firefox < 22 huomautetaan
    // Negatiiviset numerot määrittävät kuinka monta versiota jäljessä nykyisestä.
    // c:-5 ---> Chrome < 35  huomautetaan jos viimeisin Chrome versio on 40.
    // lisätietoja (englanniksi)
    
    reminder: 24,
    // monenko tunnin päästä ilmoituksen tulisi näyttää uudelleen
    // 0 = näytä aina

    reminderClosed: 150,
    // jos käyttäjä sulkee viestin se näytetään uudelleen x tunnin jälkeen

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // callback toiminnot kun ilmoitus on näytetty / klikattu / suljettu

    l: false,
    // aseta kiinteä kielivalinta viestille, esim "en". Tämä yliajaa oletusarvon tunnistuksen.

    test: false,
    // true = näytä ilmoitus aina (koekäyttö)

    text: "",
    // mukautettu ilmoitus teksti (html)
    // Paikkamerkit {brow_name} korvataan selaimen nimellä, {up_but} päivitys linkin sisällöllä sekä {ignore_but} mykistyksen linkin sisällöllä.
    // Esimerkki: "Selaimesi {brow_name} on liian vanha <a{up_but}>päivitä</a>, tai <a{ignore_but}>mykistä</a>."
    // lisätietoja (englanniksi)

    text_in_xx: "",
    // mukautettu ilmoitus teksti, kielelle "xx"
    // esim: text_de saksalle sekä text_it italialle

    newwindow: true,
    // avaa linkki uudessa ikkunassa/välilehdessä

    url: null,
    // osoite johon ilmoituksen klikkaaminen johtaa

    noclose:false,
    // Älä näytä "mykistä" nappia ilmoituksessa

    nomessage: false,
    // Älä näytä viestiä jos selain on vanhentunut, kutsu ainoastaan onshow callback toimintoa

    jsshowurl: "//browser-update.org/update.show.min.js",
    // URL jossa koodi, joka näyttää ilmoituksen, sijaitsee. Tämä ladataan ainoastaa mikäli käyttäjällä todella on vanhentunut selain.

    container: document.body,
    // DOM Elementti johon huomautus injektoidaan.

    no_permanent_hide: false
    // Älä anna käyttäjän mykistää ilmoitusta pysyvästi

    api: xxx
    // Tämä on browser-update rajapinnan (API) käytettävä version. Älä poista.

};

Parametri	Kuvaus	Arvot	Oletusarvo	Tyyppi
`style`	Ilmoituksen sijainti. Vaihtoehdot: "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`	mukautettu ilmoitus teksti (html) lisätietoja (englanniksi)		`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 lisätietoja (englanniksi)		`undefined`	dictionary or string
`text_in_xx`	mukautettu ilmoitus teksti, kielelle "xx" esim: text_de saksalle sekä text_it italialle lisätietoja (englanniksi)		`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

Muuta ulkoasua

Seuraavat CSS säännöt asetetaan ilmoituksen toimesta. Voit ylikirjoittaa ne omalla CSS määrityksellä, lisäämällä määrityksiä css-sääntöihin, kuten: 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;
    }