Bloquear la pantalla con javascript

Hay ocasiones en las aplicaciones web que nos interesa bloquear la pantalla del navegador para impedir al usuario interactuar con la aplicación.
Un ejemplo es durante una llamada ajax que tarda un cierto tiempo y queremos mostrar el típico mensaje "loading" y poner el fondo con un tono oscuro, o para pedir nombre de usuario y contraseña.

Una solución simple para este problema consiste en poner un div que ocupe toda la pantalla y se sitúe por encima del resto de componentes. Así todos los clicks del ratón se realizarán sobre nuestro div en vez de sobre el botón que se ve debajo.
Después, mediante javascript muestras el div bloqueador. No te olvides de proporcionar alguna forma para quitar este elemento.
Estas propiedades del div se pueden especificar en una clase css

.blocker {
position: absolute;
top: 0px;
left: 0px;
height:100%;
width:100%;        /* hacemos que ocupe toda la pantalla a cualquier resolución*/
z-index: 50;        /* lo colocamos por encima del resto de componentes*/
background: url(b.png) repeat;  /*Color de fondo semitransparente*/
}

Si queremos añadir algun mensaje o una ventana con la que se desee interactuar, solo tenemos que colocar un div que quede por encima del anterior.

.popup{
z-index: 100;                     /* un z-index mayor al del blocker */
background-color: white;  /* Un color de fondo para que se vea sobre la capa anterior*/
}

Ver ejemplo de bloqueo de pantalla

Si usas jQuery (o librerias similares) dispondrás de buenos plugins (como facebox) para hacer esto mismo con muchas mas opciones y efectos.

Leave a Comment

May 23, 2008 · Filed under javascript

checkbox y evento onclick

Si alguna vez has usado la funcion toggle de jQuery con un checkbox habrás comprobado que las acciones del toggle se ejecutan, pero el checkbox no se marca (o no se desmarca).
Esto ocurre porque estamos reemplazando el comportamiento nativo del checkbox por el nuestro propio. Para evitar este comportamiento, debemos registrar el listener con el evento onchange o el evento onclick. (NOTA: Parece ser que internet explorer 6 no maneja bien el evento onchange).

Para solucionar este problemilla, podemos escribir nuestra propia función toggle para checkboxes:

$('#checkbox').click(function(){
  if (this.checked) alert('checkbox activado');
  else alert('checkbox desactivado')                
});

Aqui puedes ver un ejemplo completo

Comments (2)

March 19, 2008 · Filed under javascript

Tablesorter (jQuery plugin) en ie6

Hace poco intentaba el plugin de jQuery Tablesorter, el cual permite añadir cabeceras ordenables a tus tablas.

Al ser una librería javascript, da igual si has creado las tablas con html puro, con php, jsf, etc...

Según la página el plugin es compatible con Internet Explorer 6, pero a mi me salía un error de javascript diciendo "El objeto no acepta esta propiedad o método".

Tras un poco de investigación descubrí que resulta que hay un bug en la versión "pack" de tablesorter (jquery.tablesorter.pack.js) y no funciona en ie6. Usando la versión "min" (jquery.tablesorter.min.js) o la normal (jquery.tablesorter.js), el plugin funciona perfectamente.

PD: Prueba la extensión jquery.tablesorter.pager para la paginación de las tablas.

Comments (1)

January 28, 2008 · Filed under javascript