Browser-Update.org

Sebuah inisiatif oleh situs web untuk memberitahukan pengguna supaya memperbarui peramban mereka

Sesuaikan dan uji

Test script

Jika anda membuka website anda dengan penambahan <code>#test-bu</code> ke url, bar notifikasi akan selalu ditampilkan. Contoh: <code>http://browser-update.org/#test-bu</code>. Pastikan laman telah dimuat ulang dengan sempurna dengan membuka url pada tab peramban baru.

Pilihan

Pilihan berikut dapat dikirimkan ke script berikut:

$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,
    // setelah berapa jam seharusnya pesan kembali muncul
    // 0 = menampilkan semua waktu

    reminderClosed: 150,
    // jika pengguna secara eksplisit menutup pesan maka pesan tersebut akan kembali muncul setelah x jam

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // fungsi callback setelah notifikasi kembali muncul / di klik / ditutup

    l: false,
    // pilih bahasa tertentu untuk menampilkan pesan, misalnya "en". Hal ini akan menggantikan deteksi otomatis.

    test: false,
    // true = selalu menampilkan bar (untuk pengujian)

    text: "",
    // teks notifikasi pilihan (html)
    // Placeholder {brow_name} akan digantikan dengan nama peramban, {up_but} dengan isi dari tag link perbaruandan {ignore_but} dengan isi link untuk mengabaikan.
    // Contoh: Peramban anda, {brow_name}, terlalu usang: &lt;a{up_but}&gt;perbarui&lt;/a&gt; atau &lt;a{ignore_but}&gt;abaikan&lt;/a&gt;.

    text_xx: "",
    // teks pemberitahuan pilihan untuk bahasa "xx"
    // misalnya text_de untuk Bahasa Jerman dan text_it untuk Bahasa Italia

    newwindow: true,
    // membuka pranala di window/tab baru

    url: null,
    // url tujuan setelah notifikasi di klik

    noclose:false,
    // Jangan tampilkan tombol "abaikan" untuk menutup notifikasi

    nomessage: false,
    // Jangan tampilkan pesan jika peramban terlalu usang, langsung panggil fungsi onshow callback

    jsshowurl: "//browser-update.org/update.show.min.js",
    // URL tempat script yang akan menampilkan notifikasi diletakkan. URL ini hanya akan di muat jika pengguna memang memiliki peramban yang usang.

    container: document.body,
    // Elemen DOM dimana notifikasi akan dimasukkan.

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

    api: xxx
    // Ini adalah versi API browser-update untuk digunakan. Harap jangan dihilangkan.

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

Ubah gaya tampilan

Aturan CSS berikut ini diterapkan oleh notifikasi. Anda dapat menimpanya dalam CSS anda sendiri. Untuk melakukannya, anda harus menambahkan beberapa aturan khusus di bagian css-rules: misalnya 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;
    }