Is there a way to ensure that chat text always remains scrolled to the bottom of the chat?
I have tried multiple tutorials and examples from Stack Overflow, but none seem to work for me.
Currently, my chat text overflows the textarea when there are too many lines, despite having overflow:hidden set.
I also want the textarea to only load the last 50 entries from the database so that new users don't have to load all previous chat messages.
Any suggestions on how to achieve these two things?
home
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<div id="Holder">
<div id="Header"></div>
<link href="../Style/Style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="../Js/jquery.js"></script>
<title>Chat Home</title>
<script type="text/javascript">
$(document).ready(function(){
$("#ChatText").keyup(function(e){
//When we press Enter do
if(e.keyCode==13){
var ChatText = $("#ChatText").val();
$.ajax({
type:'POST',
url:'InsertMessage.php',
data:{ChatText:ChatText},
success:function(){
$("#ChatMessages").load("DisplayMessages.php");
$("#ChatText").val("");
}
})
}
});
setInterval(function(){//refreshes every 1500ms
$("#ChatMessages").load("DisplayMessages.php");
},1500);
$("#ChatMessages").load("DisplayMessages.php");
</script>
</head>
<body>
<h2>Welcome <span style="color: green"><?php echo $_SESSION['UserName'] ; ?></span> </h2>
</br></br>
<div id="ChatBig">
<div id="ChatMessages">
</div>
<input type="text" id="ChatText" name="ChatText"></textarea>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
Css
#ChatBig {
width: 60%;
height: 600px;
margin: auto;
background-color: white;
overflow:hidden;
resize:none;
}
#ChatMessages{
width: 100%;
height: 548px;
border: 1px solid #000;
font-size: 16px;
font-weight: normal;
overflow:hidden;
resize:none;
}
#ChatText{
width: 100%;
height: 50px;
border: 1px solid #000;
overflow:hidden;
resize:none;
}
#ChatText:focus{outline: none;}
body {
background-color: lightgray;
}
#Holder {
width: 100%;
}
.UserNameS{
color: #7CB9E8;
}
.UserNameS:hover{text-decoration:underline; cursor: pointer;}
Image of how the site looks