Foros del Web » Programando para Internet » Jquery »

JQuery: scrollTo no me funciona =S... cual es el problema?

Estas en el tema de JQuery: scrollTo no me funciona =S... cual es el problema? en el foro de Jquery en Foros del Web. Hola, creo que el codigo esta correcto... los JS importados tambien... son las ultimas versiones y no se cual sera el problema... ojala me puedan ...
  #1 (permalink)  
Antiguo 02/01/2010, 06:58
de-troit
Invitado
 
Mensajes: n/a
Puntos:
JQuery: scrollTo no me funciona =S... cual es el problema?

Hola, creo que el codigo esta correcto... los JS importados tambien... son las ultimas versiones y no se cual sera el problema... ojala me puedan ayudar... les dejo el codigo SIMPLIFICADO, y aqui todo comprimido en ZIP: http://rapidshare.com/files/329229426/mi_scrollTo.zip.html (les recomiendo que vean esta ultima)

Lo que quiero hacer son anclas... en donde al hacer click en un titulo el scroll baje directamente hasta el div... de forma animada y con un rebote... efecto bounce.

Aqui esta lo que quiero hacer, es exactamente igual: http://demos.flesler.com/jquery/scrollTo/old/ (hagan click en el boton "button" del 1º ejemplo)
Muchas gracias =)

Código HTML:
<html>
<head>
<style type = "text/css">
.cuadro {
	font-family	: Trebuchet MS;
	font-size	: 14px;
	color		: white;
	background	: #222222;
	margin		: 10px;
	padding		: 5px;
}
</style>

<script type = "text/javascript" src = "../Frameworks/JQuery1.3.2.js"></script>
<script type = "text/javascript" src = "../Frameworks/JQuery.scrollTo1.4.2.js"></script>
<script type = "text/javascript" src = "../Frameworks/JQuery.easing1.3.js"></script>
</head>
<body>
<div name = "atajos" class = "atajos">
<a href = "JavaScript: $.scrollTo('#cuadro2', 800, {easing:'elasout'});">Ir a cuadro 2</a>
</div>

<br><br>

<div id = "cuadro" class = "cuadro">
AQUI MUCHO TEXTO
</div>

<br><br>

<div id = "cuadro2" class = "cuadro">
AQUI MUCHO TEXTO
</div>

<br><br>

<div id = "cuadro3" class = "cuadro">
AQUI MUCHO TEXTO
</div>
</body>
</html> 

Última edición por de-troit; 02/01/2010 a las 07:15
  #2 (permalink)  
Antiguo 02/01/2010, 10:10
 
Fecha de Ingreso: diciembre-2009
Mensajes: 72
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

necesariamente tiene que se con el efecto bounce ?
sino podrias simplemente utilizar un .animate() y pasarle el valor position() top del objeto al que quieras ir...
  #3 (permalink)  
Antiguo 02/01/2010, 12:41
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Si, es que es eso lo que busco... el efecto bounce.
No se cual es el problema en el codigo... en otras paginas esta igual :S

Saludos!
  #4 (permalink)  
Antiguo 04/01/2010, 06:07
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 4 meses
Puntos: 101
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Tenes el bounce en el jquery UI:

http://docs.jquery.com/UI/Effects

Especificamente aqui: http://docs.jquery.com/UI/Effects/Bounce

Por otro lado, recomiendo alteres esta linea:

Cita:
<a href = "JavaScript: $.scrollTo('#cuadro2', 800, {easing:'elasout'});">Ir a cuadro 2</a>
Y uses esta:
Cita:
<a href = "#" onclick="$.scrollTo('#cuadro2', 800, {easing:'elasout'}); return false">Ir a cuadro 2</a>
  #5 (permalink)  
Antiguo 04/01/2010, 08:28
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Mayid, para poder usar esos efectos debo bajar el JS JQueryIU.js no es asi? Pues baje la última versión (1.7.2). Ahora tengo una duda... el JQueryUI trae incorporado el JQuery convencional?, es decir, JQuery + JQueryUI?

Saludos!
  #6 (permalink)  
Antiguo 04/01/2010, 10:43
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 4 meses
Puntos: 101
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

A la libreria jquery tenes que sumarle jqueryUI, mas jqueryUI Effects mas bounce.

Quedaria algo asi:

Cita:
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/ui.core.js" type="text/javascript"></script>
<script src="js/ui.effects.js" type="text/javascript"></script>
<script src="js/ui.bounce.js" type="text/javascript"></script>
Fijate en el paquete que descargaste, porque hay una carpeta que contiene todos los archivos .js Busca solo los que necesites y copialos en tu carpeta.
  #7 (permalink)  
Antiguo 04/01/2010, 19:31
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Ok Mayid.

Oye, probe modificando la linea por esta:
Código HTML:
<a href = "#" onclick="$.scrollTo('#cuadro2', 800, {easing:'elasout'}); return false">Ir a cuadro 2</a> 
Pero tampoco funciona el scrollTo... ni siquiera colocando:

Código HTML:
<a href = "#" onclick="$.scrollTo('#cuadro2', 800)">Ir a cuadro 2</a> 
No logro indentificar cuál es el problema =/

Saludos y muchas gracias.
  #8 (permalink)  
Antiguo 05/01/2010, 06:04
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 12 años, 8 meses
Puntos: 65
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

yo uso el scrollto en una tabla y me funciona pero con lo que vos queres hacer no, pero al descargar el 1.4.2 desde http://plugins.jquery.com/project/ScrollTo si me funciona con tu código usando el comprimido, yo tampoco lograba identificar el problema jeje, siempre es bueno empezar todo desde 0 bajando todo otra vez jeje
  #9 (permalink)  
Antiguo 05/01/2010, 08:25
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 4 meses
Puntos: 101
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Me alegro se haya solucionado. Comentario aparte, sobre buenas costumbres de javascript:

Cita:
Pero tampoco funciona el scrollTo... ni siquiera colocando:

Cita:
Código HTML:
<a href = "#" onclick="$.scrollTo('#cuadro2', 800)">Ir a cuadro 2</a>
Esto funciona solo si agregas return false, como en el ejemplo que te di. Con esa linea evitas que el enlace se dispare, y en cambio logras ejecutar javascript en el lugar en el que le corresponde, que no es el de href... sino el de un evento (ej. onclick)
  #10 (permalink)  
Antiguo 06/01/2010, 07:41
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Excelente! Me resultó retornando falso al final de la instrucción y usando en JQuery.scrollTo1.4.2-min.js ;)

Ahora tengo que agregarle el efecto "bounce".

Tengo unas dudas:
1. ¿Qué función cumple el: {easing:'elasout'} en el código?
2. ¿Cuál es la diferencia entre el JQuery.scrollTo y el JQuery.scrollTo-min? (He visto varios FrameWorks con 2 versiones, la standart y la min)

Muchas gracias colegas, saludos! =)

Última edición por de-troit; 06/01/2010 a las 07:52
  #11 (permalink)  
Antiguo 06/01/2010, 11:01
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 4 meses
Puntos: 101
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Cita:
2. ¿Cuál es la diferencia entre el JQuery.scrollTo y el JQuery.scrollTo-min? (He visto varios FrameWorks con 2 versiones, la standart y la min)
El min es el mismo codigo pero esta comprimido, por lo cual "carga mas rapido en el navegador".

Sobre lo otro, no se.
  #12 (permalink)  
Antiguo 06/01/2010, 14:26
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Cita:
El min es el mismo codigo pero esta comprimido, por lo cual "carga mas rapido en el navegador"
Pero el min no trae menos funciones?
Porque si trae las mismas es obvio que es mejor usar la min.

Disculpen mi ignorancia y les agredezco su tiempo invertido.

Saludos colegas!
  #13 (permalink)  
Antiguo 06/01/2010, 14:34
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 4 meses
Puntos: 101
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Cita:
Pero el min no trae menos funciones?
Ah! Me olvidaba de decirte. Comprimir significa quitar espacios en blanco, basicamente. Es decir que no cuentan como bytes.

Abri uno y fijate.
  #14 (permalink)  
Antiguo 06/01/2010, 16:20
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

ok ;)
Entendido.

Haré lo del efecto bounce... cualquier cosa les preguntaré.
Muchas gracias otra vez.
  #15 (permalink)  
Antiguo 03/06/2013, 10:47
 
Fecha de Ingreso: junio-2013
Mensajes: 1
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: JQuery: scrollTo no me funciona =S... cual es el problema?

Hola!
Tengo el mismo problema y no hay forma de que vea que es lo que pasa... He seguido todos los pasos y he probado todos los consejos pero no lo logro. Podéis ayudarme?

Esta es la web: http://silviagilmoreno.com/
La idea es que el icono del dedo te desplace a la parte inferior.

Muchas gracias de antemano! :)

Etiquetas: scrollto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:06.