- Messages
- 228
- Reaction score
- 13
- Points
- 38
may problema po ako sa socket.io na nagawa ko, kasi everytime na mag chachat po ako sa taas po ng chatbox nang lumalabas yung msg then pag napunno na po yung chat fields ang problema ay hindi po nag au-auto scroll ang aking chat box sa tuwing may bagong chat. ang hindi po maganda ay pag may bagong chat hindi agad ito mababasa kung hindi mo i sscroll down manually. tnry ko na po yung .ScrollTop sa js pero not working pa din po. Sana po may makatulong sakin sa JS, marami na po ako na search at nag search na din po ako bago mag post dito, puro scrolltop nga po ang nakikita kong solution pero hindi ko po mapagana. Okay po Sana kung From bottom nang gagaling yung chat message or kahit sa taas basta nag sscroll down everytime may new chat msg.
Sana po may makatulong saking problema mga sir salamat.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nia Chat</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Animate CSS cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="/styles.css">
</head>
<body>
<!--Username Panel-->
<div class="bgimg">
<div id="nickWrap" class="container">
<h1>Enter Username</h1>
<p id="nickError"></p>
<form id="setNick" class="well form-horizontal">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" size="40" id="nickname" placeholder="Section - NickName"></input>
</div>
<br />
<button class="btn btn-success" type="submit">Log in <span class="glyphicon glyphicon-send"></span></button>
</form>
</div>
<!--Chat Panel -->
<div class="container" id="contentWrap">
<div id="chatWrap">
<!--chat box-->
<div class="chatbox" id="chat"></div>
</div>
<!-- online Users -->
<br />
<h2 class="animated infinite bounce">Online Users</h2>
<ul class="well list-group" id="users"></ul>
<!--Composing msg Area-->
<form id="send-message">
<textarea class="form-control" rows="3" id="message" placeholder="Type your msg here!"></textarea>
<button id="sendbtn" class="btn btn-success animated infinite pulse" type="submit">Send Chat<span class="glyphicon glyphicon-send"></span></button>
</form>
</div>
</div>
<script>
$(function() {
var socket = io.connect();
var $nickForm = $('#setNick'); //<---nickname form
var $nickError = $('#nickError'); //<---log in Error
var $nickBox = $('#nickname'); //<---nickname Log in fields
var $users = $('#users'); //<---Online users
var $messageForm = $('#send-message'); //<---Send Chat Button
var $messageBox = $('#message'); //<---Chat Compose fields
var $chat = $('#chat'); //<---Chat message
// User Log-in Panel
$nickForm.submit(function(e){
e.preventDefault();
socket.emit('new user', $nickBox.val(), function(data){
if (data) {
$('#nickWrap').hide();
$('#contentWrap').show();
} else {
$nickError.html('That Username is already take! Try Again...');
}
});
$nickBox.val('');
});
//usernames
socket.on('usernames', function(data){
var html = '';
for(var i=0; i < data.length; i++){
html += data[i] + '<br />'
}
$users.html(html);
});
//chat box behavior
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $messageBox.val(), function(data){
$chat.append('<span class="error">' + data + "</span><br/>");
});
$messageBox.val('');
});
socket.on('load old msgs', function(docs){
for(var i=0; i < docs.length; i++){
displayMsg(docs[i]);
}
});
//msg
socket.on('new message', function(docs){
displayMsg(docs);
});
function displayMsg(data){
$chat.append('<span class="msg"><b>' + data.nick + ': </b>' + data.msg + "<span/><br/>");
}
//When hit enter key for chat msg.
$("#message").keyup(function(event){
if(event.keyCode == 13){
$("#sendbtn").click();
}
});
$('#chat').scrollTop($('#chat')[0].scrollHeight); //<---SCROLLTOP
});
</script>
</body>
</html>Sana po may makatulong saking problema mga sir salamat.
