 Autor
|
Tema: scrollIntoview (Leído 7,736 veces)
|
jalbtercero
 Desconectado
Mensajes: 80
|
La cosa es que quiero que cuando el div se actualice con ajaz, el scroll baje abajo del todo del div: He puesto este codigo pero me dice: ncaught TypeError: Cannot read property 'scrollIntoView' of null; Gracias de antemano $(function () { $('#boton').on('click', function () { var mensaje = $('#mensaje').val(), ajax = $.post('mensaje.php?op=1', { mensaje: mensaje } ); ajax.done(function() { var content = $.get('mensaje.php?op=2'); $('#contenedor').empty().append( content ); $('#mensaje').val(''); document.getElementById('final').scrollIntoView(true); }); }); }); $(function () { $('#mensaje').keydown(function (event) { if(event.which==13 || event.keycode==13) { var mensaje = $('#mensaje').val(), ajax = $.post('mensaje.php?op=1', { mensaje: mensaje } ); ajax.done(function() { var content = $.get('mensaje.php?op=2'); $('#contenedor').empty().append( content ); $('#mensaje').val(''); document.getElementById('final').scrollIntoView(true); }); } }); });
la pagina: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="enviar.js"></script> <link rel="stylesheet" type="text/css" href="chat.css"> <link rel="stylesheet" type="text/css" href="inicio.css"> <body background="fondos/fondo-inicio.jpg""> <li><a class="active" href="inicio.php">Inicio </a></li> <li><a href="paginaad.php">Administracion </a></li> <li><a href="comentarios.php">Reporta </a></li> <ul style="float:right;list-style-type:none;"> <li><a href="#about">Sobre mi </a></li> <li><a href="salir.php">Logout </a></li> <input type="text" id="mensaje" name="mensaje" />
|
|
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
$('html, body').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
El 1000 es el tiempo de transicción que dura la animación, reducelo o aumentalo a tu gusto. Yo no mezclaria javascript con JQuery, si vas a trabajar con un lenguaje ciñete con ese y será más facil entender el código y encontrar los errores. En este caso con más razón, estás cargando una libreria entera (JQuery) que te facilita la vida. Recuerda "Write less, do more"  Por cierto, si una pregunta ya la tienes respondida y se ha solucionado tu problema, indicalo cambiando el icono del primer mensaje y responde para que sepamos que ya está solucionado. A parte, un gracias nunca está de más. (tienes varias preguntas aun abiertas y no has dicho nada...)
|
|
|
|
|
En línea
|
|
|
|
jalbtercero
Desconectado
Mensajes: 80
|
$('html, body').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
Compañero ya probe de todo, tu funcion, y otras y ninguna funciona.. porque.. Saludos
|
|
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
A mí me funciona perfectamente, mira que es lo que estás haciendo mal. ¿Lo has puesto dentro de un document ready? ¿Donde tenias antes tu código?
|
|
|
|
|
En línea
|
|
|
|
jalbtercero
Desconectado
Mensajes: 80
|
tengo el siguente codigo: $(document).ready(function(){ $("#mensaje").keydown(function(event){ if(event.which==13 || event.keycode==13) { $('html, body').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000); } }); });
Pero cuando le doy intro solo me dice que no se puede leer top de un elemto indefinido. Y me aclaro, lo que quiero es que el scroll que esta en el div baje, no el de la pagina. Saludos |
|
|
|
« Última modificación: 27 Mayo 2016, 11:31 am por jalbtercero »
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
El scroll que quieres que baje es lo de menos, lo cambias donde dice 'html, body' cambias por el elemento div y será ese scroll el que se anime (o eso creo  ) Pruebalo con algo más simple como un simple click y a ver si funciona como quieres, luego le añades ese if y así te aseguras que el scroll funciona. |
|
|
|
|
En línea
|
|
|
|
jalbtercero
Desconectado
Mensajes: 80
|
No compañero lo siento pero no funciona me da el mismo error: codigo: $(document).ready(function(){ $("#boton").on('click',function(){ $('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000); }); });
Añado codigo de la pagina: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="enviar.js"></script> <link rel="stylesheet" type="text/css" href="chat.css"> <link rel="stylesheet" type="text/css" href="inicio.css"> <body background="fondos/fondo-inicio.jpg""> <li><a class="active" href="inicio.php">Inicio </a></li> <li><a href="paginaad.php">Administracion </a></li> <li><a href="comentarios.php">Reporta </a></li> <ul style="float:right;list-style-type:none;"> <li><a href="#about">Sobre mi </a></li> <li><a href="salir.php">Logout </a></li> <input type="text" id="mensaje" name="mensaje" />
|
|
|
|
« Última modificación: 27 Mayo 2016, 23:28 pm por jalbtercero »
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
Si que funciona: mira que es lo que estás haciendo mal: https://jsfiddle.net/x030ud26/ |
|
|
|
« Última modificación: 28 Mayo 2016, 00:12 am por gAb1 »
|
En línea
|
|
|
|
jalbtercero
Desconectado
Mensajes: 80
|
$(document).ready(function(){ ('#boton').on('click', function(event) { var target = $( $(this).attr('href') ); if( target.length ) { event.preventDefault(); $('#contenedor').animate({ scrollTop: target.offset().top }, 1000); } }); });
que he echo mal?
|
|
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
Esto debería funcionar. Por cierto, no necesitas usar varias veces el document ready ( $(function () {}); es el equivalente ). $(function () { function myFunction() { var mensaje = $('#mensaje').val(), ajax = $.post('mensaje.php?op=1', { mensaje: mensaje } ); ajax.done(function() { var content = $.get('mensaje.php?op=2'); $('#contenedor').empty().append( content ); $('#mensaje').val(''); $('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000); }); } $('#boton').on('click', myFunction()); $('#mensaje').keydown(function (event) { if (event.which==13 || event.keycode==13) { myFunction(); } }); });
|
|
|
|
« Última modificación: 28 Mayo 2016, 00:13 am por gAb1 »
|
En línea
|
|
|
|
|
 |
