Browser-Update.org

ความคิดริเริ่มจากเว็บไซต์เพื่อแจ้งให้ผู้ใช้ปรับปรุงเว็บเบราว์เซอร์ของพวกเขา

การปรับแต่งและทดสอบ

ทดสอบสคริปต์

หากคุณเปิดเว็บไซต์ของคุณด้วย #test-bu ต่อท้าย URL แถบแจ้งเตือนจะแสดงขึ้นอยู่เสมอ ตัวอย่างเช่น: http://browser-update.org/#test-bu กรุณาทำให้แน่ใจว่าหน้าเว็บได้โหลดอย่างถูกต้องโดยการเปิด URL ในแท็บเบราว์เซอร์ใหม่ รายละเอียดเพิ่มเติม (เป็นภาษาอังกฤษ)

ตัวเลือก

ตัวเลือกต่อไปนี้สามารถส่งผ่านไปยังสคริปต์:

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Legt die benötigten Browserversionen fest
    //  
    // 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.
    // รายละเอียดเพิ่มเติม (เป็นภาษาอังกฤษ)
    
    reminder: 24,
    // หลังจากกี่ชั่วโมงข้อความจึงจะปรากฏขึ้นอีกครั้ง
    // 0 = แสดงตลอดเวลา

    reminderClosed: 150,
    // ถ้าผู้ใช้ตั้งใจปิดข้อความ มันจะปรากฏขึ้นอีกครั้งหลังจาก x ชั่วโมง

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // ฟังก์ชั่น Callback จะปรากฎหลังจากการเเจ้งเตือนถูกปิด

    l: false,
    // ตั้งแก้ไขการแปลสำหรับข้อความ e.g "en". การแทนที่นี้จะถูกตรวจสอบ

    test: false,
    // true = แสดงแถบแจ้งเตือนตลอดเวลา (สำหรับการทดสอบ)

    text: "",
    // ตั้งค่าการแจ้งเตือนเอง (html)
    // notot
    // ตัวอย่าง: "Your browser, {brow_name}, is too old: <a{up_but}>update</a> or <a{ignore_but}>ignore</a>."
    // รายละเอียดเพิ่มเติม (เป็นภาษาอังกฤษ)

    text_in_xx: "",
    // ข้อความแจ้งเตือนที่กำหนดเองสำหรับภาษา "xx"
    // เช่น text_de สำหรับภาษาเยอรมันและ text_it สำหรับภาษาอิตาลี

    newwindow: true,
    // เปิดลิงก์ในหน้าต่าง/แท็บใหม่

    url: null,
    // URL ที่จะไปหลังจากคลิกแจ้งเตือน

    noclose:false,
    // 通知を閉じる際に「無視する」ボタンを表示しない

    nomessage: false,
    // Ne ne pas afficher un message si le navigateur est obsolète, appeler simplement la fonction de callback « onshow »

    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입니다.

    no_permanent_hide: false
    // Do not give the user the option to permanently hide the notificationAlt+Enter

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

};
Parameter รายละเอียด Values ค่าเริ่มต้น (Automatic Translation) Type
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 ของคุณเอง ในการทำเช่นนั้นคุณจะต้องเพิ่มบางอย่างที่เฉพาะเจาะจงมากขึ้นลงไปในกฎ 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;
    }