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 +'¶quien=' + 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!