Browser-Update.org

Tarayıcı güncellemeleri hakkında kullanıcıları bilgilendirmek için web tasarımcılar tarafından oluşturulmuş bir girişim

Özelleştir ve test et

Kodu test et

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

Append #ignorecookie-bu to test the detection. This will only show the bar in browsers configured to be outdated. It will ignore the cookie set to show the notification only once a day and show the notification every time you load the page.

Seçenekler

The following options can be passed to the script:

$buoop = {
    notify: {i:8,f:25,o:17,s:9,c:22},  
    // Bildirilecek tarayıcı sürümlerini belirtir. Negatif sayılar, bildirilecek geçerli sürümün arkasındaki sürüm sayısını belirtir.
 
    // f:22 ---> Firefox <= 22
    // c:-5 ---> Chrome <= 35 if current Chrome version is 40.
        // more info

    reminder: 24,                  
    // mesaj ne kadar saat sonra tekrar ortaya çıkmalı
    // 0 = her zaman göster

    reminderClosed: 150,           
    // eğer kullanıcı mesajı açıkça kapatırsa x saat sonra tekrar görüntülenir

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

    l: false,                       
    // set a fixed language for the message, e.g. "en". This overrides the default detection.

    test: false,                    
    // true = çubuğu her zaman göster (test için)

    text: "",                       
    // özel bildirim metni (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.
    // Örnek: Your browser, {brow_name}, is too old: <a{up_but}>update</a> or <a{ignore_but}>ignore</a>.

    text_xx: "",                    
    // dil için özel bildirim metni "xx"
                                  
    // e.g. text_de for german and text_it for italian

    newwindow: true,                
    // bağlantıyı yeni pencerede aç / sekme

    url: null,                      
    // bildirimi tıkladıktan sonra gitmek istediğiniz url

    noclose:false,                  
    // Bildirimi kapatmak için " yoksay " düğmesini gösterme

    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, 
    // Bildirimin verileceği DOM ögesi.

    style: "top"
    // The position where the notification should be shown. Available options are:"top", "bottom", "corner"

    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.

};

Tarzı değiştir

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 {
    background-position: 8px 17px; 
    position:absolute;
    position:fixed;
    z-index:111111;    
    width:100%; 
    top:0px; 
    left:0px;    
    border-bottom:1px solid #A29330;    
    text-align:left; 
    cursor:pointer;        
    background-color: #fff8ea;    
    font: 17px Calibri,Helvetica,Arial,sans-serif;    
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.buorg div { 
    padding: 11px 12px 11px 30px;  
    line-height: 1.7em; 
}
.buorg div a,.buorg div a:visited { 
    text-indent: 0; 
    color: #fff;    
    text-decoration: none;    
    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; 
    text-indent: 22px;
    line-height: 1.3em;
}
.buorg {
    background-position: 9px 8px;}
}