Crear un "Marquee" amb divs i prototype

Pels que no sapigueu què és un marquee us ho explico ràpid, és un tag html que pel que es veu no és standard i el que fa és moure un determinat text dins seu. Aquest text pot contenir tags html, per tant li podem donar estructura i format. Un marquee és això.

El post que explicaré a continuació descriu com crear un taulell de noticies sense emprar aquest tag no standard que amb les útlimes actualitzacions del firefox no funciona sota windows.

Per començar definim l'estructura del nostre taulell.

Constarà bàsicament de dos divs. El de més enfora li direm #contenidor i l'interior #noticies.

El #contenidor li posarem un estil que amagui tot allò que surti del seu requadre, per tant comencem creant els fitxers que ens calen:

• noticies.css: en aquest definirem l'estil del nostre taulell de noticies
• noticies.js: en aquest li donarem vida al taulell
• noticies.html: l'estructura del nostre taulell romandrà aquí dins. En un proper post explicarem com carregar les noticies des d'un fitxer json, de moment les noticies les escriurem directament dins del div #noticies i cada noticia dins d'un div.noticia. Cada notícia tindrà un h1.titol i un p.cos
• protoaculous.js: fitxer que conté la llibreria prototype i escriptaculous comprimida en un sol fitxer
• application.js: conté la base que carregarà el javascript que definirem en el noticies.js

Oranitzem els fitxers

Per organitzar bé aquests fitxers treballerem amb el següent arbre de directoris:

Si treballeu amb Mac o Linux podeu emprar la següent ordre per crear-ho tot. Suposo que us trobeu dins la carpeta on posarem els fitxers.

$

mkdir -p javascript stylesheets; touch javascript/application.js javascript/noticies.js stylesheets/noticies.css noticies.html;wget http://www.forniol.cat/manuals/protoaculous.js; mv protoaculous.js javascript

Fent l'html

Fem una pàgina html simple amb els divs que hem comentat:

Donant estil

Ara li donarem un estil al nostre taulell. Definirem les dimensions del taulell: ample i alt, li donarem un contorn i farem que el contingut que surti dels seus limits quedi ocult. Al div #noticies li donem amplada, treiem el contorn i el posicionem flotant a dalt del div #contenidor.

Donant vida

Un cop el nostre taulell té una estructura i un estil ens preparem per donar-li moviment. Començarem amb l'application.js que ens permetrà crear diversos fitxers js i anar-los carregan sense que els consecutius scripts que anem carregan se superposin.

Ara si que farem que el text de les nostres noticies quedi situat just a la part inferior del nostre div contenidor de manera que no es vegi i seguidament farem que tingui moviment i aparegui de sota. Quan totes les noticies haguin passat llavors tornaran a la zona inferior i tornaran a passar una i altre vegada.

Aquí us presento l'estructura bàsica que tindrà el fitxer javascript que donarà vida al nostre taulell de notícies. En primer lloc tenim la classe noticies que serà la que contindrà tota la història, a sota tenim la funció OnloadNoticies que principalment crear una nova instància de la classe noticies amb la quan s'executarà la futura funció initialize de Noticies i per tal que es carregui OnloadNoticies finalment l'afegirem a la llista de coses a carrega quan carregui la nostre pàgina

Un cop fetes les presentacions anem a emplenar i donar forma a la classe Noticies. Per començar crearem tres variables i cinc funcions:

Variables

• moviment -> contindrà l'objecte que farà desplaçar les nostres noticies. Això ens permetrà més endevant parar de córrer les noticies.
• velocitat -> amb aquesta variable donarem més o menys rapidesaa les nostres noticies. Per defecte ho deixarem a 1.
• puntInicial -> punt de partida de les noticies, cal especificar-ho manualment perquè l'altura que ens retornen les funcions és l'altura real contant que els continguts que té dins el div contenidor. Aquí va el 'height' especificat per a #contenido al noticies.css

Funcions

• initialize -> serà el primer que s'executi quan es crei l'objecte noticies a OnloadNoticies. Posicionarem noticies a la zona inferior i començarem a fer correr les noticies.
• crear_updater -> inicialitzarem la variable moviment i farem que el nostre taulell vagi movent-se
• obtenirAlturaActual -> ens donarà l'altura que té el div noticies. Això és important, perquè cada vegada que actualitzem les noticies quedaran a una altura distinta. Amb una expressió regular separarem el valor numèric de la unitat(px).
• obtenirAlturaMaxima -> ens retorna el punt màxim fins on pujarà el div #noticies
• obtenirNovaAltura -> ens retorna la següent altura respecte l'altura actual. Pot ser un pixel per sobre l'actual o tornar al punt d'inici.

Amb tot això ja tenim el marquee bàsic. En propers capítols explicarem con fer que el marquee pari de córrer quan el ratolí passi sobre del titular i com carregar les noticies des d'un fitxer json.