Browser-Update.org

Una iniciativa de diseñadores web para informar a los usuarios acerca de actualizaciones a los navegadores

Personalízalo y pruébalo

Prueba el script

Si abres tu sitio web con #test-bu añadido a la URL, la barra de notificación siempre se mostrará. Por ejemplo: http://browser-update.org/#test-bu. Asegúrate que la página esté completamente recargada abriendo la URL en una nueva pestaña.

Opciones

Las siguientes opciones pueden ser incluídas en el script:

$buoop = {
    notify: {i:8,f:25,o:17,s:9,c:22},  
    // Especifica qué versiones de navegadores deben ser notificadas. Números negativos especifican cuántas versiones anteriores a la versión actual deben ser notificadas.
 
    // 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,                  
    // luego de cuántas horas el mensaje debe volver a aparecer
    // 0 = mostrar siempre

    reminderClosed: 150,           
    // si el usuario cierra el mensaje, aparecerá de nuevo cada x horas

    onshow: function(infos){},     
    onclick: function(infos){},
    onclose: function(infos){},
    // función(es) a ejecutar luego de que la notificación apareció/fue clickeada/cerrada

    l: false,                       
    // establecer el idioma para el mensaje, por ejemplo: "en". Esto sobreescribe la detección por defecto.

    test: false,                    
    // true = siempre se muestra la barra (para realizar pruebas)

    text: "",                       
    // texto personalizado de notificación (HTML)
    // Los marcadores de posición {brow_name} se reemplazarán por el nombre del navegador, {up_but} con el contenido de la etiqueta del enlace de actualización e {ignore_but} con contenido para el enlace de ignorar.
    // Ejemplo: Su navegador, {brow_name}, es demasiado antiguo: <a{up_but}>actualizar</a> o <a{ignore_but}>ignorar</a>.

    text_xx: "",                    
    // texto de notificación personalizado para el idioma "xx"
                                  
    // por ejemplo: text_de para alemán y text_it para italiano

    newwindow: true,                
    // abre el enlace en una nueva ventana/pestaña

    url: null,                      
    // la URL a la que dirigirse luego de hacer clic en la notificación

    noclose:false,                  
    // No mostrar el botón "ignorar" para cerrar la notificación

    nomessage: false,               
    // No mostrar un mensaje si el navegador no está actualizado, solo llamar a la función de devolución de llamada onshow

    jsshowurl: "//browser-update.org/update.show.min.js", 
    // URL donde se encuentra el script que muestra la notificación. Esto solo se carga si el usuario tiene un navegador desactualizado.

    container: document.body, 
    // Elemento del DOM donde la notificación será introducida.

    api: xxx                        
    // Esta es la versión a usar de la api de browser-update. Por favor, no remover.

};

Cambia el estilo

La notificación aplica las reglas CSS siguientes. Las puedes sobrescribir en tu propio CSS. Para hacerlo necesitas añadir un poco más de especificidad a las reglas CSS: por ejemplo: 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;}
}