Scroll de Carlitos

Bravenap · #1 (**permalink**) 01/02/2003, 16:54

Hace bastante Carlitos no dejó una opción interesante para crear un scroll en una página a base de capas, podéis ver el tema aquí.

La verdad es que funciona a las mil maravillas salvo por una cosa.
Si mantenemos el ratón sobre uno de los links para subir (o bajar) la capa del contenido termina saliéndose de la ventana indefinidamente hasta que no retiremos el ratón.

Mi pregunta es: ¿cómo se podría evitar esto parando la función cuando la capa llegue arriba del todo o muestre todo su contenido?

Yo había pensado en algo como un condicional pero no conozco la sintaxis. Algo así como:

if contenido.style.top = 0
clearTimeout(anima)
end if

Por cierto, ¿en JavaScript no hay que poner ";" después de cada sentencia?

Gracias por todo.

tunait · #2 (**permalink**) 01/02/2003, 16:58

Hola,

Nadie mejor que Carlitos para que haga ese ajuste a su script

De momento te contesto a esto:

Cita:

Por cierto, ¿en JavaScript no hay que poner ";" después de cada sentencia?

No necesariamente. Dar un intro es lo mismo, indica también un final de sentencia.

El ; se usa principalmente cuando queremos poner más de una sentencia dentro de una misma línea.

saludos

Bravenap · #3 (**permalink**) 01/02/2003, 17:10

Gracias por tu pronta respuesta, en tu línea como siempre.
De todas formas, creo que ya lo he descubierto, estoy probándolo y enseguida lo pongo. A ver si me doy prisa.
Hasta ahora.

Bravenap · #4 (**permalink**) 01/02/2003, 18:28

Bueno, he conseguido algo:
http://personales.ya.com/pyrus/scroll.htm
Veréis que he puesto una etiqueta al final (si desplazáis todo el scroll) que podría ser la que indicaría que se ha llegado al final, pero ahí me he quedado bloqueado. El tema está en retocar esto:

function arriba(){
if(marca.style.pixelTop == 100 ){anima= setTimeout("arriba()",0)}
else{contenido.style.top = contenido.style.pixelTop - 5
anima = setTimeout("arriba()",50)}
}

Ahí queda entonces, gracias de nuevo.

Carlitos · #5 (**permalink**) 01/02/2003, 20:45

Te paso el código.

Código:

<script>
var anima
function abajo()
{
if (contenido.style.pixelTop<0)
  {
  contenido.style.top = contenido.style.pixelTop + 5
  anima = setTimeout("abajo()",50)
  }
}
function arriba()
{
if (contenido.style.pixelTop>-contenido.style.pixelHeight)
  {
  contenido.style.top = contenido.style.pixelTop - 5
  anima = setTimeout("arriba()",50)
  }
}
function para()
{
clearTimeout(anima)
}
</script>

<body scroll=no>
<div id="cursor" style="position:absolute; left:10px; top:10px; width:40px; height:100px">
  <a href="#" onmouseover="arriba()" onmouseout="para()">arriba</a>
  <br>
  <a href="#" onmouseover="abajo()" onmouseout="para()">abajo</a>
</div>
<div id="contenido" style="position:absolute; left:50px; top:0px; width:700x; height:1000px   ; z-index:1">

Aquí<br>
 el<br>
 contenido<br>
 de<br>
 la<br>
 página.<br>

</div>
</body>

Sólo tienes que cambiar el valor de la altura (height ) para que se ajuste a tus necesidades.

Suerte.

Bravenap · #6 (**permalink**) 02/02/2003, 05:24

Comprendido Carlitos, gracias por la respuesta, lo que pasa es que de esta manera tengo que crear una capa para cada contenido que quiera incluir y, por ejemplo, si el tamaño de la fuente aumenta por el explorador del usuario, la capa se nos quedaría corta.

Tal es el diseño que quiero crear que la capa quiero que mida un tamaño determinado, además porque uso una función innerHTM y un iFrame y, ... bueno, el caso es que la capa varía su contenido.

Por eso intentaba, crear alguna función que reconociera que se había llegado al final del contenido (div del final), por ejemplo, especificando la salida de arriba() o abajo() cuando:

marca.style.pixelTop==100px

A lo mejor esto funcionaría modificando algo del estilo de la capa marca, como position:absolute o ....

Seguiré probando.
Gracias.

Bravenap · #7 (**permalink**) 02/02/2003, 18:51

Creo que más o menos lo he solucionado

http://personales.ya.com/pyrus/scroll.htm

el problema es que he tenido que ajustar a mano la distancia entre las dos flechas
para que salga un valor entero de paso de la bola, es decir, si la capa contenido
se mueve de 5 en 5 pixeles, la bola lo hace de 1 en 1, ya que he podido comprobar
que poniendo una distancia aleatoria entre las dos flechas me salía un paso de
1,73548165.... y claro, parece ser que el pixel ha de ser un valor entero ¿no?

Bueno a ver que os parece entonces.

Carlitos · #8 (**permalink**) 03/02/2003, 13:10

Te ha quedado muy bien.

Bravenap · #9 (**permalink**) 03/02/2003, 14:03

Gracias Carlitos por el apoyo, varias horas me dejó sin dormir el dichoso script.
De todas formas, ¿creéis que poniendo las unidades en mm en lugar de en pixeles la cosa resultaría mejor?
¿Hay alguna otra forma de resolver el problema "matemático"?

Gracias por n-ésima vez.

sgafo · #10 (**permalink**) 04/02/2003, 03:39

holaaa:

gracias a los dos, me ha venido muuuy bien

y ahora una consulta: ¿como se puede controlar el numero de lineas que muestras de manera que solo te desplaces hasta el final del texto y no hasta el final del tamaño fijado?

os recuerdo que tengo un iframe, no se si influye

saludos

sgafo · #11 (**permalink**) 05/02/2003, 04:16

Hola Carlitos y Bravenap:

¿como se puede controlar que no se muestren las opciones de desplazamiento?

Es para que aparezcan unicamente si lo que vas a visualizar "no cabe", al igual que el scroll por defecto

Grcias con antelacion

Saludos.

Carlitos · #12 (**permalink**) 05/02/2003, 11:53

Hola Sgafo.

Se me ocurre, si sabes cuanto mide el iframe (en pixels) compáralo con lo que mide lo que quieras poner dentro.
Si dentro > iframe, muestra la capa del cursor. (que por defecto tendrás oculta)

No sé si sabes a lo que me refiero. Espero que sí.

Un saludo.
Carlos.

sgafo · #13 (**permalink**) 05/02/2003, 12:40

Si, pero no se como medir esos pixels del contenido, la verdad.

Admito sugerencias....

Gracias Carlos.

sgafo · #14 (**permalink**) 02/05/2003, 07:16

Carlitos:

este maravilloso script del que hago uso en multiples paginas de mi ocupacion actual, no me funciona para Netscape y no entiendo el porque.

Ya sabes a que pagina me refiero, asi que si puedes, te apetece, te aburres o quieres realizar una buena obra, pruebalo y veras que no hace nada de nada....

Yo por mi parte intentare modificar el codigo que tengo para el desplazamiento horizontal, que no es el mismo, ya que ese desplazamiento si que funciona (se me olvidaba: gracias, caricatos)

Saludosss

Bravenap · #15 (**permalink**) 02/05/2003, 08:59

Hola, hace tiempo que olvidé este mensaje, pero el otro día encontré una página con una solución compleja pero muy efectiva.
Veréis que no tiene nada que ver con la informática, sino más bien con otro de los campos en los que me muevo: la botánica.

Pues bien, echad un vistazo a la página, que yo creo que está bastante bien de diseño, y encontraréis la mencionada solución para el scroll.

www.orquideasibericas.com

Si os fijáis también en la página de incio veréis que cada vez que se actualiza, cambian los colores y la planta que se muestra. Curioso y bonito.

Un saludo.

sgafo · #16 (**permalink**) 02/05/2003, 09:12

bravenap: muy bonita la pagina, si señor....

ya lo ojeo a ver si me sirve...

muchas gracias

Carlitos · #17 (**permalink**) 02/05/2003, 12:19

A ver, a ver...

Esto deberías cambiar:

function abajo()
{
pixel=parseInt(document.getElementById("contenido" ).style.top);
if (pixel<0)
{
document.getElementById("contenido").style.top = pixel + 5
anima = setTimeout("abajo()",50)
}
}
function arriba()
{
pixel=parseInt(document.getElementById("contenido" ).style.top);
altura=parseInt(document.getElementById("contenido ").style.height)
if (pixel >- altura)
{
document.getElementById("contenido").style.top = pixel - 5
anima = setTimeout("arriba()",50)
}
}

Creo que así tiene que funcionar. (no lo he probado)

Ya me dirás algo.

sgafo · #18 (**permalink**) 02/05/2003, 12:51

Carlitos!!!!!!!!!!!!!

Ahora no puedo probar pero lo hare mas tarde.

Gracias, como siempre

Carlitos · #19 (**permalink**) 03/05/2003, 12:09

ups, no va en Netscape 7. Seguiré investigando. Maaañana te doy la solución.

alsapa · #20 (**permalink**) 04/05/2003, 00:09

Bravenap, sgafo, Carlitos ( hola

)

Gracias por el código (

) del scroll que estais tratando.

Pero, ¿que hay que hacer para alargar un texto? (

), ya que yo he puesto un texto muy largo y llega el momento que se queda parado, habiendo llegado la bola al final.

Gracias por vuestra contestación.

Bravenap · #21 (**permalink**) 04/05/2003, 04:37

Hola, alsapa.

En el enlace que puse, estaba la solución a este problema.
El script era bastante largo, venía en un archivo .js aparte, pero te desentendías de la longitud del texto.
De esa forma, cuando el texto era muy corto la bolita bajaba rápido pero si era largo iba más lenta, de modo que siempre coincidía el final del texto con el recorrido completo de la bola.
Por cierto, las imágenes de las flechas y de la bola, ¿son las mías? Es simple curiosidad.
Suerte.

sgafo · #22 (**permalink**) 04/05/2003, 06:30

Hola alsapa!!!!

Si has aplicado el primer script que el majo de Carlitos compartio con nosotros, la solucion esta en el atributo height de la capa que contiene el texto a mostrar

fija este atributo en lo que tu necesites para tu texto

saludos y suerte

alsapa · #23 (**permalink**) 05/05/2003, 00:14

Primero deciros que me perdoneis por haber tardado en contestar, pero ..., ¡¡¡ LA FERIA DE SEVILLA !!! ....

- Sgafo, he aplicado el script del enlace de Bravenap.

- Bravenap, las flechas y la bola son las tuyas, pero me sale con fondo blanco. Te diré el por que: Al "guardar imagen como..." solo me da opción para guardarla como "Mapa de bits(*.bmp)" y después con Paint Pro Shop la pasé a "gif", pero me ha modificado el fondo (ya lo arreglaré más adelante).

- A ambos, ya he cambiado el atributo height y me alarga el texto que es lo que yo queria, ¡¡ pero ... !!

la bola permanece estática en la parte de arriba, o sea, no se mueve hacia abajo.

Como habreis observado, sé muy poco de estas cosas y os pediría que me hiciérais el favor de arreglarmelo vosotros.

Abrazos.

sgafo · #24 (**permalink**) 05/05/2003, 01:10

No es que yo sepa mucho (mas bien lo contrario), pero ¿has probado a poner el atributo height en limites igual que el de contenido?

Pruebalo y me cuentas... sino te lo miro en un ratin

P.D: por estas latitudes tambien hacemos nuestra feria particular...

asi que te entiendo, chaval

alsapa · #25 (**permalink**) 05/05/2003, 06:21

Sgafo, aquí el chaval de 60 años (que conste que no me he molestado, al contrario es un halago para mí)

Ahora funciona bien

.

Te agradezco que me hallas soportado por la lata que te he dado, y te repito las gracias... gracias.. y mil veces gracias.

LA FERIA ACABÓ AYER

Abrazos.

sgafo · #26 (**permalink**) 05/05/2003, 06:38

jejejeje... si te llamas a ti mismo pesado es que no has leido muchos mensajes mios

y seras un chaval hasta que te pongan el traje de pino, hombre

estuve haciendo varias pruebas con tu codigo, y consegui unas chapucillas, pero no di con la solucion correcta... por lo que veo la tuya esta perfecta

¿probaste si funciona en nestcape?

aqui tambien acabo ayer nuestra feria particular...

alsapa · #27 (**permalink**) 05/05/2003, 07:24

No o probé con Nestcape porque no lo tengo instalado.

Estoy haciendo mis pinitos en este lio desde hace muy poco.

Si haces más pruebas y te sale algo chachi, no dudes en pasarlo, me interesa mucho este SCROLL.

Me voy a almorzar, que la parienta ya está poniendo mala cara.

Hasta otra, abrazos y

de un amigo burgales-sevillano-mallorquín. Vaya lio ¡eh!

Carlitos · #28 (**permalink**) 05/05/2003, 12:48

Bueno, probado y funcionando en Internet Explorer 5, Netscape 7 y Opera 7.

<script>
var anima
function abajo()
{
pixel=parseInt(document.getElementById("contenido" ).style.top);
if (pixel<0)
{
document.getElementById("contenido").style.top = pixel + 5
anima = setTimeout("abajo()",50)
}
}
function arriba()
{
pixel=parseInt(document.getElementById("contenido" ).style.top);
altura=parseInt(document.getElementById("contenido ").style.height)
if (pixel>-altura)
{
document.getElementById("contenido").style.top = pixel - 5
anima = setTimeout("arriba()",50)
}
}

function para()
{
clearTimeout(anima)
}

</script>

<body scroll=no>
<div id="cursor" style="position:absolute; left:10px; top:10px; width:40px; height:100px">
<a href="#" onmouseover="arriba()" onmouseout="para()">arriba</a>
<br>
<a href="#" onmouseover="abajo()" onmouseout="para()">abajo</a>
</div>
<div id="contenido" style="position:absolute; left:50px; top:0px; width:700x; height:1000px; z-index:1">

Aquí<br>
el<br>
contenido<br>
de<br>
la<br>
página.<br>

</div>
</body>

sgafo · #29 (**permalink**) 06/05/2003, 02:54

muchas gracias Carlitos...

estoy aplicando el resto de las modificaciones que me indicaste

saludos

alsapa · #30 (**permalink**) 06/05/2003, 06:57

Gracias Carlitos ...

Gracias Sgafo ...

Por los códigos del SCROLL, me ha venido de maravilla, ya os pondré el link en donde lo voy a aplicar, todavía no está terminado.

Abrazos a ambos