Having problems with Javascript / Ajax

captain78

New Member
So, Im working on a message box similar to facebook's that shows messages in it etc. I got it working so it refreshes the messages inside of the div every 5 seconds, BUT I am trying to set the scroll to the bottom using:\[code\]var div = document.getElementById('chat');var y = (div.scrollHeight > div.offsetHeight) ? div.scrollHeight :div.offsetHeight;div.scrollTop = y;window.scrollTo(0, y);\[/code\]but this only works before i refresh the div, could anyone explain to me how to do this, and also, is there a way to refresh the div by sending a request to the same page?\[code\] function ajax(){ var xmlhttp; if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else{ // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if(xmlhttp){ xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('messages').innerHTML = xmlhttp.responseText; setTimeout(function(){ajax();}, 5000); } }; xmlhttp.open('GET', 'refresh.php', true); xmlhttp.send(null); } } setTimeout(function(){ajax();}, 5000);<div id = "messages"> <table id = "chatbox" > <thead>Admin</thead> <tfoot> <td><textarea id = "chattextbox" name = "text" ></textarea></td> </tfoot> <tbody> <td><div id = "chat"> <?php read_message($db); ?> </div> </td> </tbody> </table> <style> #chatbox{ overflow:scroll; overflow-x: hidden; word-wrap: !important; height: 400px; width: 300px; padding: 0px; border-right: solid 1px; border-left: solid 1px; border-top: solid 1px; border-bottom: solid 1px; resize: none; max-width:200px; } #chat{ overflow:scroll; overflow-x: hidden; word-wrap: break-word; height: 400px; width: 300px; padding: 0px; resize: none; max-width:300px; } #chattextbox{ width: 300px; resize: none; padding: 0px; } </style></div><script type="text/javascript"> var div = document.getElementById('chat'); var y = (div.scrollHeight > div.offsetHeight) ? div.scrollHeight : div.offsetHeight; div.scrollTop = y; window.scrollTo(0, y);</script>\[/code\]
 
Back
Top