IR A INICIO CON Scriptaculous- POST VAGABUNDIA

| www.inhdigo.tk ©2007-2008

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:

Ir al inicio

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í:


?blogID=XXXXXXXXXXXXXXXXXX
&postID=XXXXXXXXXXXXXXXXXXX#">Ir arriba

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 webhref="#" 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 scriptsBlogger es:

instrucciones;return false;">ENLACE

o bien

instrucciones;return false;">ENLACE

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:

unNombre">

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

unNombre">IR AL EJEMPLO

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: "normal", usar y la sintaxis óptima para

Usarlo es muy fácil; donde queremos que aparezca, ponemos un enlace de este tipo:

elNombre">ENLACE

Lo más sencillo es reemplazar elNombre por el ID de algún DIV de la plantilla. Por ejemplo, para ir al inicio de una página, podríamos poner:

ENLACE

o bien

ENLACE

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.

ACTUALIZACIÓN:

He notado que, eventualmente, el script puede interferir con otro tipo de efectos que utilizan el mismo criterio, es decir, realizan acciones automáticas sobre los enlaces de tipo .

Si ocurre esto, la solución es eliminarlo y usar el mismo enlace para el efecto. Por ejemplo, para ir al inicio de una página de Blogger usaríamos:

  onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false' href="#outer-wrapper">

  TEXTO / IMAGEN

FUENTE: http://vagabundia.blogspot.com