Scroll down the chat for a set time, but disable user interaction
I am writing a web chat system to allow a user to write a message to his friend, but I have a problem scrolling through new messages with jquery.
I have these files: messages.php
where I store the form to submit and view posts, chatupd.js
execute the post and receive posts and update the div every "x" seconds, post_updmsg.php
Print posts to the database; get_updmsg.php
Retrieves the latest messages from the database;
But the only files needed for this question are the first two:
messages.php
<div class='chatContainer'>
<div class='chatHeader'>
<h3>Welcome <?php echo get_talkm3_nome(); ?></h3>
</div>
<div class='chatMessages'>
<?php
include '../core/config.inc.php';
$db = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$id_usr_2 = $_SESSION['email'];
//Get Messages
$query = $db->prepare("SELECT * FROM `chat_t3`");
$query->execute();
//Fetch
while ($fetch = $query->fetch(PDO::FETCH_ASSOC))
{
$id_usr_2 = $fetch['id_usr_2'];
$id_usr_1 = $fetch['id_usr_1'];
$text = $fetch['text'];
$date = $fetch['date'];
if ($id_usr_1 == $_SESSION['email']){
echo "<li class='message_container'><div class='sender'>From - <b>".ucwords($id_usr_1)."</b> TO - ".ucwords($id_usr_2)."</b> - ".$text." ".ucwords($date)."</div></li> ";
} else {
echo "<li class='message_container'><div class='reader'>From - <b>".ucwords($id_usr_1)."</b> TO - ".ucwords($id_usr_2)."</b> - ".$text." -".ucwords($date)."</div></li> ";
}
}
?>
</div>
<div class='chatBottom'>
<form action='#' onSubmit='return false;' id='chatForm'>
<input type='hidden' id="id_usr_1" value="<?php echo get_talkm3_email() ?>"><br />
<input type='text' id='id_usr_2' value="" placeholder="inserisci la mail del destinatario" />
<input type='text' name='text' id='text' value='' placeholder='Type your message'>
<input type='submit' name='submit' value='Post'>
</form>
<br>
</div>
</div>
chatupd.js
$(function(){
$(document).on('submit', '#chatForm', function(){
var id_usr_1 = $.trim($("#id_usr_1").val());
var id_usr_2 = $.trim($("#id_usr_2").val());
var text = $.trim($("#text").val());
if (id_usr_1 != "" && id_usr_2 != "" && text != ""){
$.post('../core/chat/post_updmsg.php', {id_usr_1: id_usr_1, id_usr_2: id_usr_2, text: text}, function(data){
$(".chatMessages").append(data);
});
} else {
alert("Data Missing");
}
});
function getMessages (){
$.get('../core/chat/get_updmsg.php', function(data){
$(".chatMessages").html(data);
});
}
setInterval(function(){
getMessages();
}, 1000);
});
Now my questions are:
- How can I automatically scroll down the page to display the last post? But if the user wants to see old messages and scroll the page, don't let them be redirected to the bottom of the page after "x" seconds?
- If the user scrolls the page and the script to scroll down is blocked, how to activate it when the user scrolls the page completely?
source to share
Among other implementations, there are two (good) ways to achieve what you want. The first one is the one you want:
Not at the bottom (User scrolling)> Scroll Lock
If user scrolls messages> don't scroll ToBottom when new message appears:
var $chat = $(".chatMessages");
var chatHeight = $chat.innerHeight();
var c = 1;
var chatIsAtBottom = true;
function newMessage() {
$chat.append("<li>This is message "+ (c++) +"</li>");
if(chatIsAtBottom){
$chat.stop().animate({
scrollTop: $chat[0].scrollHeight - chatHeight
},600);
}
}
function checkBottom(){
chatIsAtBottom = $chat[0].scrollTop + chatHeight >= $chat[0].scrollHeight;
}
$chat.scrollTop( $chat[0].scrollHeight ).on("scroll", checkBottom);
setInterval( newMessage, 2000 );
- Pros . Other events will not interact with the current custom scroll position.
- Cons . In this example, while leaving the message scrolling area, you must notify the user of "[New Unread Messages]"> which will scroll down.
Hover / Focus on Comment Area> Scrolling with Lockout Lock
Another is related to this old post that does:
If the user hovers over the message area (logically he: 1. Scrolling, reading, copying some old text, etc.) interaction)) than preventing scrolling
var $chat = $(".chatMessages");
var chatHeight = $chat.innerHeight();
var c = 1;
function newMessage() {
$chat.append("<li>This is message "+ (c++) +"</li>");
if(!$chat[0].noScroll) {
$chat.stop().animate({scrollTop: $chat[0].scrollHeight-chatHeight},600);
}
}
$chat.hover(function() {
return this.noScroll ^= 1;
});
$chat.scrollTop( $chat[0].scrollHeight );
setInterval( newMessage, 2000 );
- Pros: Simple interface
- Cons: Most of the time this is cool and intuitive, but can be annoying if the user: ie: copying a message from this scrolled board - on a mouse player, the bottom of the scroll may prevent the user from performing more actions at that exact scroll position.
source to share