Browser-Update.org

Une initiative de WebDesigners pour informer les utilisateurs sur les mises à jour de leur navigateur

Personnaliser et tester

Tester le script

Si vous ouvrez votre site avec #test-bu ajouté à l'url, la barre apparaîtra toujours. Exemple: http://browser-update.org/#test-bu. Assurez-vous que la page est correctement rechargée en ouvrant l'url dans un nouvel onglet du navigateur.

Options

Les options suivantes peuvent être passées au script :

$buoop = {
    notify: {i:8,f:25,o:17,s:9,c:22},  
    // Spécifie les versions du navigateur à notifier. Les nombres négatifs indiquent le nombre de version derrière la version actuelle à notifier.
 
    // 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,                  
    // après combien d'heures le message devrait-il réapparaître
    // 0 = toujours afficher

    reminderClosed: 150,           
    // si le visiteur ferme explicitement le message, il réapparaît après x heures

    onshow: function(infos){},     
    onclick: function(infos){},
    onclose: function(infos){},
    // fonctions de rappel après que la notification a été publiée / a été cliquée / fermée

    l: false,                       
    // définir un langage fixe pour le message, ex. "fr". Cela remplace la détection par défaut.

    test: false,                    
    // true = affiche toujours la barre (pour les tests)

    text: "",                       
    // personnaliser la notification (html)
    // La balise {brow_name} sera remplacée par le nom du navigateur, {up_but} par le contenu du lien de mise à jour et {ignore_but} par le contenu du lien « Ignorer ».
    // Exemple : Votre navigateur, {brow_name}, est trop ancien : <a{up_but}>Mettre à jour</a> or <a{ignore_but}>Ignorer</a>.

    text_xx: "",                    
    // texte de notification personnalisé pour la langue "xx"
                                  
    // ex. Text_de pour allemand et text_it pour italien

    newwindow: true,                
    // ouvre le lien dans un nouvel onglet/fenêtre

    url: null,                      
    // L'URL à consulter après avoir cliqué sur la notification

    noclose:false,                  
    // Ne pas afficher le bouton « Ignorer » pour fermer la notification

    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 where the notification will be injected.

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

    api: xxx                        
    // La version de l'api browser-update à utiliser. Merci de ne pas retirer.

};

Changer le style

Les règles CSS suivantes sont appliquées par la notification. Vous pouvez les écraser dans votre propre CSS. Pour ce faire, vous devez ajouter un peu plus de spécificité aux règles css : ex. 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;}
}