Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: jalbtercero en 25 Mayo 2016, 12:48 pm


Título: scrollIntoview
Publicado por: jalbtercero en 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
  1. $(function () {
  2.     $('#boton').on('click', function () {
  3.         var mensaje = $('#mensaje').val(),
  4.             ajax    = $.post('mensaje.php?op=1', { mensaje: mensaje } );
  5.  
  6.         ajax.done(function() {
  7.             var content = $.get('mensaje.php?op=2');
  8.             $('#contenedor').empty().append( content );
  9.             $('#mensaje').val('');
  10.             document.getElementById('final').scrollIntoView(true);
  11.         });
  12.     });
  13. });
  14.  
  15. $(function () {
  16.     $('#mensaje').keydown(function (event) {
  17.        if(event.which==13 || event.keycode==13) {
  18.         var mensaje = $('#mensaje').val(),
  19.             ajax    = $.post('mensaje.php?op=1', { mensaje: mensaje } );
  20.  
  21.         ajax.done(function() {
  22.             var content = $.get('mensaje.php?op=2');
  23.             $('#contenedor').empty().append( content );
  24.             $('#mensaje').val('');
  25.             document.getElementById('final').scrollIntoView(true);
  26.  
  27.         });
  28. }
  29.     });
  30.  
  31.  
  32. });
  33.  


la pagina:

Código
  3.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  4.         <script language="javascript" type="text/javascript" src="enviar.js"></script>
  5. 	<link rel="stylesheet" type="text/css" href="chat.css">
  6.         <link rel="stylesheet" type="text/css" href="inicio.css">
  7. 	<script src="ajax.js"></script>
  8. </head>
  9. <body background="fondos/fondo-inicio.jpg"">
  10. <ul>
  11.   <li><a class="active" href="inicio.php">Inicio</a></li>
  12.   <li><a href="paginaad.php">Administracion</a></li>
  13.   <li><a href="comentarios.php">Reporta</a></li>
  14.   <ul style="float:right;list-style-type:none;">
  15.     <li><a href="#about">Sobre mi</a></li>
  16.     <li><a href="salir.php">Logout</a></li>
  17.   </ul>
  18. </ul>
  19. 	<div id="contenedor"><span id="final"></span>
  20. </div>
  21. <input type="text" id="mensaje" name="mensaje" />
  22. <button id="boton">Enviar</button>
  23.  
  24. </body>
  25. </html>
  26.  

Título: Re: scrollIntoview
Publicado por: gAb1 en 25 Mayo 2016, 19:58 pm
Código
  1. $('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...)

Título: Re: scrollIntoview
Publicado por: jalbtercero en 26 Mayo 2016, 09:42 am
Cita de: gAb1 en 25 Mayo 2016, 19:58 pm
Código
  1. $('html, body').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);

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

Título: Re: scrollIntoview
Publicado por: gAb1 en 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?

Título: Re: scrollIntoview
Publicado por: jalbtercero en 27 Mayo 2016, 09:18 am
tengo el siguente codigo:

Código
  1. $(document).ready(function(){
  2. $("#mensaje").keydown(function(event){
  3. if(event.which==13 || event.keycode==13) {
  4. $('html, body').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
  5. }
  6. });
  7. });
  8.  

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

Título: Re: scrollIntoview
Publicado por: gAb1 en 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 :P)

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.

Título: Re: scrollIntoview
Publicado por: jalbtercero en 27 Mayo 2016, 23:15 pm
No compañero lo siento pero no funciona me da el mismo error:

codigo:
Código
  1. $(document).ready(function(){
  2. $("#boton").on('click',function(){
  3. $('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
  4. });
  5. });
  6.  

Añado codigo de la pagina:

Código
  3.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  4.         <script language="javascript" type="text/javascript" src="enviar.js"></script>
  5. 	<link rel="stylesheet" type="text/css" href="chat.css">
  6.         <link rel="stylesheet" type="text/css" href="inicio.css">
  7. 	<script src="ajax.js"></script>
  8. </head>
  9. <body background="fondos/fondo-inicio.jpg"">
  10. <ul>
  11.   <li><a class="active" href="inicio.php">Inicio</a></li>
  12.   <li><a href="paginaad.php">Administracion</a></li>
  13.   <li><a href="comentarios.php">Reporta</a></li>
  14.   <ul style="float:right;list-style-type:none;">
  15.     <li><a href="#about">Sobre mi</a></li>
  16.     <li><a href="salir.php">Logout</a></li>
  17.   </ul>
  18. </ul>
  19. 	<div id="contenedor"><span id="final"></span>
  20. </div>
  21. <input type="text" id="mensaje" name="mensaje" />
  22. <button id="boton">Enviar</button>
  23.  
  24. </body>
  25. </html>
  26.  

Título: Re: scrollIntoview
Publicado por: gAb1 en 27 Mayo 2016, 23:42 pm
Si que funciona: mira que es lo que estás haciendo mal: https://jsfiddle.net/x030ud26/

Título: Re: scrollIntoview
Publicado por: jalbtercero en 27 Mayo 2016, 23:54 pm
Código
  1. $(document).ready(function(){
  2. ('#boton').on('click', function(event) {
  3.  
  4.     var target = $( $(this).attr('href') );
  5.  
  6.     if( target.length ) {
  7.         event.preventDefault();
  8.         $('#contenedor').animate({
  9.             scrollTop: target.offset().top
  10.         }, 1000);
  11.     }
  12.  
  13. });
  14. });
  15.  

que he echo mal?

Título: Re: scrollIntoview
Publicado por: gAb1 en 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
  1. $(function () {
  2.  
  3.     function myFunction() {
  4.  
  5.         var mensaje = $('#mensaje').val(),
  6.             ajax    = $.post('mensaje.php?op=1', { mensaje: mensaje } );
  7.  
  8.         ajax.done(function() {
  9.             var content = $.get('mensaje.php?op=2');
  10.             $('#contenedor').empty().append( content );
  11.             $('#mensaje').val('');
  12.             $('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
  13.         });
  14.  
  15.     }
  16.  
  17.     $('#boton').on('click', myFunction());
  18.  
  19.     $('#mensaje').keydown(function (event) {
  20.         if (event.which==13 || event.keycode==13) {
  21.             myFunction();
  22.         }
  23.     });
  24.  
  25. });

Título: Re: scrollIntoview
Publicado por: jalbtercero en 28 Mayo 2016, 00:16 am
Heee he copiado tu codigo, pero por algun motivo.. ahora no puedo entrar en mi pagina, es decir me pone timed out...

Título: Re: scrollIntoview
Publicado por: gAb1 en 28 Mayo 2016, 00:32 am
El código no se ejecuta por sí solo, a si que el "timed out" es por otra cosa. Tal vez el hosting se haya caido (a veces pasa).

Título: Re: scrollIntoview
Publicado por: jalbtercero en 28 Mayo 2016, 00:34 am
Cita de: gAb1 en 28 Mayo 2016, 00:32 am
El código no se ejecuta por sí solo, a si que el "timed out" es por otra cosa. Tal vez el hosting se haya caido (a veces pasa).

No pero es que le he dado al boton... y entonces bumm...

Título: Re: scrollIntoview
Publicado por: jalbtercero en 28 Mayo 2016, 00:52 am
Vale he probado tu codigo y pasa lo siguente:

1- Los mensajes que introduzco se envia dos veces es decir que se muestra dos veces

2-me da erro: annot read property 'top' of undefined

ves a mi pagina y miralo xelatercero.com\chat2.html

Título: Re: scrollIntoview
Publicado por: gAb1 en 28 Mayo 2016, 05:27 am
Eso de que al darle al boton da error 500 es muy raro, debes tener un problema o bien en tu hosting o en algún lado en tu página.

Si le das al botón y a intro entonces se enviará dos veces... Es tu código, yo solo lo organicé un poco.

Y eso de cannot read property 'top' of undefined también es muy raro. ¿Pusiste la versión JQuery que te pasé, o estás usando una versión vieja?

He entrado en tu página y he visto que no actualizaste el código que te pasé. Ponlo a ver que pasa.

He visto que ninguna de las peticiones get que hace tiene respuesta, están vacias, tanto las que se hacen en cargar.php, como las que se hacen del chat. No hay ninguna respuesta y no se vé nada en el chat. Mira a ver que has hecho en el archivo mensaje.php y porqué no hace el select ni muestra los datos.

Título: Re: scrollIntoview
Publicado por: jalbtercero en 28 Mayo 2016, 09:19 am
El chat no hace nada porque tengoun panel de administracion donde borro el chat y lo puedo crear.

Y bueno he probado tu codigo, y no funciona para nada, ademas si hubiera algun error en el codigo el anterior no funcionaria:

Codigo Anteriro:

Código
  1. $(function () {
  2.     $('#boton').on('click', function () {
  3.         var mensaje = $('#mensaje').val(),
  4.             ajax    = $.post('mensaje.php?op=1', { mensaje: mensaje } );
  5.  
  6.         ajax.done(function() {
  7.             var content = $.get('mensaje.php?op=2');
  8.             $('#contenedor').append( content );
  9.             $('#mensaje').val('');
  10.  
  11.         });
  12.     });
  13.  
  14.  
  15. });
  16.  
  17. $(function () {
  18.     $('#mensaje').keydown(function (event) {
  19.        if(event.which==13 || event.keycode==13) {
  20.         var mensaje = $('#mensaje').val(),
  21.             ajax    = $.post('mensaje.php?op=1', { mensaje: mensaje } );
  22.  
  23.         ajax.done(function() {
  24.             var content = $.get('mensaje.php?op=2');
  25.             $('#contenedor').append( content );
  26.             $('#mensaje').val('');
  27.  
  28.  
  29.         });
  30. }
  31.     });
  32.  
  33.  
  34.  
  35. });
  36.  

Título: Re: scrollIntoview
Publicado por: gAb1 en 29 Mayo 2016, 02:46 am
Mi código hace lo mismo que ese, pero con la diferencia de que está optimizado para que sea más ligero.

Llegados a este punto no entiendo para nada que es lo que me quieres decir, no sé que es lo que no funciona o lo que intentas hacer más allá de un simple chat en tiempo real, que deberías tener funcionando con lo que ya tienes.

Explicate mejor si puede ser, y cuando te salga un error, copialo y pegalo exactamente como te ha aparecido.

Por segunda vez, me vuelvo a repetir:

- No es necesario que uses más de un document ready, puedes poner todos tus scripts dentro del mismo (como hice en el código optimizado que te pase ayer y que no estás usando a pesar de que funciona).

- Sigo viendo el mismo script de ayer en tu web, pon el que te pasé yo que funciona perfectamente.

El único problema que veo ahora mismo, es que estás usando un elemento <button> cuando no es necesario, en tu otra pregunta (la del ajax, donde te di este código) ya te dije que usaras un elemento <a>.

No entiendo porque complicar las cosas, si no vas a usar http submit porque usar un <button> y tener que estar evitando el submit cuando simplemente usas otro elemento, que vas a tener que darle estilo igualmente?

Ademas hacer las cosas bien cuesta muy poco, como por ejemplo usar html5 correctamente y declarar el tipo de contenido y la codificación.

A parte, html5 no soporta background en body, y de paso los estilos, todos, es mejor tenerlos en el archivo css:

Código
  1. <!DOCTYPE html>
  3.  
  4.     <head>
  5.  
  6.         <meta http-equiv="Content-Type" content="Text/HTML" charset="UTF-8" />
  7.         <meta name="keywords" content="google" />
  8.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.  
  10.         <title>My WebPage</title>
  11.  
  12.         <meta name="author" content="" href="" />
  13.         <meta name="copyright" content="&copy; mypage <?php echo date("Y") ?>" />
  14.  
  15.         <link rel="shortcut icon" href="favicon.ico" />
  16.         <link rel="stylesheet" type="text/css" href="inicio.css" />
  17.         <link rel="stylesheet" type="text/css" href="chat.css" />
  18.  
  19.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  20.         <script type="text/javascript" src="ajax.js"></script>
  21.         <script type="text/javascript" src="enviar.js"></script>
  22.  
  23.     </head>
  24.  
  25.     <body>
  26.  
  27.         <header>
  28.  
  29.             <ul>
  30.                 <li><a class="active" href="inicio.php">Inicio</a></li>
  31.                 <li><a href="paginaad.php">Administracion</a></li>
  32.                 <li><a href="comentarios.php">Reporta</a></li>
  33.  
  34.                 <ul>
  35.                     <li><a href="#about">Sobre mi</a></li>
  36.                     <li><a href="salir.php">Logout</a></li>
  37.                 </ul>
  38.             </ul>
  39.  
  40.         </header>
  41.  
  42.         <main>
  43.  
  44.             <div id="contenedor"><span id="final"></span></div>
  45.  
  46.             <input type="text" id="mensaje" name="mensaje" />
  47.  
  48.             <a id="boton" href="#">Enviar</a>
  49.  
  50.         </main>
  51.  
  52.         <footer>
  53.  
  54.         </footer>
  55.  
  56.     </body>
  57.  
  58. </html>

Código
  1. /* inicio.css */
  2. body {
  3.     background-image: url(fondos/fondo-inicio.jpg);
  4. }
  5.  
  6. ul ul {
  7.     float:right;
  8.     list-style-type:none;
  9. }
  10.  
  11. /* chat.css */
  12.  
  13. #contenedor {
  14.   width: 500px;
  15.   height: 200px;
  16.   border: 1px solid black;
  17.   overflow: scroll;
  18. }
  19.  
  20. p {
  21.   color: #320EF8;
  22.   font-size: 120%;
  23.   margin: 20px 15px;
  24. }
  25.  
  26. #final {
  27.   width: 100%;
  28.   height: 1%;
  29. }

Código
  1. <?php
  2.  
  4.  
  5. require('connect_db2.php');
  6.  
  7. $op = (int) $_GET['op'];
  8.  
  9. if ($op === 1) {
  10.     $nombre  = $_SESSION['usuario'];
  11.     $mensaje = $_POST['mensaje'];
  12.  
  13.     mysqli_query($link, "INSERT INTO chat (nombre, mensaje) VALUES('$nombre', '$mensaje')");
  14.     mysqli_close($link);
  15.  
  16. } else if ($op === 2) {
  17.  
  18.     header('Content-Type: Text/HTML; Charset=UTF-8');
  19.  
  20.     $color = '#320EF8';    
  21.     $result = mysqli_query($link, 'SELECT * FROM chat');
  22.  
  23.     while ($fila = mysqli_fetch_array($result)) {
  24.  
  25.         if ( NULL !== $resultados ) {
  26.  
  27.             echo '<p>', $resultados['nombre'], ': </p>', $resultados['mensaje'], '<br />';
  28.  
  29.         }
  30.  
  31.     }
  32.  
  33.     mysqli_free_result($result);
  34.     mysqli_close($link);
  35. }
  36.  
  37. ?>

Código
  1. $(function () {
  2.  
  3.     function myFunction() {
  4.  
  5.         var mensaje = $('#mensaje').val(),
  6.             ajax    = $.post('mensaje.php?op=1', { mensaje: mensaje } );
  7.  
  8.         ajax.done(function() {
  9.             var content = $.get('mensaje.php?op=2');
  10.             $('#final').before( content );
  11.             $('#mensaje').val('');
  12.             $('#contenedor').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
  13.         });
  14.  
  15.     }
  16.  
  17.     $('#boton').on('click', myFunction);
  18.  
  19.     $('#mensaje').keydown(function (e) {
  20.         if (e.which === 13) {
  21.             myFunction();
  22.         }
  23.     });
  24.  
  25. });

De todas maneras esto está muy mal implementado y ya te lo dijo AlbertoBSD. Encuentra una manera más eficiente de hacer esto. Tienes ideas en tu otro post http://foro.elhacker.net/php/ajax_recibir_daros-t452816.10.html, cualquier duda preguntala ahí.

Problemas sobre el scroll aquí. Hay un pequeño problema y es que cuando hay un scroll grande el scrollTop empieza a fallar. Esto está fuera de mi conocimiento, espera a ver si alguien se pasa y arregla este pequeño inconveniente. Sin embargo, los primeros mensajes hacen bien el scroll, esto depende de la altura del div, cuanto más height tenga más tardará el scroll del div en llenarse (por lo tanto más tardará en fallar).

Aquí hay un demo para trabajar facilmente: https://jsfiddle.net/3a8rrvej/

Edito: En el html, muevo el código del menu ul dentro de header (que es donde debería estar).


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines