JMiur [E]

Este script de Argilla es una forma de reemplazar las MARQUEES de manera sencilla y funciona en la mayoría de las versiones de Internet Explorer, Firefox, Safari y Opera.

Lo primero que debemos hacer es descargar el archivo y agregarlo en la plantilla antes de </head>; ya sea alojándolo en un servidor propio:
<script src='URL_aScroller-1.0.js' type='text/javascript'></script>
o insertando su contenido entre estas etiquetas:
<script type='text/javascript'>
//<![CDATA[
[ ... el contenido del archivo ...]
//]]>
</script>
Para utilizarlo, debemos definir un DIV al que le daremos un nombre único, con el atributo ID y adentro de este, colocaremos otro DIV donde irá el contenido a ser mostrado. Inmediatemente después, colocaremos la llamada a la función:

divScroller("nombreID", "modo", velocidad, delay);

nombreID el nombre del DIV
modo "h" para un scroll horizontal y "v" para un scroll vertical
velocidad de desplazamiento (a valores más altos, menor velocidad)
delay demora entre mensajes cuando es vertical (en microsegundos)

Un ejemplo de scroll horizontal:
<div id="sDemo1" style="height: alturapx; width: anchopx;">
<div>....... aquí va el contenido a mostrar .......</div>
</div>
<script type="text/javascript">divScroller("sDemo1", "h", 20, 3000);</script>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div id="scrollDemo1" style="height:20px;width:100%;"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</div></div><script type="text/javascript">divScroller("scrollDemo1", "h", 10, 1000);</script>

Dentro del atributo STYLE, debemos colocar, obligatoriamente, el ancho y el alto del elemento pero, podemos agregar otras propiedades como colores y fuentes.

En este ejemplo, todo lo anterior está colocado dentro de otro DIV externo que tiene una imagen de fondo y simula una marquesina:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div style="background:transparent url(imagenFONDO) no-repeat 50% 50%;width:100%;height:50px;"><div id="scrollDemo2" style="color:#FFFFFF;font-size:20px;height:50px;line-height:50px;margin:0 auto;width:400px;"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</div></div><script type="text/javascript">divScroller("scrollDemo2", "h", 20, 1000);</script></div>

El modo "vertical" fuciona de la misma manera. En este ejemplo, sólo cambiamos "h" por "v":

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

En los scrolls verticales, es posibile agregar múltiples párrafos. Si ponemos cada uno dentro de un DIV, se mostrarán de manera secuencial:

PARRAFO 1: Lorem ipsum dolor sit amet ...
PARRAFO 2: Ut wisi enim ad minim veniam ...
PARRAFO 3: Duis autem vel eum ...
PARRAFO 4: At vero eros et accumsan ...

<div id="scrollDemo3" style="height: 40px; color:#FFFFFF;line-height: 40px; width: 400px;margin:0 auto;text-align:center;font-size:17px;"><div style="background-color:#3E5266;">PARRAFO 1: Lorem ipsum dolor sit amet ...</div><div style="background-color:#4E6276;">PARRAFO 2: Ut wisi enim ad minim veniam ...</div><div style="background-color:#5E7286;">PARRAFO 3: Duis autem vel eum ...</div><div style="background-color:#6E8296;">PARRAFO 4: At vero eros et accumsan ...</div></div><script type="text/javascript">divScroller("scrollDemo3", "v", 20, 3000);</script>

Ambos modelos permiten colocar casi cualquier tipo de contenido dentro de los DIVs así que también es una forma sencilla de crear un slideshow o un blogroll ya que podemos utilizar imágenes o enlaces además de poder establecer estilos individuales.

El resto, depende de la imaginación sonrisa

26 comentarios:

Luzdeluna  

Hola JMiur! esta relindo este truquito, me lo llevo, alguna utilidad le voy a dar!:P
Gracias!

Responder
Graciela  

hola JMIUR!!! es excelente...me encanta...sos vos el que tiene la imaginación, saludos!!!

Responder
JMiur  

Me alegro que les haya gustado :)

Responder
igtorres50  

Pero que relisto eres!!!!!!!

Responder
:: John Doe ::  

te hice un agradecimiento en mi blog por haberme ayudado con lo del contenido duplicado

de nuevo

muchas gracias

Responder
albus  

hola, muy buen blog y muy bueno contenido! pero debo decir con todo respeto que la manera de explicar los trucos es un poco complicada, aveces no vas directo al grano.

pero aun asi saludos!

Responder
Bole  

Hola Jmiur, muy bueno el script.
Pero no consigo que funcione con Explorer, con Firefox funciona perfecto.
¿sabes si hay algún script para los estandares?
Probé con uno que tienes tu puesto en tu blog y ahora tengo 2 puestos

http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js"

http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js"

El último es el que he cogido de tu blog.
Finalmente he quitado el script del scroll hasta encontrar solución, espero me puedas ayudar pues ese script es muy bueno para no tener que utilizar mucho espacio y poner bastante contenido.
Un saludo y gracias por, darnos a conocer tantas cosas en tu blog.

Responder
chinasky  

Me encanta tu blog del que he aprendido mucho y me encanta este scroll que me encantaria utilizar en alguno de mis blogs. pero... donde puedo encontrar esa imagen que simula una marquesina??? Gracias por anticipado

jc.chinasky@gmail.com

Responder
JMiur  

Bole:
En IE7 lo veo funcionar normalmente. Estoy usando eso que dices:
http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js
¿Podrías ponerlo en algún post de pruebas así lo miro online? No es sencillo verificar las cosas con IE pero tal vez logre ver si hay un error.

chinasky:
Esa imagen la cree con un editor pero acabo de subirla a ImageShack así que puedes descargarla desde AQUÍ.

Responder
Bole  

Hola Jmiur, he habilitado el script solo para esta zona.
http://www.elportalico.com/web/content/view/33/67/
Y a mi por lo menos me deniega el acceso, como ves es que ni me deja entrar a la web (si a ti también te pasa) si quieres puedes mirar el contenido del HEAD, sacalo del enlace de mi nombre, es el mismo que para esa sección.
Sin embargo con Firefox o Chrome se ve.

Por cierto no hagas caso de quien dice que no vas al grano en los post, todo lo explicas perfectamente, con ejemplo y los codigo bien a mano, además estás muy atento siempre a todo el que escribe, sigue adelante como vas.

Responder
JMiur  

EPA!!! n osolo no funciona allí sino que se produce un error grave. Realmente es extraño porque este post que incluye el script se muestra correctamente, lo mismo que la página original así que me inclino a creer que hay alguna incompatibilidad con algún otro script en la misma página.

Lo único que veo como "error" es que se trata de cargar esto:
http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js
que no existe. Pero dudo mucho que ese sea el problema.

Yo, probaría una cosa. En lugar de colocar el script en el HEAD, lo colocaría al final de la página, antes de </body> para que toda la página esté cargada. Sólo es un albur.

Responder
Bole  

Hola de nuevo, mira lo que he hecho, quité el script que decias que no existia, bajé el script del scroll antes de /body>, pero no funcionaba, ese script a de ir en el Head, viendo esto me decidi a probar el un html limpio y sigue igual con IE7, pero he visto que ya no sale error grave y solo sale en la parte de arriba " Explorer impidió que un script o Active X se ejecutara ¿permitir?" bueno más o menos eso, en fin lo que sale siempre que bloquea algo.

¿se te ocurre algo? porque si tu puedes verlo yo y los mios deberian, como te he dicho no dá error y al dar a permitir ver script o active x, se ve el efecto, pero en la web sale el error y además no dice cual es ni como solucionarlo.
Gracias por tu atención Jmiur.

Responder
Gem@  

No sé que me pasa hoy que tu blog me tarda mucho en cargar :(

Responder
JMiur  

Gem@: ni idea, juro que no he tocado nada :D

Bole: pregunto ¿este post lo ves bien? No deberías tener problemas más allá de las advertencias que haga el navegador y que dependen de cómo esté configurado.

En este caso, el script no está ni en el head ni al final de la página, está en el mismo post porque, en realiad, puede estar en cualquier parte. Hasta donde logro ver, carece de códigos complejos, es bastante simple así que sigo inclinándome a creer que hay alguna incompatibilidad y, como bien dice, IE no informa nada l oque lo hace complciado de resolver.

Responder
Bole  

De nuevo cruzando el charco!!

Que tal Jmiur...
Bueno te cuento, lo primero tu post lo veo bien con IE7, probé de todas maneras y me fallaba siempre, al final harto opté por poner un Iframe con el scroll dentro y así si cargaba bien IE7, pero demoraba mucho la carga d la web y empeze mirar concienzudamente el código del HEAD, finalmente encontré incompatibilades (eres un crak)tenia unos script que venían con la plantilla para motools y algún script más, los quité todos y así si funciona y además ha mejorado sustancialmente la carga de la página, pero ahora surge otro problema, yo tengo un script que hace pestañas y el el scroll me lo anula y debo elegir o scroll o pestañas, eso si solo en IE7, con Firefox, todo ok.
Pienso que debe haber alguna incompatibilidad más, en fin que me has ayudado bastante y creo que te puedo "liberar" y que sigas con tus cosas, de todas maneras si te necesito o por el contrario soluciono el problema te lo hago saber por aqui, así por si alguien le pasa que sepa que hacer.
Lo dicho, gracias por todo y sigue ilustrandonos con tu blog.

Responder
JMiur  

Saludos, Bole: me alegro que por lo menos hayas encontrado donde está el problema. Realmente es difícil de solucionar porque en IE es casi imposible hacer un debug. Si averiguas algo, me avisas :)

Responder
Luz de Luna  

:P sorry es solo para poner el subcribe así se cuando me respondes!:P
Bueeee hoy toy sin cerebro, mañana quizas me lo devuelvan!jajajajaajj

Responder
JMiur  

Pero, no veo la pregunta, Luz :D

Responder
Luz de Luna  

jajajaja también me olvide de la pregunta?? naaaaa con este son 4 comment, los recibiste a todos? te preguntaba si debía cambiar el script de lugar porque no me lo aceptaba completo y si ese era el motivo por el cual no volvía a repetirse el pasaje de imágenes (a menos que saliera y volviera a entrar a la página)
mmm se entendió algo o te hago mas tranquilita un mail mañana?? jaja será el cambio de hora que me afectó?

Responder
JMiur  

No, no los recibí porque los comentarios están funcionando pésimo.

Sí mejor me lo explicas por mail :)

Responder
Oloman  

Pues... efectivamente, parece que el formulario de comentarios no funciona del todo bien. Si te sirve de pista, este otro lo hago desde "el modo antiguo". Repito el texto.


Lo que le pasa a Luz de Luna es que la secuencia de imágenes que ha creado, le sale una sola vez y se detiene tras la primera visualización completa. Por mi parte también detecté fallos cuando intenté introducir javascript en los DIV.

He comprobado que para algunos tipos de elementos es necesario escribir todo el código seguido, sin saltos de línea. Luego me he dado cuenta de que Argilla lo advertía en su explicación, por lo que parece que el inglés no es lo nuestro. :)

El problema está en que además, ambos hemos puesto el ejemplo generico en distintas líneas para que se viera más claro y no hemos advertido de lo anterior a los lectores.

Otra cosa más. Creo que es por el uso de DIV independientes, pero el caso es que este script va dejando un margen de 2 pixels por cada lado (arriba-abajo). Para que no vaya desplazando a cada paso la ubicación correcta de -por ejemplo- las imágenes, el contenedor debe tener 4px más de alto que cada elemento.

Siempre un placer leerte.

Responder
JMiur  

Oloman:

Creo que lo mismo, el que no anda funcionando bien es el formulario incrustado; ya he tomado la costumbre de copiar lo que contesto porque debo publicarlo dos o tres veces. Un infierno, realmente :D

En los posts, como regla general, siempre hay que escribir todo en una sola línea para que no se creen saltos de línea; es una limitación muy molesta.

Lo que dices del ajuste en el caso de imágenes es cierto.

Responder
Alejandro  

Logre implementarlo para una galería de imagenes con muy buenos resultados. Tenemos un par de galerias con etiquetas marquee que el ie se ven muy bien pero con firefox son un desastre.
Me preguntaba si es posible imitar el efecto que se logra con la etiqueta marquee, es decir, que en una marquesina vertical al poner el puntero encima se detenga y reanude su movimiento al quitarlo?.
Y desde ya, gracias por el truco JMiur, el efecto es muy bueno y se pueden lograr cosas muy llamativas con el, como dices, solo es cosa de imaginación, un cordial saludo

Responder
JMiur  

Imagino que si aunque las marquees son difíciles de controlar, hay que usar lguna clase de script que modifique las propeidades. En este post hay un ejemplo de un script que cambia la dirección, debería buscarse algo parecido.

Responder
Yurika-Chan  

Con este se puede mostrar RSS???

JMiur  

El script desplaza textos, de dónde salen esos textos ya depende de otras cosas; si es un feed, deberás crear algún código que los lea y luego aplicar el efecto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR