• Añadido soporte de pie de foto: Segundo parámetro de la funcion open() o el atributo ‘title’ de la imagen.
• Añadido atributo ‘effect’ para definir la animación al aparecer/desaparecer. De momento disponibles ‘bounce’ (por defecto) o ‘easeout’.
• Haciendo click fuera de la imagen esta se cierra (ya no se cierra al hacer click en ella).
• Ya no es necesario declarar el objeto JSPopViewer al final del documento.
• Corregido problema comprobar si la imagen ha cargado.
• Corregido problema comprobar el tamaño de la imagen en IE.
• Corregidos algunos problemas con los estilos.

Se puede descargar en el siguiente enlace: [Descargar]

Este pequeño plugin jQuery ayudará a detectar cambios de tamaño en cualquier elemento HTML, lanzando un evento onResize ‘casi’ en el momento del cambio.

$.fn.addOnResizeEvent = function(custom_options) {
 
	var options = {
		timeInterval : 100,
		forceIE : false
	}
 
	$.extend( custom_options, options );
 
	// Soporte nativo IE
	if ($.browser.ie && !options.forceIE) return;
 
	return this.each( function() {
 
		var target = $(this);
		var lw, lh;
 
		var interval = setInterval( function() {
 
			var w = target.width(),
				h = target.height();
 
			if (!lw == undefined) lw = w;
			if (!lh == undefined) lh = h;
 
			if ( lw != w || lh != h )
			{
				lw = w;
				lh = h;
				target.trigger( "resize" );
			} 
 
		}, options.timeInterval );
 
	} );
 
};

Y su modo de uso:

$("div.miDiv").addOnResizeEvent()
 
$("div.miDiv").resize( function() {
	alert("Cambié de tamaño");
} );

En caso de estar navegando con Internet Explorer este plugin no tendrá efecto dejando la activación del evento nativa. Sin embargo, puede forzarse pasandole un parametro ‘forceIE‘ como ‘true‘.

Además, permite modificar el tiempo entre chequeos de tamaño por el parámetro ‘timeInterval‘, indicando la espera en milisegundos.

El modo de asignar los parámetros es el siguiente:

$("div.miDiv").addOnResizeEvent({
	timeInterval : 200,
	forceIE : true
})

Una última recomendación, y por temas de rendimiento, es la de asignar esta función solamente a aquellos elementos que quiera registrarse un cambio de tamaño.

Primero, necesitamos asignar un estilo a la letra a resaltar. Optaremos por un simple subrayado.

a .accesskey {
	text-decoration:underline;
}

Y ahora viene la magia. Realizamos un recorrido por los enlaces de la página y realizamos el cambio:

$("a").each( function() {
	var html, reg, rep;
	if (this.accessKey)
	{
		html = $(this).html();
 
		if (!/</g.test(html))
		{ 	// No contiene HTML
			reg = new RegExp("("+this.accessKey+")","i");
			rep = "<span class='accesskey'>$1</span>";
		}
		else
		{ 	// Contiene HTML
			reg = new RegExp("(<[^>]*>.*)("+this.accessKey+")(.*</[^>]*>)", "i");
			rep = "$1<span class='accesskey'>$2</span>$3";
		}
 
		$(this).html( html.replace( reg, rep ) );
	}
});

Evidentemente, será requisito que el texto del enlace contenga la letra equivalente a la tecla de acceso rápido.

Y muy importante, por supuesto, realizar este escaneo una vez sea accesible el DOM completo de la página.

$(document).ready( function() {
 
	// Nuestro script
 
} );

$.fn.ellipsis = function() { return this.each( function() {
 
	var tar = $(this),
		ow, ls, tg, 
		tw=tar.css({"display":"block","white-space":"nowrap"}).width(), 
		ot=tar.html(), pt=ot,
		alt=tar.text(),
		ok=false, 
		ct=false,
		el=' …';
 
	tar.css({"position":"absolute"});
 
	while (!ok) {
		ow = tar.css({"width":"auto"}).width();
 
		if (ow > tw) {
			ls = pt.lastIndexOf(" ");
			tg = (new RegExp( "<[^>]*$", "g" )).test( pt.substr(0, ls) );
			if (ls > 0) { 
				pt = pt.substr(0, ls);
				tar.html( pt + el );
				ct=true;
			} else {
				tar.html( el ).attr("title", alt);
				ok=true && !tg;
			}
		} else { 
			if (ct) {
				tar.attr("title", alt);
				tar.css({"display":"block","width":tw+"px"});
			}
			ok = true;
		}
	}
	tar.css({"position":""});
 
}); }

Y para usarlo.

$(".textodeunalinea").ellipsis()

Actualización 27-10-2010: Se han hecho algunas correcciones. Y un detalle; se porta un poquito mal cuando hay Html en el texto. Pendiente de corregir.

function XMLString( object, name, recursiveCall ) {
	var xml = "", i;
	var isArray = typeof(object) === 'object' && typeof(object.length) === 'number' &&  !(object.propertyIsEnumerable('length')) && typeof(object.splice === 'function');
 
	if (!recursiveCall)	{
		xml += "<?xml version=\"1.0\" ?>";;
		xml += "<"+name+" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\">";
	} else if (!isArray) {
		xml += "<"+name+">";
	}
 
	if (typeof(object) === "undefined" || object == null) return ""; //Nada
	else if (typeof(object) === "object") for (i in object) xml += XMLString( object[i], isArray?name:i, true); // Un objeto o array
	else xml += object; // Un texto
 
	if (!isArray || !recursiveCall) xml += "</"+name+">";
 
	return xml;
}

Y un ejemplo de uso sería:

var objeto = {
	campo1 : "valor1",
	campo2 : "valor2",
	campo3 : "valor3"
}
 
alert( XMLString( objeto, "XML" ) );

Donde el primer parámetro es el objeto a convertir, y el segundo es el nombre del elemento raíz. Con el ejemplo anterior obtendríamos como salida la siguiente cadena:

<?xml version="1.0" ?>
<XML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <campo1>valor1</campo1>
  <campo2>valor2</campo2>
  <campo3>valor3</campo3>
</XML>

Con 4 cambios es posible convertirlo en código AS2 o AS3. Aunque en estos casos creo que hay métodos mejores y nativos para hacer esta función.

Con la ayuda de jQuery, podemos solventar de manera fácil este problema añadiendo unas lineas al inicio del script, y teniendo en cuenta una regla en el CSS que contenga los estilos.

Por ejemplo, teniendo el siguiente CSS:

#menu li:hover {
text-decoration:underline:
}

Habría que modificarlo tal que:

#menu li:hover, #menu li.hover {
text-decoration:underline;
}

De manera que podamos acceder a dicho estilo mediante una clase.

Y ahora, solo quedaría realizar un script que añada la clase o la elimine según el evento llamado. Para ello emplearemos la función hover(mouseOver, mouseOut) que nos facilita jQuery.

$(document).ready( function() {
if ($.browser.msie) $("*").hover( function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); } );
});

Y a funcionar

La clase FLVPlayback implementa el método closeVideoPlayer( índice ) que permite detener la descarga del archivo FLV que esté descargando, pero está limitado a cuando abres múltiples vídeos en un solo componente. La limitación consiste en no dejarte eliminar la conexión de video con la que creaste el reproductor.

// Creamos el reproductor y lo ponemos a reproducir
var video:FlvPlayback = new FlvPlayback();
video.play( "video.flv" );

// Ahora intentamos cerrar el reproductor
video.stop();
video.closeVideoPlayer(0); // Debería detener la descarga, pero nos lanza un error
video = null; // Para que el Garbage Collector lo elimine de memoria

Si en el ejemplo omitimos video.closeVideoPlayer(0), el reproductor se elimina, pero el vídeo continúa descargándose y consumiendo ancho de banda.

Esto puede ser un problema cuando haces uso de varias instancias de este componente, y debido a las circunstancias no puedes usar uno solo. Cada una de ellas llamará a la descarga de un FLV, y puede darse el caso de estar descargando varios FLV a la vez, con el consiguiente consumo de ancho de banda.

La solución, acceder a la primera instancia VideoPlayer y detenerlo uno mismo:

// Ahora intentamos cerrar el reproductor
video.stop();
video.getVideoPlayer(0).close(); // Ahora sí, detiene la descarga del archivo FLV
video = null; // Para que el Garbage Collector lo elimine de memoria

Algo muy sencillo, pero que ya me ha hecho perder algo de tiempo buscándolo .  Aquí lo dejo como apunte.

Imaginemos que en el script de una página, una vez cargado el DOM, añadimos una función determinada cuando carga la imagen de cabecera:

<script type="text/javascript">
  // Función que ejecutamos al cargar el DOM de la página
  window.onload = function() {
    var cabecera = document.getElementById("cabecera");
    // Funcion lanzada cuando carga la imagen 'cabecera'
    cabecera.onload = function() {
      alert("carga completa");
   ;}
  }
</script>

Nos encontraremos con que en algún navegador (por ejemplo, Internet Explorer) lanza la primera vez el evento, pero en las posteriores cargas este no es lanzado.

La razón es que, en la segunda carga, la imagen se encuentra cacheada y por tanto el navegador carga la imagen en cuanto inserta el elemento IMG, lanzando el correspondiente evento onLoad. Como en ese preciso momento todavía estamos cargando la estructura de la página y el evento no ha sido asignado (no se asigna hasta la carga completa de la estructura), cuando queremos asignarlo ya es demasiado tarde.

Otros navegadores como Mozilla Firefox no lanzan los eventos hasta que se ha completado la carga del DOM, haciendo inexistente este problema.

Una solución sencilla es comprobar, después de asignar el evento onLoad a la imagen, si esta ya se encuentra cargada complétamente. Nos serviremos del parámetro complete. Si nos devuelve true, lanzamos el evento onLoad manualmente.

<script type="text/javascript">
  // Función que ejecutamos al cargar el DOM de la página
  window.onload = function() {
    var cabecera = document.getElementById("cabecera");
    // Funcion lanzada cuando carga la imagen 'cabecera'
    cabecera.onload = function() {
      alert("carga completa");
    }
    if (cabecera.complete == true) cabecera.onload();
  }
</script>

Actualización:

Me comenta Marc Palau (y con toda la razón) que el ejemplo anterior no es válido porque onLoad no es lanzado hasta que carga toda la página, incluidas las imágenes. En este caso, nunca seran llamados los eventos onLoad de las imágenes porque se están definiendo después de haberlas cargado.

Para reproducir el error, he preparado una prueba en la que se testea el framework jQuery y la función addDOMLoadEvent (el ejemplo que ponen en el enlace añade la imagen dinámicamente y no lo reproduce). Del mismo modo, se presenta una solución para ambas basados en el mismo procedimiento comentado antes.

$(document).ready( function() {
  var loc = document.location.href.split(/[\?#]/).shift().replace(/\/$/, '');
 
  $("a").each(function() {
    if (this.href == loc) $(this).addClass("selected");
  });
} );

El funcionamiento es muy simple. Recorre todos los elementos <a> de la página y compara el parámetro href con la url actual. Si coincide, añade la clase ‘selected‘ a dicho elemento. La clase ‘selected’ deberá estar definida dentro de los estilos css de la página.

Un ejemplo aquí.

Actualización: Ahora no tiene en cuenta si la URL tiene barra al final o no (como en el caso de las carpetas)

stop(); root.loaderInfo.addEventListener(Event.COMPLETE, function(e:Event) { play(); });

Esto comenzará a reproducir el flash en cuanto termine de cargar. Además, podemos aprovechar el primer fotograma para poner un mensaje ‘cargando… ‘, que será lo que se muestre mientras se completa la carga.