Alinear verticalmente centrado divs con jQuery

Este pequeño plugin de jQuery sirve para alinear verticalmente casi cualquier elemento cuando no quieres determinar la altura exacta del contenedor.

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
    return this.each(function(i){
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah) / 2);
    $(this).css('margin-top', mh);
    });
};
})(jQuery);

Para usar el código solo tienes que agregar la clase o identificador como: $('.classname').vAlign(); o $('#image').vAlign(); – Esto tiene que suceder una vez que el documento haya cargado así que tiene que estar dentro de $(document).ready(function(){})

Gracias a ATOMIKU.COM que lo escribió en ingles: Simple jQuery plugin for vertically centering

Como hacer una redirección de página con JavaScript

Hay dos formas generales de hacer esta redirección:

// Comportamiento similar a una redirección HTTP (HTTP redirect)
window.location.replace("http://corchoweb.com");

// Comportamiento similar a un click en un vínculo
window.location.href = "http://corchoweb.com";

La estructura completa del documento puede ser así:

<!doctype html>
<html lang="en">
<head>
	<script type="text/javascript">
	<!--
	window.location.replace("http://corchoweb.com");
	//-->
	</script>
</head>
<body>
<!-- solo para tener estructura html5 -->
</body>
</html>

Expande filas de tabla con jQuery – jExpand plugin

Janko At Warp Speed hizo un mini plugin para expandir filas dentro de una tabla (es decir los <tr> de una </table>) para poder expandir la información.

Lo puedes usar como plugin si crees que lo vas a usar en mas de una tabla o puedes escribir los comandos dentro de tu archivo personalizado de .js por que son muy breves.

Lee el artículo completo en: Expand table rows with jQuery – jExpand plugin – Janko At Warp Speed.

Y puedes ver el demo o descargartelo con ejemplos.

Arreglo: z-index de youtube y flash encima de todo

Trabajando hace unos días con un menú desplegable con jQuery noté que en ves de desplegarse por encima del video de youtube el menú se esconde detrás del video.

Primero pensé que era un problema de z-index, pero luego de pelear un rato con los posicionamientos y distintos valores de z-index pensé que sería un problema distinto.

El problema está en el browser pone los objetos flash (no solo los videos de youtube) encima de todos los objetos. http://kb2.adobe.com/cps/155/tn_15523.html y por eso hay que asignarle wmode=opaque o wmode=transparent al embed o código que va a producir el SWF.

En el caso de youtube esto se resuelve simplemente colocando ?wmode=opaque al final del código de embed de crea youtube para iframes.

El código original

<iframe width="560" height="315"
src="http://www.youtube.com/embed/xxxxxxx"
frameborder="0" allowfullscreen></iframe>

El código con el wmode aplicado

<iframe width="560" height="315"
src="http://www.youtube.com/embed/xxxxxxx?wmode=opaque"
frameborder="0" allowfullscreen></iframe>

Esta explicación la hace detalladamente Max Morgan en su artículo Fix youtube iframe overlay and z-index issues y donde incluso propone una solucion para automatizarlo vía jQuery.

Luego hizo una adaptación para cuando el codigo ya tiene variables escritas en donde escribes el código al final de toda la dirección

Código con varibles

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0

Código con varibles y wmode

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0&wmode=opaque

Teniendo cuidado que es probable que luego de una variable es probable que el ?wmode tenga que ser con un “&” &wmode

Te sirvió? Soy todo ojos.

Actualización: Jair nos escribió una forma de cambiar el atributo wmode via jQuery

$(document).ready(function() {
	$(“iframe”).each(function(){
		var ifr_source = $(this).attr(‘src’);
		var wmode = “wmode=opaque”;
		if(ifr_source.indexOf(‘?’) != -1) {
			var getQString = ifr_source.split(‘?’);
			var oldString = getQString[1];
			var newString = getQString[0];
			$(this).attr(‘src’,newString+’?'+wmode+’&’+oldString);
		} else {
			$(this).attr(‘src’,ifr_source+’?'+wmode);
		};
	});
});