scrollIntoview

jalbtercero · 25 Mayo 2016, 12:48 PM

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

Código (javascript) [Seleccionar]


$(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:

Código (html4strict) [Seleccionar]


<html>
<head>
        <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">
	<script src="ajax.js"></script>
</head>
<body background="fondos/fondo-inicio.jpg"">
<ul>
  <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>
  </ul>
</ul>
	<div id="contenedor"><span id="final"></span>
</div>
<input type="text" id="mensaje" name="mensaje" />
<button id="boton">Enviar</button>

</body>
</html>

gAb1 · 25 Mayo 2016, 19:58 PM

Código (javascript) [Seleccionar]

$('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...)

jalbtercero · 26 Mayo 2016, 09:42 AM

Cita de: gAb1 en 25 Mayo 2016, 19:58 PM
Código (javascript) [Seleccionar] Expandir
$('html, body').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);

Compañero ya probe de todo, tu funcion, y otras y ninguna funciona.. porque..
Saludos

gAb1 · 26 Mayo 2016, 13:24 PM

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?

jalbtercero · 27 Mayo 2016, 09:18 AM

tengo el siguente codigo:

Código (javascript) [Seleccionar]


$(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

gAb1 · 27 Mayo 2016, 15:13 PM

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.

jalbtercero · 27 Mayo 2016, 23:15 PM

No compañero lo siento pero no funciona me da el mismo error:

codigo:

Código (javascript) [Seleccionar]


$(document).ready(function(){
$("#boton").on('click',function(){
$('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
});
});

Añado codigo de la pagina:

Código (html4strict) [Seleccionar]


<html>
<head>
        <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">
	<script src="ajax.js"></script>
</head>
<body background="fondos/fondo-inicio.jpg"">
<ul>
  <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>
  </ul>
</ul>
	<div id="contenedor"><span id="final"></span>
</div>
<input type="text" id="mensaje" name="mensaje" />
<button id="boton">Enviar</button>

</body>
</html>

gAb1 · 27 Mayo 2016, 23:42 PM

Si que funciona: mira que es lo que estás haciendo mal: https://jsfiddle.net/x030ud26/

jalbtercero · 27 Mayo 2016, 23:54 PM

Código (javascript) [Seleccionar]


$(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?

gAb1 · 28 Mayo 2016, 00:06 AM

Esto debería funcionar. Por cierto, no necesitas usar varias veces el document ready ( $(function () {}); es el equivalente ).

Código (javascript) [Seleccionar]

$(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();
        }
    });

});