Al refrescar div se me mueve la página

ananda · #1 (**permalink**) 27/08/2012, 09:31

Hola, he usado una función jquery para refrescar un div cada segundo :

Código PHP:

  setInterval(function() { 
    $("#conversaciones").load(location.href+" #conversaciones>*",""); 
}, 1000);

Me va perfectamente y me refresca el div conversaciones pero al aparecer un mensaje nuevo la página se empieza a mover hacia arriba y hacia abajo unos 20px, no sé a qué viene este movimiento pero es muy pesado. Os dejo el código html de la página:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



<head>
            
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
            
            

	<link rel="stylesheet" href="./css/screen.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="./css/lightbox.css" type="text/css" media="screen" />

<title>Aura Moreno</title>
<link rel="stylesheet" href="./css/perfilcss.css" />

  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
  <script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
  <script type="text/javascript" src="js/lightbox.js"></script>


            <script type="text/javascript">
                           
setInterval(function() {
    $("#conversaciones").load(location.href+" #conversaciones>*","");
}, 1000);

 
   function sendMessage(){
      
      //Tomas el valor del campo msg      
      var mensaje = $("#mensaje").val();
      var dequien = $("#dequien").val();
      var paraquien = $("#paraquien").val();
      
      //Si empieza el ajax muestro el loading
      $("#loading").ajaxStart(function(){
         $("#loading").show();
      });
      
      //Cuando termina el ajax oculta el loading
      $("#loading").ajaxStop(function(){
         $("#loading").hide();
      });
      
      //Se envian los datos a url y al completarse se recarga el muro
      //con la nueva informacion
      $.ajax({
         url: 'mandar.php',
          data:'mensaje='+ mensaje +'&dequien=' + dequien +'&paraquien=' + paraquien,
         type: 'post',
         error: function(obj, mensaje, obj2){
            alert(msg);
         },
         success: function(data){
            listo();
         }
      });      
   };
  
</script>
</head>
<body>


	
        
	<div id="lateral">
		<div id="missatge">
                        <div id="cartelmsg">
                                    <p class="msgto">Mensaje para Aura</p>
                        </div>
                        <div id="formmsg">
                            
	<div id="divformmsg">
		<div id="labelms">
          <label for="msg">Escribe el mensaje a continuación...</label>
		</div>
                <form action="javascript: sendMessage();" method="post" id="form_msg" name="form_msg" >
          <textarea name="mensaje" id="mensaje" rows="4" cols="70" ></textarea>
          <input type="hidden" name="paraquien" id="paraquien" value="74" />
          <input type="hidden" name="dequien" id="dequien" value="4" />

          <input type="submit" name="submit" id="submitir" value="Enviar mensaje" />
                        
       </form>      
                    </div>                
                        </div>

                
               
   <div id="conversaciones">
                     <div id="cartelanterior">
                                    <p class="convers">Conversación anterior</p>
                        </div>
                                       
                              <table id="tanteriores">
            <tr>
            <td class="nombres">Marc Ananda Moreno Mauri</td>
         </tr>
         <tr>
            <td class="mensajeind">,</td>
         </tr><tr>
         <td class="data"><br/> 27 de agosto de 2012 a las(la) 17:17</td>
         </tr></table>
                              <table id="tanteriores">
            <tr>
            <td class="nombres">Marc Ananda Moreno Mauri</td>
         </tr>
         <tr>
            <td class="mensajeind">Hello</td>
         </tr><tr>
         <td class="data"><br/> 25 de agosto de 2012 a las(la) 23:23</td>
         </tr></table>
               
                </div> </div>
</div>

	<div id="marco">
	
<div id="nameperfil" class="nameperfil">
                        <a class="nombre">Perfil de Aura Moreno</a>
            </div>
        

	     <div id="sendmessage">
            <p class="botonmessage" onclick="mostrar();">Enviar mensaje</p>
        </div>
            
            <div id="allin">
	
				
<div id="lastphotos">
		
		<div id="cartelphoto">
		<p class="fotografias">Fotos de Aura </p>
			</div>
                
			<div id="divtabla">
		<table id="mostreo"><tr>

		
	
<td class="individuales"><a href="./imagenes/grande_74_558131_106186142848304_100003707563533_29758_654859449_n.jpg" rel="lightbox[water]" class="fotosalbum"> <img src=" ./imagenes/thumb_74_558131_106186142848304_100003707563533_29758_654859449_n.jpg "/></a></td>

	
             
		
	
<td class="individuales"><a href="./imagenes/grande_74_428401_4090764718057_517266224_n.jpg" rel="lightbox[water]" class="fotosalbum"> <img src=" ./imagenes/thumb_74_428401_4090764718057_517266224_n.jpg "/></a></td>

	
             
		
	
<td class="individuales"><a href="./imagenes/grande_74_CIMG2746.JPG" rel="lightbox[water]" class="fotosalbum"> <img src=" ./imagenes/thumb_74_CIMG2746.JPG "/></a></td>

	
             
			</tr></table></div>
                        </div></div>
	
	
 <div id="todo">

    <div id="muro">
      	<div id="visitas2" class="visitas2"> 
        <input type="button" id="visitaboton" class="visitaboton" value="Libro de visitas" /> 
    </div>
    <div id="loading"><img src="loading.gif" /></div>
    
    
    
    <div id="wall">
                        <table name="entradas" id="entradas">
            
         <tr>
            <td class="comentario">Aura aún no ha publicado mensajes en su libro de visitas</td>
         </tr><tr>
         <td class="data"><br/>23 de agosto de 2012 a las 10:19</td>
         </tr>
         </div>
      </table>
                </div>
    </div>
 </div>


        
<div id="fotoperfil2" class="fotoperfil2" >
    <div id="divperfil">
		<p class="cartelperfil">Foto de perfil </p>
			</div>

 <div class="imageRowProfile">
  	<div class="set">
<a href="./imagenes/grande_74_558131_106186142848304_100003707563533_29758_654859449_n.jpg" rel="lightbox[plants]"> <img src=" ./imagenes/perfil_74_558131_106186142848304_100003707563533_29758_654859449_n.jpg " style="border: 3px solid #22B14C;"/></a>
</div>
 </div>
 
</div>
    
</div>

    </body>
    
</html>

Si necesitáis el css lo posteo abajo, muchas gracias por adelantado!

visitante28 · #2 (**permalink**) 28/08/2012, 07:28

probablemente se algo con el CSS, te recomiendo que utilices el complemento de firebug para firefox para que puedas revisar el estilo desde el navegador.

saludos.