I have created a simple chatbox using PHP. I want this to be able to load a all the new message and scroll to the bottom of the chatbox. I'm using AJAX to reload the new messages, but cannot seem to make it scroll down to the bottom where the new messages appear.
I have tried using down.scrollTop = down.scrollHeight; but cant get it to function properly.
Any help please?
<div id="tab3">
<h2>Chat Room</h>
<div id="c-input_wrap">
<div id="chatlog">
Loading chat please wait...
</div>
<div id="chatwrap">
<div id="chatinput">
<form name="chatbox" class="userchat">
<input class="userchat" name="message" type="text" autoplete="off" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()" autofocus/><br>
<input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" />
</form>
</div>
</div>
</div>
</div>
<script>
var form = document.querySelector('form[name="chatbox"]');
form.addEventListener("submit", function (event) {
event.preventDefault();
});
function submitChat() {
if(chatbox.message.value == '') {
alert('Error: Missing Fields.');
return;
}
var message = chatbox.message.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4&&xmlhttp.status==100) {
document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','chat.php?message='+message, true);
xmlhttp.send();
chatbox.reset();
}
$(document).ready(function(e) {
$.ajaxSetup({cache:false});
setInterval(function() {$('#chatlog').load('logs.php');}, 200);
});
</script>
css:
#tabs {
overflow: hidden;
max-width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0px -15px 0 0;
}
#tabs a {
float: left;
position: relative;
padding: 0 20px;
height: 0;
line-height: 30px;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
border-right: 20px solid transparent;
border-bottom: 30px solid #3D3D3D;
opacity: .3;
filter: alpha(opacity=30);
transition: all .5s;
}
#tabs a:hover, #tabs a:focus {
border-bottom-color: rgba(255,0,4,0.60);
opacity: 1;
filter: alpha(opacity=100);
}
#tabs a:focus {
outline: 0;
}
#tabs #current {
z-index: 10;
border-bottom-color: #3d3d3d;
opacity: .8;
filter: alpha(opacity=100);
cursor: default;
}
#content {
background-color: rgba(0,0,0,0.10);
border-top: 3px solid rgba(61,61,61,0.80);
padding: 2em;/*height: 220px;*/
overflow-y: auto;
height: 85%;
}
#content h2, #content h3, #content p {
margin: 0 0 15px 0;
}
#chatlog {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding: 0;
text-align: left;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
background-color: rgba(255,255,255,0.70);
border-top: solid 2px rgba(235,0,3,0.70);
width: 95%;
height: 88%;
overflow-y: auto;
word-wrap: break-word;
}
#c-input_wrap {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding: 0;
height: 63%;
}
#chatinput {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 27%;
right: 25%;
width: 70%;
}
#chatwrap {
position: absolute;
height: 40px;
width: 95%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: -10px;
}
input.userchat {
display: inline-block;
float: left;
margin-left: 0;
width: 50%;
padding: 10px;
border: none;
border-bottom: solid 2px #3D3D3D;
transition: border, background-color .75s;
background-color: rgba(255,255,255,0.70);
font-weight: bold;
line-height: 18px;
color: #000000;
}
input:focus.userchat {
background-color: rgba(255,255,255,0.90);
border-bottom: solid 2px rgba(235,0,3,0.69);
outline: 0;
color: rgba(61,61,61,1.00);
font-weight: bold;
}
input[type=button].userchat {
display: block;
margin-top: -23px;
margin-left: 2px;
text-align: center;
padding-left: 2px;
float: left;
width: 40px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: rgba(61,61,61,0.70);
font-size: 16px;
background: rgba(255,255,255,0.70);
border-bottom: solid 2px #3D3D3D;
cursor :pointer;
transition: all .75s;
}
input[type=button].userchat:hover,
input[type=button].userchat:focus {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
font-size: 16px;
border-bottom: solid 2px rgba(235,0,3,0.69);
background: rgba(255,255,255,0.90);
cursor: pointer;
}
chat.php:
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
if (isset($_SESSION['id'])) {
$userId = $_SESSION['id'];
$username = $_SESSION['username'];
$userLabel = $_SESSION['nickname'];
}
$connect = mysqli_connect("", "", "", "webclyde_root");
mysqli_select_db($connect, "webclyde_root");
$message = $_REQUEST['message'];
mysqli_query($connect, "INSERT INTO chat (name, message) VALUES ('$userLabel', '$message')");
$result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");
while ($extract = mysqli_fetch_assoc($result1)) {
echo $extract['name'] . ": " . $extract['message'];
}
?>
logs.php
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
if (isset($_SESSION['id'])) {
$userId = $_SESSION['id'];
$username = $_SESSION['username'];
$userLabel = $_SESSION['nickname'];
}
$connect = mysqli_connect("", "", "", "webclyde_root");
mysqli_select_db($connect, "webclyde_root");
$result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");
while ($extract = mysqli_fetch_assoc($result1)) {
echo "<br>" . $extract['name'] . ": " . $extract['message'];
}
?>
I have created a simple chatbox using PHP. I want this to be able to load a all the new message and scroll to the bottom of the chatbox. I'm using AJAX to reload the new messages, but cannot seem to make it scroll down to the bottom where the new messages appear.
I have tried using down.scrollTop = down.scrollHeight; but cant get it to function properly.
Any help please?
<div id="tab3">
<h2>Chat Room</h>
<div id="c-input_wrap">
<div id="chatlog">
Loading chat please wait...
</div>
<div id="chatwrap">
<div id="chatinput">
<form name="chatbox" class="userchat">
<input class="userchat" name="message" type="text" autoplete="off" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()" autofocus/><br>
<input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" />
</form>
</div>
</div>
</div>
</div>
<script>
var form = document.querySelector('form[name="chatbox"]');
form.addEventListener("submit", function (event) {
event.preventDefault();
});
function submitChat() {
if(chatbox.message.value == '') {
alert('Error: Missing Fields.');
return;
}
var message = chatbox.message.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4&&xmlhttp.status==100) {
document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','chat.php?message='+message, true);
xmlhttp.send();
chatbox.reset();
}
$(document).ready(function(e) {
$.ajaxSetup({cache:false});
setInterval(function() {$('#chatlog').load('logs.php');}, 200);
});
</script>
css:
#tabs {
overflow: hidden;
max-width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0px -15px 0 0;
}
#tabs a {
float: left;
position: relative;
padding: 0 20px;
height: 0;
line-height: 30px;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
border-right: 20px solid transparent;
border-bottom: 30px solid #3D3D3D;
opacity: .3;
filter: alpha(opacity=30);
transition: all .5s;
}
#tabs a:hover, #tabs a:focus {
border-bottom-color: rgba(255,0,4,0.60);
opacity: 1;
filter: alpha(opacity=100);
}
#tabs a:focus {
outline: 0;
}
#tabs #current {
z-index: 10;
border-bottom-color: #3d3d3d;
opacity: .8;
filter: alpha(opacity=100);
cursor: default;
}
#content {
background-color: rgba(0,0,0,0.10);
border-top: 3px solid rgba(61,61,61,0.80);
padding: 2em;/*height: 220px;*/
overflow-y: auto;
height: 85%;
}
#content h2, #content h3, #content p {
margin: 0 0 15px 0;
}
#chatlog {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding: 0;
text-align: left;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
background-color: rgba(255,255,255,0.70);
border-top: solid 2px rgba(235,0,3,0.70);
width: 95%;
height: 88%;
overflow-y: auto;
word-wrap: break-word;
}
#c-input_wrap {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding: 0;
height: 63%;
}
#chatinput {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 27%;
right: 25%;
width: 70%;
}
#chatwrap {
position: absolute;
height: 40px;
width: 95%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: -10px;
}
input.userchat {
display: inline-block;
float: left;
margin-left: 0;
width: 50%;
padding: 10px;
border: none;
border-bottom: solid 2px #3D3D3D;
transition: border, background-color .75s;
background-color: rgba(255,255,255,0.70);
font-weight: bold;
line-height: 18px;
color: #000000;
}
input:focus.userchat {
background-color: rgba(255,255,255,0.90);
border-bottom: solid 2px rgba(235,0,3,0.69);
outline: 0;
color: rgba(61,61,61,1.00);
font-weight: bold;
}
input[type=button].userchat {
display: block;
margin-top: -23px;
margin-left: 2px;
text-align: center;
padding-left: 2px;
float: left;
width: 40px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: rgba(61,61,61,0.70);
font-size: 16px;
background: rgba(255,255,255,0.70);
border-bottom: solid 2px #3D3D3D;
cursor :pointer;
transition: all .75s;
}
input[type=button].userchat:hover,
input[type=button].userchat:focus {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
font-size: 16px;
border-bottom: solid 2px rgba(235,0,3,0.69);
background: rgba(255,255,255,0.90);
cursor: pointer;
}
chat.php:
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
if (isset($_SESSION['id'])) {
$userId = $_SESSION['id'];
$username = $_SESSION['username'];
$userLabel = $_SESSION['nickname'];
}
$connect = mysqli_connect("", "", "", "webclyde_root");
mysqli_select_db($connect, "webclyde_root");
$message = $_REQUEST['message'];
mysqli_query($connect, "INSERT INTO chat (name, message) VALUES ('$userLabel', '$message')");
$result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");
while ($extract = mysqli_fetch_assoc($result1)) {
echo $extract['name'] . ": " . $extract['message'];
}
?>
logs.php
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
if (isset($_SESSION['id'])) {
$userId = $_SESSION['id'];
$username = $_SESSION['username'];
$userLabel = $_SESSION['nickname'];
}
$connect = mysqli_connect("", "", "", "webclyde_root");
mysqli_select_db($connect, "webclyde_root");
$result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");
while ($extract = mysqli_fetch_assoc($result1)) {
echo "<br>" . $extract['name'] . ": " . $extract['message'];
}
?>
2 Answers
Reset to default 6To make it animated you can use the jQuery .animate() function.
Use:
var log = $('#chatlog');
log.animate({ scrollTop: log.prop('scrollHeight')}, 1000);
jsFiddle Example: http://jsfiddle/00xsrck8/
Or without animation use:
var log = $('#chatlog');
log.animate({ scrollTop: log.prop('scrollHeight')}, 0);
Used the provided css to acplish this task. Please see jsfiddle: http://jsfiddle/00g2LnqL/
Use this :
var c = $('#chatlog');
c.scrollTop(c.prop("scrollHeight"));