Hoy posteaba que tenemos nueva versión de Mootools. Además, debuta la selección en el europeo (je je) y, fuera bromas, tenemos un estreno de los de verdad. Desde hoy podéis visitar uno de esos sitios especiales, de esos que destilan talento por los cuatro costados.

iwannagothere.net es una idea original de María desarrollada por ella misma, blat y mamuso (amigo y crack en lo profesional y en lo personal, ahí queda eso). Es un sitio que no os podéis perder; cada usuario registrado puede aportar información relativa a ciudades y añadir estas a rutas, votándolas, valorándolas, tageándolas, etc.

Añadid a esto un diseño fantástico y el encanto especial que esta gente aporta a todo lo que hace. Os va a gustar. Disfrutadlo.

Estoy deseando probarla, voy a aprovechar para testearla a tope, arreglar visualmente el blog y el playground (que por supuesto usará las 1.2). Estad atentos que os iré contando. Así de primeras deciros que hay bastantes cambios que hacen que la v1.2 no sea “directamente compatible hacia atrás” con la 1.11. A ver si hago un pequeño report de los cambios mas importantes.

Intentaré poco a poco presentaros clases y/o funciones y/o características de Mootols. Hoy le toca el turno a las funciones $. La función $ fue gestada inicialmente por prototype (gracias amigos) y también está disponible en Mootools. En realidad en Mootools tenemos 4 funciones $:

$(), $$(), $E(), $ES()

Nota: Hay muchas más funciones $ pertenecientes al core, ya hablaremos de ellas (chk, pick, etc)

$() y $$() están definidas en la clase Element.js (categorizada en “Native”), $E() $ES() sin embargo las define Element.Selectors.js. Y tu dirás… que bien, que organizdo esta todo, pero… ¿para qué sirven? ¿cómo se utilizan?

$() o el getElementById molón

Ni que decir tiene que Javascript sirve para mucho más que para hacer alert(”hola mundo”). No me atrevo a decir un porcentaje (porque lo desconozco) pero una ENORME cantidad de scripting JS está relacionado directa o indirectamente con el DOM. Hagamos lo que hagamos con los elementos del DOM lo primero que debemos hacer es cogerlos. $(), $$(), $E() y $ES() sirven para eso. Son “getters” y de los 4, $() es posiblemente el más básico y quizá el más utilizado. A grosso modo $() es un clásico “document.getElementById” pero con dopping.

Parámetros y retorno:

$() recibe como parámetro:

A) un string (que representa el id del elemento) o

B) un elemento.

A su vez devuelve el elemento del DOM buscado con todos los prototipos de la clase Element aplicados (aquí está el dopping, lo explico un poquito mas adelante).

Ejemplos:

var miElem=$(’id_del_elemento’);

var miElem2=$(miElem);

En este caso ambas variables almacenarían el mismo elemento del DOM (aquel cuyo ID sera id_del_elemento). Es importante decir que $ no producirá un error si el elemento no se encuentra mientras que getElementById, si lo haría.

En estos momentos puedes estar planteandote si esto es para tanto. ¿$() es un simple alias de getElementById que no produce errores si no encuentra el elemento? No. Como decía antes $() devolverá una instancia de la clase Element de Mootools (es decir, no devolverá un elemento del DOM sin más), esto es realmente bueno ya que la clase Element proporciona un buen conjunto de métodos realmente útiles (hablaré de ella en otro post).

$$(), la repanocha

Vamos un poco más allá. Mientras que $() devuelve una instancia de Element, $$() devuelve un array de instancias de Element. Lo bueno del tema es que como argumento recibe (o puede recibir) un número ilimitado de:

-elementos

-strings que representen ids de elementos

-strings que representen tags html

-strings que representen selectores CSS (eso solo si tenemos Element.Selectors.js, algo que seguramente tendrás a no ser que hayas descargado una versión no completa de Mootools por alguna razón y no lo hayas incluido)

-arrays de elementos

La documentación ofrece un ejemplo muy completo que voy a pegar y explicar:

$$(myelement, myelement2, ‘a’, ['myid', myid2, 'myid3'], document.getElementsByTagName(‘div’),’#id1 a.class1′) 
Esto nos devolverá un array con:
1)Los elementos “myelement” y myelement2 si existen (imagina que myelement2 fuera $(’id_no_existente’), bien, en ese caso no fallaría nada, simplemente no se incluiría nada)
2) Todo los elementos del documento cuyo tag sea ‘a’
3) Los elementos ‘myid’, myid2, ‘myid3′ si existen
4) Todos los elementos cuyo tag sea ‘div’
5) Todos los elementos cuyo tag sea ‘a’ y cuya clase sea ‘class1′ y pertenezcan a al elemento cuyo id sea ‘id1′

Y todo esto en un array de Elements, facilmente manejable. No hacen falta más comentarios.

$E() muchas veces entendido como “first element of”…

aunque es algo más que eso. $E() se parece a $() por una razón, devuelve 1 Element (nada de arrays) pero se diferencia en que recibe 1 o 2 parámetros (el segundo es opcional) y el primer parámetro no es un ID sino un selector CSS. Ejemplo:

$E(’a')

Devolverá el primer elemento del documento cuyo tag sea ‘a’ (el primer link). Fijaos en que el parámetro no es un id el DOM como pasaba en $() si no que es un selector CSS (en este caso un tag) y por tanto dicho selector representa potencialmente a un número variable de elementos, sin embargo $E devuelve solo 1 ocurrencia (la primera) de ahí su mote de “first”. Lo realmente bueno de esta función es que podemos cambiar el ’scope’, es decir, podemos dejarlo buscar en todo el documento o solo dentro de un elemento del DOM. Imaginad ahora que queremos el primer elemento strong con clase str1 y que esté dentro de la div ‘test1′, pues:

$E(’strong.str1′,’test1′)

(notad que el segundo parametro es un string representando un ID)

$ES() … Todos los $E()

Simple y llanamente recibe los mismos parámetros que $E() pero devuelve TODOS los elementos en vez de solo el primero. Evidentemente devuelve un array igual que $$(). El ejemplo anterior es válido pero en vez de obtener el primer strong.class1 de test1, obtendríamos todos.

Para acabar con los getters he de decir que aunque $E() y $ES() son muy potentes es muchísimo más común el uso de $ y $$.

Próximamente hablaré de la clase Array que junto a Element y Event son para mi gusto los 3 puntales más importantes del framework. El resto de funciones $ (la del core y alguna más, las dejo para más adelante).

La situación es muy simple, más de una vez habréis hecho un scroll, por ejemplo una galería de fotos donde todos los thumbnails están en una “tira horizontal de ancho variable” (vamos un capa con alto fijo) y a la que le ponemos position: relative. Esta tira está dentro de una capa con alto y ancho fijos y overflow: hidden. A partir de ahí (en mi ‘mootolero caso’) ponermos un Fx.Scroll y asociamos a un par de elementos un evento para hacer scrollTo y desplazar la tira de thumbs.

Muy bien, estupendo. Lo que me ocurrió es que en este caso el Scroll iba a ser vertical. La capa exterior (que yo llamo máscara y normalmente llaman wrapper) tiene las mismas propiedades CSS (height/width fijos + overflow:hidden) y la interior simplemente tiene un ancho fijo (realmente ni siquiera esto sería necesario) y tenía un position:relative para el (al menos yo así lo creia) funcionamiento correcto del scroll.

El resultado lo podeis ver en el playground(por cierto no he puesto los scrolls para que se aprecie que es una cuestion CSS pura y dura). Vereis que en FF todo funciona correctamente pero en IE el overflow:hidden parece ser ignorado y la altura es estirada. Podeis pinchar en el link “solucionar problema” y vereis que en FF no tiene efecto alguno pero en IE la wapa wrapper1 se comportará como esperabamos. Este link simplemente elimina la clase “relative” de la capa, dicha clase es la que añade el position:relative a “inner1″. El css y js del playground está en /css/playground.css y /js/playground.js, respectivamente.

¿Esto es un bug de IE? Googleé un poco y con prisa y no encontré información al respecto, pero al menos lo parece. Espero que os sirva de ayuda.

Espero y deseo que AjaxizeYourself sea un sitio en el que te sientas a gusto y donde puedas encontrar información que te sea util. Hablaremos de todo un poco pero sobre todo de web.

Poco a poco iremos llenando todo esto de contenido.

P.D.: Estamos acondicionando todo esto, no te asustes