Cultura Digital#Blog

Si es que jQuery es una maravilla :D

Información:
Esta entrada es antigua, se ha reabierto -y actualizado un poco- pero data de al menos casi dos años, de ahí referencias obsoletas a temas como «dimensions», el cual se incluye hace tiempo ya como base de «jQuery».

Un poco de Off Topic:

Si hay algún lector habitual de Cultura Digital ya conocerá mi habitual tendencia a irme por las ramas o establecer contextos sobre el tema central de la entrada… Qué le voy a hacer, después de todo, esto es un blog -un blog nacido con pretensiones artísticas- no un compendio de artículos técnico-temáticos; así que siempre me voy a permitir la libertad de divagar -y puede que incluso utilizando recursos literarios- un poco o un mucho, según me de ;)

Pero en fin, por ahora, vamos con ello:

Contexto

Aunque llevaba tiempo resignado aún habiendo soluciones, tampoco era un problema demasiado severo siempre que diseñaras en «fixed». Recordé que Cameron Moll, en el famoso «CSS Mastering» de Andy Budd -la traducción de Anaya® no es gran cosa- indicaba una expresión propietaria de IE con JavaScript para «solucionar» el problema.

Soluciones habituales

En el portátil dónde suelo probar el diseño en IE (Windows XP SP2 + IE6 de casa) no me ha funcionado, está a 1024, y ninguna de las otras soluciones que he encontrado, como la del «crack» Dean Edwards, tampoco han servido de mucho. Entre ellas algunos resets de prestigio como el de Yahoo, del mismo Dean Edwards…

Información
Actualizado: Hoy por hoy -09/09-, el mismo Edwards ha desarrollado soluciones de compatibilidad con estándares, y en este caso en concreto con CSS, dónde evidentemente ya podemos usar min-width, max-width y muchos otros, no sé cuantos, pseudo-selectores en casi o todas las versiones IE, al menos 6, 7 y 8.
Enlace: Dean Edwards IE7 Actualizaciones

Test

El caso es que el resultado de laguardiadejaen.com para IE, con unos pocos arreglos sobre imágenes y un CSS con unas 6/7 reglas para solucionar problemas específicos, no difiere mucho del diseño basado en estándares o por ejemplo del resultado en FF (Firefox). Pero… tenía un inconveniente bastante desagradable que me alarmó al ver los accesos por resoluciones de pantalla:

Resoluciones de usuario

El último cambio de look se basaba en esto, una ampliación de la anchura gracias a la creciente facilidad para adquirir pantallas planas o monitores -¿monitores?… me atrevería a decir que prácticamente se han extinguido en el ámbito doméstico-, pues eso: resolví que 1260 podría ser en poco tiempo la media… de hecho, casi lo es ya, pero por ahora continuamos en 1024.
Así que cambié a un diseño fluido de 1000 píxeles mínimos, algo justo pero válido para resoluciones de 1024, y 1260 de máxima anchura para resoluciones más grandes y que no diera un ancho excesivo.

Bien… pues encontré que había bastantes accesos a 800…, ¡Dios! -aún no había tanto acceso con pda’s, móviles, etc-. A 800 y con I. Explorer, sin poder usar min-width, ufff… aunque no hice nada en ese momento -había cosas más serias-, al final era inevitable usar una solución en un trabajo para un organismo público:

La solución: de nuevo jQuery

Dimensions:
En una entrada anterior hablaba de como me sorprendió este plugin para jQuery… Así que después de probar mil y un hacks que, como decía, no me convencieron y sobre todo, no funcionaban (por ejemplo para usar un reset debes usarlo desde el principio… y el que estés usando seguir usándolo), decidí probar con JavaScript, jQuery y su plugin Dimensions:

Código JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript" charset="utf-8">
// <![CDATA[
jQuery(document).ready(function() {
	if ( jQuery.browser.msie ) {
		jQuery(window).resize(function() {
			var windowWidth 	= jQuery(window).width();
			var wrapper 		= jQuery('#wrapper');
			if ( 'number' == typeof(windowWidth) && 'object' === typeof(wrapper) ) {
				if 		( windowWidth < 1000 )	wrapper.width(1000);
				else if 	( windowWidth > 1260 )	wrapper.width(1260);
				else							wrapper.width('98%');
			}
		});
	}
});
// ]]>
</script>

Y para hacer un test dejo esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script type="text/javascript" charset="utf-8">
// <![CDATA[
jQuery(document).ready(function() {
	// IE, simular max y min-width con dimensions:
	jQuery(window).resize(function() {
		var windowWidth	= jQuery(window).width();
		var wrapper		= jQuery('#wrapper');
		var wrapperWidth	= wrapper.width();
		var msgWindow	= 'Resolución: ' + windowWidth;
		var msgWrapper	= 'Wrapper ajustado a: ' + wrapperWidth;
 
		if ( windowWidth < 1000 ) {
			wrapper.width(1000);
			alert(msgWindow + ' min-width activo!.' + '\n' + msgWrapper);
		} else if ( windowWidth > 1260 ) {
			wrapper.width(1260);
			alert(msgWindow + ' max-width activo!.' + '\n' + msgWrapper);
		} else {
			wrapper.width('98%');
			alert(msgWindow + ' dentro de los límites.' + '\n' + msgWrapper);
		}
	});
});
// ]]>
</script>

Obviamente, en un navegador estándar, restrinjo el ancho con la división wrapper que envuelve la maquetación, un 98% me parece bien para aplicar un pequeño margen en resoluciones inferiores a 1260 y en concreto a 1024 trabajando a 1000 píxeles más o menos.