Menu
I have this chat thread
What it does currently is when it gets to the bottom of the page it scrolls up so that it is always at the bottom of the page.
The issue is that as you can see in the image, it hides behind the form before it reaches the bottom of the page. Hence, I need to redefine what the bottom of my page is:
I have tried:
function scroll() {
window.scrollTo(0, document.body.scrollHeight + document.getElementById('form_id').offsetHeight);
};
But it seems as though it has no effect from the function listen before this one.
Here is the rest of my code:
<html>
<head>
<title>Chat Demo</title>
<style>
.top-bar {
background: #009E60;
position: relative;
overflow: hidden;
}
.top-bar::before {
content: "";
position: absolute;
top: -100%;
left: 0;
right: 0;
bottom: -100%;
opacity: 0.25;
background: radial-gradient(white, #009E60);
}
.top-bar > * {
position: relative;
}
.top-bar::before {
animation: pulse 1s ease alternate infinite;
}
@keyframes pulse {
from { opacity: 0; }
to { opacity: 0.5; }
}
* {
margin: 0;
padding: 0;
}
h1{
padding: 5px;
}
body {
font: 15px Helvetica, Arial;
}
form {
background: #009E60;
padding: 10px;
bottom: 0;
position: fixed;
width: 60%;
box-sizing: border-box;
}
form input {
padding: 5px;
width: 80%;
margin-right: 0.5%;
vertical-align: bottom;
font: 15px Helvetica, Arial;
}
form button {
width: 18.5%;
padding: 9px;
vertical-align: bottom;
}
ol {
padding-bottom: 100px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
.left {
padding: 5px 10px;
background: -webkit-linear-gradient(left,rgba(215,229,228,1),rgba(255,255,255,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,255,255,0),rgba(215,229,228,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,255,255,0),rgba(215,229,228,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(215,229,228,1), rgba(255,255,255,0)); /*Standard*/
text-align: left;
}
.right {
padding: 5px 10px;
background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(228,215,229,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(228,215,229,1),rgba(255,255,255,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(228,215,229,1),rgba(255,255,255,0)); /*Fx 3.6-15*/
background: linear-gradient(to right,rgba(255,255,255,0),rgba(228,215,229,1)); /*Standard*/
text-align: right;
}
.module {
width: 60%;
margin: 20px auto;
}
</style>
</head>
<body>
<section class="module">
<div id="wrapper">
<div id="header">
<header class="top-bar">
<h1>Chat Demo</h1>
</header>
</div>
<div id="content">
<ol id="messages"></ol>
</div>
<div id="footer">
<form id="form_id" action = "#">
<input id = "user_input"/>
<button id="btn_id">send</button>
</form>
</div>
</div>
</section>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$("#form_id").submit(function(){
var value = $("#user_input").val();
if(value.length > 0 && value != "Default text"){
socket.emit('message from me', value);
$('#messages').append($('<li class="right">').text(value));
$('#user_input').val('');
scroll();
}
return false;
});
socket.on('message', function(msg){
$('#messages').append($('<li class="left">').text(msg));
});
function scroll() {
window.scrollTo(0, document.body.scrollHeight);
};
</script>
</body>
</html>
643
Scrolling in JavaScript always scrolls up to the maximum possible value. In your case it is a size of the scrollable contents. All you need to do is applying additional empty space that it is rendered behind the form.
So from your code (where you show us no CSS) you can add to your :
ol { padding-bottom: 50px; }
where 50px is the height of your form.
Also if you always want to scroll to the max bottom you can just use end value like 999999 instead of calculating it. Browser will be smart enough to understand it
127
Hi just add this css in your html page you will get output div#footer { margin-top: 10px; }
40
answered Nov 28 '25 19:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
