JMiur [E]

Voy a tratar de resumir varias preguntas en una sola respuesta porque todas están relacionadas.

Utilizo un enlace del tipo IR AL INICIO con una imagen (las típicas flechitas que nos permiten subir cuando una página es muy larga) y la dejo fija de tal manera que cuando hago un scroll, siempre permanece en el mismo lugar ... pero, ocurren dos cosas: primero, no me funciona en IE y segundo, quiero repetir eso en un post y tampoco funciona.

El primer problema tiene una respuesta sencilla: algunas versiones de IE no soportan esa propiedad (position: fixed) así que no hay nada que hacer más que olvidarse del tema. Podemos elegir si queremos usarla o no, es indiferente mientras seamos conscientes de la limitación.

El segundo problema es diferente. Por lo que me muestran, usan un código de este tipo:

<a href="#">Ir al inicio</a>

Funciona bien pero siempre que esté en la plantilla. Cuando lo ponemos en un post, apenas lo editamos veremos que el código cambia a algo así:

<a href="http://www.blogger.com/post-edit.g
?blogID=XXXXXXXXXXXXXXXXXX
&postID=XXXXXXXXXXXXXXXXXXX#">Ir arriba</a>

El efecto que produce es malo; al hacer click, si estamos logueados, se abre la ventana del editor del posts ¿Es un error de Blogger?

Si y no, en realidad, es la forma en que interpreta los enlaces vacios, es decir, los que no apuntan a una dirección URL. Es más, fuera de Blogger, en una página web "normal", usar href="#" no produciría ninguno de los dos efectos. Sería lo que es, un enlace vacío; algo que usamos cuando no colocamos la acción a realizar en el atributo href sino en algún evento como onclick. Esto es lo que nos permite ejecutar scripts y la sintaxis óptima para Blogger es:

<a href="javascript:void(0);" onclick="instrucciones;return false;">ENLACE</a>

o bien

<a href="#" onclick="instrucciones;return false;">ENLACE</a>

siempre y cuando no utilicemos el modo REDACTAR en un post o lo coloquemos en la plantilla (más información).

Bueno, ¿y entonces?

En cualquier parte de una página, incluyendo la plantilla o un post de Blogger, podemos usar enlaces especiales para desplazarnos de un lugar a otro dentro de la misma página sin necesidad de recargarla. A estos enlaces se los llama anclajes y tienen dos partes:

La posición se marca con el atributo name y permanece siempre oculto:

<a name="unNombre"></a>

y el enlace en si mismo (donde hacemos click) tiene esta sintaxis:

<a href="#unNombre">IR AL EJEMPLO</a>

o sea, es igual que un enlace común pero, le anteponemos el carácter #

Usando Prototype y los efectos de Scriptaculous, esto lo podemos hacer con un poco de sofisticación; por ejemplo, agregando un suave movimiento de desplazamiento.

Como en el resto de los ejemplos debemos tener ambos scripts funcionando y cargados en la plantilla:
<script src="URL/prototype.js" type="text/javascript">
<script src="URL/scriptaculous.js?load=effects" type='text/javascript">
Usarlo es muy fácil:
<a onclick='new Effect.ScrollTo("elNombre",{offset:-140}); return false' href="#elNombre">
  TEXTO / IMAGEN
</a>
donde reemplazamos elNombre por el ID de algún DIV de la plantilla. Por ejemplo, para ir al inicio de una página, podríamos poner:
<a onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false' href="#outer-wrapper">
  TEXTO / IMAGEN
</a>
El enlace puede ser tanto un texto como una imagen tal como he colocado en el pie de página de cada post.

Para abajo ... para arriba ... todo lo controlamos con el atributo href.

Vamos al final de la página con href="#footer-wrapper" o las etiquetas de la sidebar con href="#Label1" con un solo click.

Como los efectos de Scriptaculous sólo dependen de variables de tiempo, no importa la distancia, sea cual sea, tardaremos lo mismo; si es corta, el efecto será más lento y si es larga, será más rápido.

49 comentarios:

La Blogueria  

Vi este efecto en varios sitios y la verdad que me gustó el efecto de scroll... La librería en general, es fantástica, ¡ya sé que no la hiciste tú, pero gracias por ponerla a nuestra disposición de manera tan sencilla ;D!

Saludos.

Responder
JMiur  

No sólo no la hice, apenas la entiendo :D

Pero en la web hay mucha información y pequeños scripts que usan sus funciones. Realmente asombroso :D

Responder
Tal y como siempre  

Hola Jmiur, sigo tu bog desde hace un tiemo y me parece que es bastante bueno, me ha ayudado bastante en algunas tonterias de mi blog, que hacen que me parezca que esta mejor. Gracias por todo y nada que espero que si alguna vez necesite ayuda me la puedas dar ;)
Un saludo

Responder
JMiur  

Gracias por el comentario. Cualquier ayuda, estoy a tu disposición.

Responder
solrac  

JM, muy buenas todas tus explicaciones sobre Scriptaculous ... estoy tomando buena nota de todas ellas ;)

Bueno, precisamente acabo de encontrar un artículo referente al problema del {position: fixed}, hay un hack para solucionarlos llamado GhostInTheBox ... ¿es cierto? ... aunque sea así, me gusta más el efecto de no subir/bajar de golpe ;)

Responder
JMiur  

Probaré ese hack Solrac a ver cómo funciona.

Responder
Fernando  

donde pongo el ultimo código para que surja el efecto?

Responder
JMiur  

El código lo pegas donde quieres que aparezca el enlace que hará el efecto, ya sea un texto tipo "ir a" o una imagen cualquiera.

Por ejemplo, en mi plantilla están en el pie de página de los posts:

<p class="post-footer-line post-footer-line-1">

Responder
Fernando  

Ya con el Ultimo codigo no tendre problema?

Responder
JMiur  

En realidad, con ninguna de las dos alternativas. La segunda evita que haya interferencias con otro tipo de scripts del mismo tipo.

Es la solución que empleo yo y no he visto que haya inconvenientes de ninguna clase.

Responder
Martin  

Buenos días,yo cree una galeria con scriptaculous y la inserte en una pagina en donde tamb. tengo 2 archivos flash. El problema que tengo es que al abrir la galería los flash superponen la imagen y me tapan parte de la galería.
Necesitaría encontrar una solucion, ya que es lo unico que me falta para terminar el sitio.
Por favor si alguien sabe mandenme un mail a tincho_lord@hotmail.com.
Muchas gracias y saludos

Responder
Martin  

Buenos días,yo cree una galeria con scriptaculous y la inserte en una pagina en donde tamb. tengo 2 archivos flash. El problema que tengo es que al abrir la galería los flash superponen la imagen y me tapan parte de la galería.
Necesitaría encontrar una solucion, ya que es lo unico que me falta para terminar el sitio.
Por favor si alguien sabe mandenme un mail a tincho_lord@hotmail.com.
Muchas gracias y saludos

Responder
JMiur  

En principio, no debería haber inconvenientes. Hay un post en mi blog de pruebas donde he colocado una archivo SWF y una pseudo galería (VER)

Eso, es algo que se controla con una propiedad llamada z-index del CSS. Los valores normales serían estos:

#lightwindow_overlay z-index: 500
#lightwindow z-index: 999
#lightwindow_contents z-index: 0
#lightwindow_loading z-index: 9999
#lightwindow_galleries z-index: 50

De cualquier forma, si el problema no puede verse online es difícil analizar si es que existe algún otro detalle particular.

Responder
josec  

se puede hacer este efecto que en vez de subir al top central , que se quede en el top de el titulo del post?


href="#outer-wrapper


está enviando al top central de la pagina, pero no al titulo del post.

se puede???

Responder
josec  

olvide detallar , que si se como pero de manera manual para cada post.
lo que me inquieta es de manera automatica para cada post generado.

gracias.

Responder
JMiur  

Para identificar los posts o títulos de manera individual y poder hacerlo automáticamnete, te serviría la técnica explicada acá.

Responder
josec  

lo siento jmiur pero nada referente al caso...

ya lei varias veces y nada.
me tocara hacerlo manual, solo que se tratan de algunos 500 post... :(

Responder
JMiur  

josec:

A ver si podemos hacerlo más sencillo. Fíjate si encuentras esto en tu plantilla:

<a expr:name='data:post.id'/>

Y lo cambias por esto:

<a expr:name='data:post.id' expr:id='data:post.id'/>

De esa manera, cada post estará identificado con un nombre único que en este caso es el ID que le da Blogger al publicarse.

Ahora, hay que cambiar el enlace; en lugar de poner #outer-wrapper hay que poner ese dato:

new Effect.ScrollTo("outer-wrapper" .............

El problema es sencillo pero Blogger nos complica porque el código se vuelve un poco estrafalario. a ver si puedo mostrarlo aquí y si no, cualquier cosa, me mandas un mail y te lo envio por correo:

<a expr:href='&quot;#&quot; + data:post.id'
expr:onclick='&quot;new
Effect.ScrollTo(\&quot;&quot; + data:post.id +
&quot;\&quot;,{offset:-140}); return false;&quot;'>
EL ENLACE
</a>

Todo en una sola línea.

Responder
Sharck_Bloody  

hola, estan todos los pasos a la pefeccion, exepto la parte de los enlases, creo que tengo un problema con los archivos, los link que proporcionas(http://wiki.script.aculo.us/javascripts/prototype.js
http://wiki.script.aculo.us/javascripts/scriptaculous.js) estan expirados y me baje el archivo de la pagina, peo no entiendo bien cual es cual, subi el de nombre prototype y el de scriptaculus, pero como que se bloquea la pagina y no carga, de verdad me seria de mucha ayuda si me pasas los link de donde vos tenes alojados los archivos para poder bajarlos y alojarlos en mi servidor, espero no te sea mucha molestia, suerte.

Responder
JMiur  

Debido a los problemas de alojamiento de los últimos tiempos, estoy usando los scripts que proporciona Google así qya no tengo necesidad de alojarlos

Fíjate AQUÍ para ver los detalles y cómo hacerlo.

Responder
HaCk CrAcK  

Como seria para mootools este efecto de ir lentamente?

Responder
JMiur  

La verdad, lo desconozco.

Responder
HaCk CrAcK  

huu que mal, porque yo tengo mootools y quiero ese efecto, conoces algun otro script que permita hacer eso? A de paso no puedes visitar mi blog para ver si te gusta mi diseño, y dejarme un comentario? mi blog nuevo es www.xybercafe.blogspot.com

Responder
Quique  

Qué bueno! Gracias JMiur, funciona a la perfección!
Tuve que tirar mano de las librerías de Google pues con los .js de mi servidor no funcionaba. Menos mal que había una solución y que tu, como siempre, nos la explicaste.
Un saludo y enhorabuena por el blog.

Responder
Lino  

Lo de la imagen para ir arriba, me va en un blog pero no en otro con distinta plantilla, pero en ambos casos desde el IE7. Por lo tanto en mi caso, no es problema de navegador.

Agradecería alguna sugerencia

los blogs:
El El fin de la eternidad
¿cuál es la realidad?

Saludos

Responder
JMiur  

Quique:
Me alegro que sirviera :D

Lino:
No veo que en tus blogs esté colocado el script.

Responder
Lino  

Es cierto, pido disculpas. He leído precipitadamente. Sin embargo, tengo un código que aprovecha la propiedad que comentas arriba de posición fija, que presenta la peculiaridad que describo, en un blog funciona y en otro no. No lo entiendo. El código es el siguiente:

[a href="#"][img width="30" alt="flecha de retorno" style="display: scroll; position: fixed; bottom: 5px; right: 5px;" src="http://bp1.blogger.com/_n5kzhoUpPTg/SGV2rIp-F2I/AAAAAAAAANQ/e1S_kbrUYh4/s400/arrow_up_128x128.png" title="Volver arriba"/][/a]

He cambiado los "<" y ">" por [ ], respec. para que me admita el comentario. Este codigo es un simple enlace o anclaje sin más complicación como comentas en el artículo, pero la imagen sale "flotando" como toca en un blog (el fin de la eternidad) y en el otro no.

Supongo que debe ser alguna propiedad o atributo de alguna clase o div, pero me gustaría tener una orientación para poder empezar por algún sitio.

Gracias en cualquier caso. Saludos

Responder
JMiur  

Veo que no funciona; mejor dicho, que no queda fijo. Online, los códigos y propiedades parecen ser los mismos pero, en IE me muestra que hay errores en la página aunque no me dice cuales.

¿Has probado mover el eleemnto HTML de ahí y colocarlo, por ejemplo en el footer?

Otar posibilidad es directamente ponerlo justo antes de </body> por si se ve afectado por alguna propiedad de la sidebar que no logro ver.

Responder
Lino  

Si. Lo he puesto en varios sitios. Ahora mismo está en dos, antes del /body y en la plantilla como widget, al final del todo.

Es una cosa rarísima.

Gracias por el interés

Responder
JMiur  

Es realmente extraño. Obviamente hay algo que está influyendo pero, con las pocas herramientas que tiene IE para eso, es muy difícil establecer cuál.

Responder
Tigremen  

Hola JMiur te felicito por este cambio de moderar los comentarios.
Por otro lado en otro blog vi este efecto de ir arriba pero con jquery, no lo pude utilizar ya que no es compatible con scriptaculous y prototype, pero en el demo me gusto mucho que cuando esta arriba no aparece el texto "ir arriba" hasta que comienzas a bajar aparece con pero con efecto fade in, cual seria el codigo? para agregarle a este script esa funcion.

Desde siempre agradecido con tus aportes.

Responder
JMiur  

La verad, no sabría contestarte, Tigremen.

Responder
Rocko  

Espero que no te moleste JMiur, voy a usar tus pequeñitas imágenes de "ir Arriba" e "ir abajo" durante esta semana mientras hago las mías. Sólo mientras reparan mi pc y puedo usar Illustrator.

Muchas gracias por toda la ayuda que brindas en tu blog. Un saludo desde México.

Responder
JMiur  

Use, nomás :-)

Responder
Gabriel  

Hola, tengo un pequeño problema, posiblemente sea una tonteria pero no doy con la solucion. ya tengo todo el scrip citado y el provado el scroll y se mueve perfectamente, este es el codigo que tengo en la parte de d i v class='post-body entry-content'*> para ser mas exactos lo tengo justo debajo de donde tengo el boton de comparit y me gusta de facebook (no se si sea por esto), bueno como sea asi tengo la cuestion.

[div style="float:left;padding:15px;"][a href='#superior-wrapper' onclick='new Effect.ScrollTo("superior-wrapper",{offset:-140}); return false' rel='nofollow'][<img scr="http://imgur.com/QoqVt.png" border='0' alt='Ir Arriba'/][/a][/div]

No puedo hacer que se vea la imagen :S

Responder
JMiur  

¿En qhe blog tienes eso, Grabriel? Porque en http://metalbajo0.blogspot.com/ no veo nada de eso, ni siquiera el botón de Facebook al que haces referencia.

Responder
Gabriel  

Todo en vista previa, soy de los que lanza todas las actualizaciones de una vez, tengo todo dentro de [div class='post-body entry-content']

Responder
Gabriel  

Si te sirve una captura puedo sacarla (perdona el doble post).

Responder
JMiur  

Así, a simple vista, el código es correcto. Sin embargo, veo que cuando coloco la dirección del la imagen:
http://imgur.com/QoqVt.png
el navegador, me redirige a esta otra dirección:
http://i.imgur.com/QoqVt.png

¿Por que no pruebas alojando la imagen en Blogger mismo?

Responder
Gabriel  

Nop, nada de nada, intente poniendolo en footer-line-one quitando el d i v usando tu imagen y nada de nada :S tengo pensando hacerlo con una class pero no tengo ni idea como bueno si, seria asi.

a.up{
background:url('http://i.imgur.com/QoqVt.png') top center no-repeat;
}

¿Crees que funcione asi? otra duda que tengo que no tiene que ver con este caso y ya que blogger y los comentarios 3 esta cerrado, queria saber que metodo utilizaste para que se vea la imagen de quien postear o mejor dicho en cual de tus tutoriales esta para poder implementarla, en dicha entrada las cosas "salieron bien" es decir todo perfecto con los anonimos, pero como dijiste, no sirve con los usuarios de blogger :S

Responder
JMiur  

A ver. Copio y pego el código tal cual lo he probado y funciona. Lo hago pro si en el código que me muestras, hay algún error que no logramos detectar:

<div style='float:left;padding:15px;'>
<a href='#superior-wrapper' onclick='new Effect.ScrollTo("superior-wrapper",{offset:-140}); return false' rel='nofollow'>
<img border='0' src='http://imgur.com/QoqVt.png' alt='Ir Arriba' />
</a>
</div>

Responder
Gabriel  

¡Funciono! ¡Mil gracias!

Responder
JMiur  

Genial. Todavía no entiendo cuál es la diferencia con el otro :-)

Responder
El Chueco  

Que tal, te mando saludos. Un favor mi "Ir arriba" no va arriba me podrias ayudar cual es el problema. Muchas gracias.

Responder
El Chueco  

Como siempre se me olvida colocar la URL de mi Pag.
http://esencialanime.blogspot.com/

Responder
JMiur  

Eso pasa porque en esa plantilla no hay nungún DIV cuyo id sea outer-wrapper.

Debes buscar algún otro; tal vez crosscol

Responder
EACTfull  

Excelente efecto gracias :))) ☺☻

Responder
Francmi08  

Hola Jorge, después de aplicar esto en mi plantilla y por pura casualidad buscando otra cosa, me encontré con un enlace que lleva a una entrada TAL CUAL ES ESTA MISMA, pero en otra pagina en otro blog...me da la impresión de que es una pura y simple copia de el post.Te lo hago saber porque creo que los curros que te debes pegar para facilitarnos toda la información y consejos que nos das, parece que están siendo aprovechados por "otros".Te paso el enlace por si quieres ver lo que te digo:
http://www.webearsocial.com/2008/01/ir-al-inicio-pero-con-scriptaculous.html#more
Un saludo.

Responder
JMiur  

Lei tu comentario en otra entrada y sí, parece que esa gente se dedica a eso :D

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