Mensaje Javascript

---

Un problema o dilema común en los sitios web, es el decidir la estrategia para mostrar mensajes al usuario, ya sean informativos, correctivos, de alarma, etc.

La función alert de javascript se ha convertido en un dolor de cabeza ya que afecta la navegabilidad de nuestro sitio, aparte hay que tomar en cuenta que el icono del diálogo muestra algo que le puede dar a entender al usuario que algo malo está pasando.

A mí me ha gustado mucho utilizar una alternativa que me permite deslizar un mensaje en la parte superior y que después de un tiempo éste desaparece de forma automática.    No impide la navegabilidad del sitio, no es agresivo y es muy sencillo de programar.

Comencemos por colocar un elemento DIV en la parte superior de un documento HTML (con referencia a jquery) en blanco:

<div style="height: 20px; width: 100%; position: fixed; top: 0px; left: 0px; margin: 0px; background-color: #264182; color: #FFFFFF; font-size: 15px; text-align: center; padding-top: 4px; padding-bottom: 4px; font-family: Verdana;">Código y Datos</div>

Tenemos un contenedor de 20px de alto con un posicionamiento de tipo fixed que nos permitirá mostrar el mensaje sin importar la posición del scroll en el navegador del visitante.   Le hemos dado un padding superior e inferior para centrar verticalmente el mensaje.

Ahora vamos a agregar un botón que nos permita experimentar un poco con jquery para ir construyendo el código necesario para mostrar nuestro mensaje.

<br /><br /><input type="button" value="Hide message" onclick="return hideMessage()" />

He colocado unos saltos de línea para que el mensaje no tape a nuestro botón.

Ahora lo que haremos es una pequeña animación que moverá el mensaje hacia arriba hasta que desaparezca:

<script type="text/javascript">
    function hideMessage() {
        $('#message').animate({
            'top': -28
        });
        return false;
    }
</script>

Veamos que estamos moviendo 28px y no 20px, esto se debe a que tenemos que sumar los 4px del padding superior y los 4px del padding inferior que actualmente tiene nuestro elemento DIV.

Visitemos nuestra página y veremos que ya se oculta el mensaje.

Ahora agregaremos otro botón para mostrar el mensaje:

<input type="button" value="Display message" onclick="return displayMessage()" />

Y agregaremos su función (dentro del bloque <script>) javascript correspondiente:

function displayMessage() {
    $('#message').animate({
        'top': 0
    });
    return false;
}

Si volvemos a ejecutar nuestra página de prueba, veremos que ya podemos ocultar el mensaje mediante una animación y también podemos mostrarlo mediante una animación.

Bueno, tenemos las dos funciones básicas para mostrar el mensaje

Ahora generamos otro archivo HTML (con referencia a jquery) donde tendremos nuestro código final y agregamos un botón para mandar a llamar a nuestra función:

<input type="button" value="Show message" onclick="return showMessage('Código y datos')" />

Nuestra función showMessage(msg) deberá:

1. Construir un elemento DIV.
2. Establecer todas las propiedades para su estilo.
3. Ingresar el texto del mensaje en el elemento DIV.
4. Agregar nuestro elemento DIV al documento.
5. Animar el elemento DIV para que se muestre, después de 3.5 segundos animar el elemento DIV para ocultarlo y descargarlo del DOM (destruirlo)

Iremos construyéndola paso a paso para hacer claro el ejemplo:

<script type="text/javascript">
function showMessage(msg) {
//1.
    var message = $('<div></div>');

//2. Notar que la propiedad top comienza con un valor de -28px para que no se vea el elemento DIV al momento de inyectarlo al DOM.
    message.css({
        'height': '20px',
        'width': '100%',
        'position': 'fixed',
        'top': '-28px',
        'left': '0px',
        'margin': '0px',
        'background-color': '#264182',
        'color': '#FFFFFF',
        'font-size': '15px',
        'text-align': 'center',
        'padding-top': '4px',
        'padding-bottom': '4px',
        'font-family': 'Verdana'
    });

//3.
    message.text(msg);

//4.
    $(document.body).append(message);

//5.
    message.animate(
        { 'top': '0px' },
        'normal',
        null,
        function() {
            window.setTimeout(function() {
                message.animate({ 'top': '-28px' }, 'normal', null, function() { message.remove(); });
            }, 3500);
        }
    );
</script>

Es probable que el punto 5 resulte un tanto confuso debido a su redacción, pero no es tan complejo como parece:

1. El primer parámetro de la función animate nos permite determinar las propiedades del estilo que queremos modificar
2. El segundo parámetro dicta la velocidad de la animación.
3. El tercer parámetro es el nombre de la función que determina el tipo de animación a aplicar (funciones matemáticas que calculan cómo se moverá el objeto, jquery tiene la animación linear por defecto).
4. El cuarto parámetro es la función que se ejecutará una vez que la animación haya finalizado, a este parámetro se le llama callback.

En el callback de la animación estamos agregando una función que se ejecutará en 3500 milisegundos.

Se podrá notar que volvemos a ocupar la función animate para ocultar el elemento DIV y su callback destruye el objeto message.

En la siguiente entrada le agregaremos algunas opciones a nuestra función para hacerla mucho más llamativa.