Algo recurrente que todo diseñador web necesita en algún momento es el poder centrar una imagen verticalmente. A lo largo de los años se han propuesto varias soluciones que, por un motivo u otro no funcionaban correctamente. Ya que por CSS nos quedamos cortos para centrar la imagen si no tiene una altura fija, vamos a hacerlo ayudándonos de Javascript / JQuery.
$(window).load(function(){//Se espera a que se cargue la página antes de ajustar la posicion. Si no no encontrará la imagen.var altura_div = $(".contenedor").css("height");//La propiedad height debe estar definida en el css o en el código, sino no funcionará
altura_div = altura_div.slice(0,-2);//Quitamos la cadena "px".
$(".imagen").each(function(){//para cada imagen, si sólo será 1 imagen no es necesario el bucle eachvar altura_img = $(this).attr("height");//Altura de la imagenvar resto_altura = Math.round((altura_div - altura_img)/2);//Restamos la altura del div con la altura de la imagen, la dividimos entre dos y la redondeamos
$(this).css("position","relative").css("top", resto_altura);//Centramos la imagen relativamente con la altura que acabamos de calcular
$(".contenedor").css("visibility","visible");//Como se ve como se modifica la posición de la imagen hemos optado por definir el DIV en el CSS como invisible, y aquí lo mostramos, una vez que hemos colocado la imagen en su sitio.});})
Un recurso muy utilizado en javascript es ejecutar una función con un retardo mediante la funcion setTimeout. En ocasiones necesitamos pasar parámetros a las funciones que llamamos, pero al hacerlo en este caso javascript nos devuelve un error.
Si tenemos la función incrementarVar(param1, param2) y queremos llamarla dentro de un timeOut definiremos una función anónima, y dentro de ella llamaremos a la función. Veamos un ejemplo erróneo y uno correcto:
