Menu
I am doing a simple chat application,I want to fix the scrollbar of a div always at the bottom.just like this
When loading the index page the scrollbar must be at the bottom
Here is my style.css
body{
font: 0.9em monospace;
}
.messages{
border: 1px solid #ccc;
width: 250px;
height: 210px;
padding: 10px;
overflow-y:scroll;
}
.message{
color: slategrey;
}
.message p{
margin: 5px 0;
}
.entry{
width: 260px;
height: 40px;
padding: 5px;
margin-top: 5px;
font: 1em fantasy;
}
Here is my index.php
<?php
session_start();
$_SESSION['user'] = (isset($_GET['user']) === TRUE) ? (int) $_GET['user'] : 0;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/styles.css"></link>
</head>
<body>
<div class="chat">
<div class="messages" id="messages">
</div>
<textarea class="entry" placeholder="type here and press enter"></textarea>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/chat.js"> </script>
</body>
How can i set this,please help me.. Thanks
636
use css position top keep it at the bottom {position : relative; bottom:0;} . Remove the css property once the user has scroll.
We can use the CSS “::-webkit-scrollbar” property which is responsible for changing the shape, color, size, shade, shadow, etc. of the scroll bar. But, here the property which we will use is the direction property of CSS for changing the position of the scroll bar.
In your <div id='page'> your CSS for margin is set to margin: 0 auto; Set it to margin: 0 0; (or remove the margin attribute entirely) and the scroll bar goes away.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
Try this jquery :
$(".messages").animate({ scrollTop: $(document).height() }, "slow");
return false;
and here is the fiddle : http://jsfiddle.net/EX6vs/
or refers to the height of the element (many agree is the right way), as below:
$(".messages").animate({ scrollTop: $(this).height() }, "slow");
return false;
and here is the fiddle : http://jsfiddle.net/69vpnyu1/
121
you want something like this, where box is the div that contains your chat. call these on page load.
var box = document.getElementById('Box');
box.scrollTop = box.scrollHeight;
also call this when you post a new chat.
i had created a similar application using google app engine. you can have look at it here
http://chatter-now.appspot.com/
feel free to use it as reference. although you are using php, the visual aspects might be helpful.
36
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
