Jump to content

How To Keep The Bottom Of A Scrolling Div In View


chibineku
 Share

Recommended Posts

My chat room window scrolls when it gets too big and messages appear at the bottom of their containing div, out of view. I would like to keep the last ones in view and have the old ones accessible by scrolling up. I tried adding a div with id 'top' at the botttom and adding #top to the URL but that doesn't do it. Any thoughts? Here is a link, followed by code:chat window

<?phpsession_start();?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript"><?php include_once("db_include.php5");?>$(document).ready(function() {var logged_in = '<?php global $logged_in; $logged_in = time(); echo $logged_in; ?>';var check = '<?php echo $_SESSION["poster"];?>';if(check == '') {var poster = prompt("Please enter a username");$.post("users.php5", {'poster':poster}, function(data){  window.location.href = window.location.href;  });}setTimeout(reload, 400);$('#send').click(function() {fetch_messages();});$('#message').bind("keypress", function(e) {  if(e.which == 13 || e.keycode == 13) {fetch_messages();  }});$('#new_user').click(function() {	 var poster = '<?php echo $_SESSION["poster"];?>';   $.post('reset.php5', {'poster':poster}, function(data) {	window.location.href = window.location.href;   });}); $('#message').focus();});function reload() {   var logged_in = '<?php echo $logged_in; ?>';   var poster = '<?php echo $_SESSION["poster"];?>';   var last_message = parseInt($('#chatWindow :last-child > span').html());	 $.post('do_chat.php5',{'poster':poster,'logged_in':logged_in, 'last_message':last_message},function(data) {	   console.log(data);	 $('#chatWindow').append(data);	 });	$.post('users.php5', {'poster':poster}, function(data) { $('#users').html(data);});	setTimeout(reload, 2000);}function fetch_messages() { if($('#message').val()!='') { var last_message = parseInt($('#chatWindow :last-child > span').html());  var logged_in = '<?php echo $logged_in; ?>';  var text = $('#message').val();  var poster = '<?php echo $_SESSION["poster"];?>';	 $.post('do_chat.php5',{'message':text,'poster':poster,'logged_in':logged_in, 'last_message':last_message},function(data) {	   console.log(data);	 $('#chatWindow').append(data);	 });$('#message').val('');$.post('users.php5', {'poster':poster}, function(data) { $('#users').html(data);});}}</script><style type="text/css">#users {float:right;height:80%;padding:10px;white-space:pre-wrap;width:20%;border-left: 1px solid black;margin-top:-2em;}#users ul {list-style-type:none;margin:0;padding:0;color:olive;}#container {border:1px solid black;height:400px;margin:0 auto;white-space:pre-wrap;width:50%;}#chatWindow {width:75%;float: left;overflow: auto;height: 360px;}#chatWindow .poster {clear:both;float:left;width:25%;margin-left:1em;color: olive;}#chatWindow .message {float:left;width:60%;margin-left:1em;}#chatWindow .message span { display:none;}#input {border: 1px solid black;border-top: none;margin:0 auto;width:50%;}#input input[type=text] { width:80%; height: 50px; border:none; padding:1em;}</style><title>Chat App</title></head><body><div id="container"><div id="chatWindow"><div class="poster">test</div><div class="message"><span>0</span>test message</div></div><div id="users"></div><div id="top"></div></div><div id="input"><input type="text" name="message" id="message" maxlength="255" /><br /><input type="button" value="send" id="send" /><input type="button" value="new username" id="new_user" /></div></body></html>

Edited by chibineku
Link to comment
Share on other sites

ne1?

Link to comment
Share on other sites

Access the last element of the chatbox (the one that conains that last message) and use the scrollIntoView() method. It works in all browsers.For example:

document.getElementById("chatbox").lastChild.scrollIntoView()

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...