Slide con mooTools Publicada el Miércoles 20 de Junio de 2007 a las 3:20 am por Infected-FX
mooTools
En esta primera parte del tutorial haremos el slide utilizando mooTools, que es el que usamos aquí en el sitio.
Para empezar vamos al sitio de mooTools y descargamos la librería, seguimos creando un archivo html.
Ahora vamos a incluirla entre las etiquetas head de nuestro archivo
HTML:
-
<script type="text/javascript" src="mootools.v1.1.js"></script>
El archivo html
Ok, con esto tendremos ya hemos mandado a llamar a nuestro archivo la librería de mooTools, continuamos con la parte que "ocultaremos" para eso utilizaremos lo siguiente.
HTML:
-
<!-- contenedor -->
-
<div id="container">
-
<!-- contenido oculto -->
-
<div id="myContent">
-
<h2>Yo estoy oculto</h2>
-
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam porttitor vestibulum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent placerat. Nulla fermentum. Aliquam varius ultricies libero. Donec viverra ornare nulla. Sed ornare massa. Duis augue augue, suscipit elementum, volutpat hendrerit, feugiat at, lacus. Nunc mauris velit, tempus lobortis, mollis nec, fringilla a, lacus. Sed vestibulum facilisis nisi. Pellentesque malesuada mi quis eros. Integer dictum lobortis velit. Duis tincidunt, mi in elementum laoreet, ante nisl aliquam felis, sed auctor sem mi id odio. Aliquam consequat arcu in quam.</p>
-
</div>
-
<!-- / contenido oculto -->
-
<!-- controlador -->
-
<div id="toggleContainer"><a href="javascript:void(0);">Toggle</a></div>
-
<!-- / controlador -->
-
<!-- contenido normal -->
-
<h2>Ah caray! ¿Dónde está el otro?</h2>
-
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam porttitor vestibulum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent placerat. Nulla fermentum. Aliquam varius ultricies libero. Donec viverra ornare nulla. Sed ornare massa. Duis augue augue, suscipit elementum, volutpat hendrerit, feugiat at, lacus. Nunc mauris velit, tempus lobortis, mollis nec, fringilla a, lacus. Sed vestibulum facilisis nisi. Pellentesque malesuada mi quis eros. Integer dictum lobortis velit. Duis tincidunt, mi in elementum laoreet, ante nisl aliquam felis, sed auctor sem mi id odio. Aliquam consequat arcu in quam.</p>
-
<!-- / contenido normal -->
-
</div>
-
<!-- / contenedor -->
Les cuento un poquito sobre la estructura de esto:
- container : Contenedor global
- myContent : Será el contenido que ocultemos/mostremos
- toggleContainer : Este es nuestro controlador para mostrar u ocultar "myContent"
Pueden ver como va el primer paso de este tutorial.
Blind Labs
Junio 20, 2007 a las 3:41 am
esta bonito pero lo malo que está muy pesado 42kb el mootools.v1.1
Daniel
Junio 20, 2007 a las 5:47 am
Vaya sorpresa!, estaba leyendo mis feeds y he aparecido en en tu blog.
El tutorial esta muy bien, la comunidad de mootools es muy pequeñita y estas aportaciones son lo mejor.
Un pequeño detalle, yo no quitaria el event.stop en la pagina 5, asi puedes poner un enlace alternativo en caso de no tener JS activado.
En tu caso pones void();, es mejor poner un enlace y anularlo si tienes JS con event.stop.
No me considero un experto, solo alguien que tiene mucha curiosidad jeje.
Blind, pesado mootools? jeje pues acercate a otras librerias, ademas 42kb para la versión full, si lo adaptas a tu codigo seguro que reduces la mitad.
Posdata: me encantan tus botones, te han quedado genial.
Manuchis
Junio 20, 2007 a las 6:36 am
buen tutorial, pero sabes, he intentado muchas veces y no logro hacerlo funcionar, no se si es el motools o que pero no me arranca el slide… tampoco los tooltips que había puesto… en fin…
gracias igual.
lucas
Junio 20, 2007 a las 10:58 am
impresionante, MUCHISIMAS GRACIAS POR EL TUTO!!! ta barbaro…
nos vemos,
Lucas.
Francisco
Junio 20, 2007 a las 2:38 pm
Muy buen tutorial, habia escuchado mucho ese script y aquí se entiende de maravilla.
Juanjo Vargas
Junio 20, 2007 a las 3:38 pm
genial… es ke me va perfecto! hoy mismo estaba aplicando este efectoy lo he combiando con otro que es el fx.style y una mezcla de ambos se usan para obtener el efecto de esta página:
devthought.com
donde dice: click here to see HTML code ;)
en un par de dias pondré un tuto sobre cómo lo hice
Saludos!
Infected-FX
Junio 21, 2007 a las 7:53 pm
@Blind Labs: yo bajé el mootools completo, pero como dice daniel, si lo adaptas podrías reducirlo mucho más.
@Daniel: Muchas gracias por el tip y el comentario ^^ un gusto que te tomes la molestia.
@Manuchis: Al final del tutorial encontrarás el código fuente, tal vez te resulte más fácil implementarlo así.
@lucas :Gracias ñ_ñ me alegra que te haya servido bro.
@Francisco :Pffff! muchas gracias, temía que no se pudiera entender del todo bien :)
@Juanjo Vargas : Excelente bro, me gustaría ver el resultado, siempre es bueno complementarlo :).
Un saludo.
Nikko
Junio 22, 2007 a las 8:25 am
Muy bueno..gracias Amigo….
lucas
Junio 22, 2007 a las 12:53 pm
holaa de nuevooo… el tuto me salio a la perfeccion, pero tube un problema al tratar de implementar varios de ellos en mi web, es decir, en ves de tener uno como tenes vos, quiero tener tres… sabes como puedo hacer¿?¿?¿ me vendria bien una mano…
muchas gracias,
Lucas.
lucas
Junio 22, 2007 a las 12:57 pm
jajaaj listo listo ya puedeeee
perdon por molestar xD
César
Julio 1, 2007 a las 9:48 am
Hola a todos.
Lucas, ¿como has hecho para poder poner más de uno?
Muchas Gracias!!
- César-
Z01X
Julio 12, 2007 a las 4:43 pm
lucas, humildemente te digo que si le pones un
outline:0;al css en la parte de enlaces (a), se veŕia muuuuuucho mejor ;)Yo tengo una pregunta con respecto a las descargas de MooTools, soy nuevo en esto de JavaScript y no entiendo qué es lo que uno debería descargar para poder usar los efectos necesarios.
Por ahí arriba leí que pesa 42KB, al yo descargar el Core, me queda pesando 8KB.
Por ahí vi que nfected-fx dice que si uno lo adapta podría reducirse más… ¿cómo es eso?
Por favor un poco de ayuda… ¿cómo se elije una buena descarga según una u otra necesidad?
Muchas Gracias :)
Z01X
Julio 12, 2007 a las 4:45 pm
Por cierto, (discúlpenme por los dos comentarios seguidos), si descargo toodo, pesa 180KB :S
Z01X
Julio 12, 2007 a las 4:51 pm
Ahora pido disculpas por los tres comentarios seguidos y me “autocontesto”:
Z01X, por Dios, eres muy bruto… bruto, bruto!
Simplemente elijes un nivel de compresión y te van a quedar los 42,7 (para ser exactos) que mencionaron por ahí arriba y te va a funcionar normalmente… instrúyete y cacharrea más antes de preguntar.
Eso sí, verás que al descargar y abrir el .js vas a ver un montón de cosas raras… pero si lo descargas sin compresión, podrás ver hasta ejemplos en el .js, entonces la idea es que descargues el compreso para tu web y el no compreso para tu PC y vayas mirando los ejemplos y las funciones.
juanmanuel lopez
Julio 16, 2007 a las 7:56 pm
hola! gracias por la ayuda! yo he bajado el mootols con lo mínimo para que funcione el slimbox y tu tutorial… al final pesa 20kb el mootools… y he agregado otra transición!… saludos
juanmanuel lopez
Julio 16, 2007 a las 7:58 pm
hola! gracias por la ayuda! yo he bajado el mootols con lo mínimo para que funcione el slimbox y tu tutorial… al final pesa 20kb el mootools… y he agregado otra transición!… saludos… se me olvidaba el enlace es http://aptoverde.fileave.com es la misma pagina de inicio…
mario
Abril 19, 2008 a las 2:41 pm
hola, kisiera decir k este codigo en paginas .html . htm ect funciona pero en .php en ie da error (en firefox funciona).
Alguien sabe a k se debe k en paginas .php no funcione en ie??.
gracias de antemano