Browser-Update.org

יוזמה של מעצבי רשת להתריע למשתמשים אודות עדכוני דפדפן

התאם אישית ובדוק

בדוק את ה- script

If you open your website with <code>#test-bu</code> appended to the url, the bar will always show up. Example: <code>http://browser-update.org/#test-bu</code>. Make sure the page is properly reloaded by opening the url in an new browser tab.

אפשרויות

ניתן למסור את האפשרויות הבאות ל- script:

$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,
    // if the user explicitly closes message it reappears after x hours

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

    l: false,
    // הגדר שפה קבועה עבור ההודעה, לדוגמה "en". פעולה זו מבטלת את זיהוי ברירת המחדל.

    test: false,
    // true = תמיד הצג את ה- bar (בשביל לבדוק)

    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.
    // דוגמה: Your browser, {brow_name}, is too old: &lt;a{up_but}&gt;update&lt;/a&gt; or &lt;a{ignore_but}&gt;ignore&lt;/a&gt;.

    text_xx: "",
    // טקסט התראה מותאם אישית עבור שפת "xx"
    // לדוגמה text_de עבור גרמנית ו text_it עבור איטלקית

    newwindow: true,
    // פתח קישור בחלון/לשונית חדשה

    url: null,
    // כתובת האתר למעבר לאחר לחיצה על ההודעה

    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" boolean
shift_down_page 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

שינוי סגנון

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