chibineku Posted October 23, 2009 Share Posted October 23, 2009 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> Link to comment Share on other sites More sharing options...
chibineku Posted October 23, 2009 Author Share Posted October 23, 2009 ne1? Link to comment Share on other sites More sharing options...
jlhaslip Posted October 24, 2009 Share Posted October 24, 2009 reverse the chat message list so the most recent messages are on top Link to comment Share on other sites More sharing options...
Ingolme Posted October 24, 2009 Share Posted October 24, 2009 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 More sharing options...
roundcorners Posted October 31, 2009 Share Posted October 31, 2009 position:fixed Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.