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 = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Specifies required browser versions
    // Browsers older than this will be notified.
    // f:22 ---> Firefox < 22 gets notified
    // Negative numbers specify how much versions behind current version.
    // c:-5 ---> Chrome < 35  gets notified if latest Chrome version is 40.
    // más detalles (en inglés)
    
    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: &lt;a{up_but}&gt;actualizar&lt;/a&gt; o &lt;a{ignore_but}&gt;ignorar&lt;/a&gt;.

    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.

    no_permanent_hide: false
    // Do not give the user the option to permanently hide the notification

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

};
Parameter Description Values Default value Type
style The position where the notification should be shown. Available options are: "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

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