I tried to make a real-time chat using AJAX and PHP. I made chat box 300px high but, when I tried to chat, the data goes outside that element. When chats are more than that height, I want it to have a scrollbar so that I can read above chats. How can I do that?
index.php
<?php
include 'db.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat System</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
function ajax(){
var req = new XMLHttpRequest();
req.onreadystatechange = function (){
if(req.readyState == 4 && req.status ==200){
document.getElementById('chat').innerHTML = req.responseText;
}
}
req.open('GET','chat.php',true);
req.send();
}
setInterval(function(){ajax()},1000);
</script>
</head>
<body onload="ajax();">
<div class="" id="container">
<div id="chat_box">
<div id="chat"></div>
</div>
<form class="" action="index.php" method="post">
<input type="text" name="name" value="" placeholder="Name">
<textarea name="msg" placeholder="Enter Message"></textarea>
<input type="submit" name="submit" value="Send It!">
</form>
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
$msg = $_POST['msg'];
$query ="INSERT INTO chathere (name,msg) values ('$name','$msg')";
$run= $lol->query($query);
if($run)
{
// echo "<embed loop='false' src='chat.mp3' hidden='true' autoplay='true'/>";
}
}
?>
</div>
</body>
Chat.php
<?php
include 'db.php';
$query = "SELECT * FROM chathere ORDER BY id DESC";
$run = $lol->query($query);
while($row = $run->fetch_array()) :
?>
<div id="chat_data">
<span style="color:green;"><?php echo $row['name']; ?></span>:
<span style="color:brown;"> <?php echo $row['msg']; ?></span>
<span style="float:right;"><?php echo formatDate($row['date']) ?></span>
</div>
<?php endwhile; ?>
css:
#container{
width: 40%;
background: white;
margin: 0 auto;
padding: 20px;
}
#chat_box{
width: 90%;
height: 400px;
overflow-y:scroll;
}
#chat_data {
width: 100%;
padding: 5px;
margin-bottom: 5px;
border-bottom: 1px solid silver;
font-weight: bold;
overflow-y: scroll;
}
Here's how it looks:
