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 = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Spécifie les versions de navigateurs nécessaires
    // Les navigateurs plus anciens que cela seront notifiés.
    // f:22 ---> Firefox < 22 être notifié
    // Les nombres négatifs montrent combien il y a de versions derrière la version actuelle.
    // c:-5 ---> Chrome < 35  être notifié si la dernière version de Chrome est 40.
    // plus de détails (en anglais)
    
    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 : &lt;a{up_but}&gt;Mettre à jour&lt;/a&gt; or &lt;a{ignore_but}&gt;Ignorer&lt;/a&gt;.

    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 du script qui montre la notification. Ce script est chargé uniquement si l'utilisateur utilise un navigateur non à jour.

    container: document.body,
    // Élément du DOM où la notification sera injecté.

    no_permanent_hide: false
    // Ne pas donner à l'utilisateur la possibilité de définitivement cacher la notification

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

};
Paramètre Description Valeurs Valeur par défaut Type
style Position ou la notification devrait apparaître. Les options disponibles sont : "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

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