Browser-Update.org

Et initiativ fra webdesignere som informerer brugerne om browser-opdateringer

Tilpas og test

Test scriptet

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.

Indstillinger

Følgende indstillinger kan blive sendt til scriptet:

$buoop = {
    notify: {i:8,f:25,o:17,s:9,c:22},  
    // Angiver browser versioner som skal advares. Negative tal angiver hvor mange gamle versioner som skal understøttes.
 
    // f:22 ---> Firefox <= 22
    // c:-5 ---> Chrome <= 35 if current Chrome version is 40.
    // c:"-5m" ---> Chrome versions which are older than 3 months

    reminder: 24,                  
    // efter hvor mange timer beskeden skal vises igen
    // 0 = vis altid

    reminderClosed: 150,           
    // hvis brugeren specifikt lukker beskeden, kommer den igen efter x timer

    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 = vis altid baren (for tests)

    text: "",                       
    // custom notification 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.
    // Eksempel: Your browser, {brow_name}, is too old: <a{up_but}>update</a> or <a{ignore_but}>ignore</a>.

    text_xx: "",                    
    // custom notification text for language "xx"
                                  
    // e.g. text_de for german and text_it for italian

    newwindow: true,                
    // åbn link i et nyt vindue/faneblad

    url: null,                      
    // the url to go to after clicking the notification

    noclose:false,                  
    // Do not show the "ignore" button to close the notification

    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.

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

    api: xxx                        
    // This is the version of the browser-update api to use. Please do not remove.

};

Change the style

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