Chat text auto scroll down and information load from database

Question

I want to be able to keep chat text to be always scrolled to the bottom of the chat.

I have looked at many tutorials and tried many examples from stack overflow but none of them worked.

Currently my chat text keeps on going out of the textarea when there is too many lines, even so i have overflow:hidden.

I also want the textarea to only load last 50 entries from the database so that when users join they will not have to load everything that is said in the chat.

Any Idea how to do those 2 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

http://gyazo.com/fe71d7d9699b9784fda5ba1c862fad53

From your picture there might be a few issues. To help you with the scrolling issue, here are suggested solutions: http://stackoverflow.com/questions/10503606/scroll-to-bottom-of-div-on-page-load-jquery — Drakes, Apr 20 '15 at 09:58
um.. after i tried using the code from tutorial my code doesnt load anything from database even when i remove the code — Emperial, Apr 20 '15 at 10:07

score 1 · Accepted Answer · answered Apr 20 '15 at 10:12

If you don't want to have a scroll, perhaps you can use position: absolute; and position: relative;, just like in this example

#ChatBig {
    width: 60%;
    height: 600px;
    margin: auto;
    background-color: white;
    overflow:hidden;
    resize:none;
    background: red;
    position: relative;
}
#ChatMessages{
    width: 100%;
    min-height: 498px;
    border: 1px solid #000;
    font-size: 16px;
    font-weight: normal;
    overflow:hidden;
    resize:none;
    position: absolute;
    bottom: 50px;
}
#ChatText{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    overflow:hidden;
    resize:none;
    position: absolute;
    bottom: 0;
}
#ChatText:focus{outline: none;}

<div id="ChatBig">
    <div id="ChatMessages">
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        qwe<br/>
    </div>
    <input type="text" id="ChatText" name="ChatText">
</div>

you need to make the container to position: relative;, then make the child to absolute.

first, the ChatBig is 600px and ChatText is 50px, so change the ChatMessages to

min-height: 498px; // don't use height
position: absolute;
bottom: 50px; // because ChatText is 50px

then for the ChatText, set it to

position: absolute;
bottom: 0;

and there, you will have the latest ChatMessages keep at the bottom

Note: The qwe is only to identify the last line

score 0 · Answer 2 · edited Dec 17 '16 at 18:36

0

You have to add max-height property.

.class
{
    max-height: 150px;
    overflow-y: scroll;
}

edited Dec 17 '16 at 18:36

zurfyx

31,043
20
111
145

answered Apr 20 '15 at 09:58

Ravinder Kumar

902
10
29

I dont want a scoll bar.. as i dont want people to scroll up when the chat moves it moves – Emperial Apr 20 '15 at 10:00

score 0 · Answer 3 · edited Dec 11 '15 at 00:10

0

What does this line mean

<input type="text" id="ChatText" name="ChatText"></textarea>

wither it should be

<textarea id="ChatText" name="ChatText"></textarea>

or

<input type="text" id="ChatText" name="ChatText"/>

edited Dec 11 '15 at 00:10

Josh Crozier

233,099
56
391
304

answered Apr 20 '15 at 09:59

Kawinesh S K

3,148
1
16
29

Chat text auto scroll down and information load from database

3 Answers3