Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Chat demo</title>
- <style type="text/css" media="screen">
- #container, #chat_messages, #chat_input {
- width: 100%;
- }
- #container {
- height: 400px;
- }
- #chat_messages {
- width: 90%;
- height: 95%;
- border: 1px solid #fa0;
- border-radius: 5px;
- padding: 10px;
- overflow: auto;
- }
- #chat_input {
- height: 5%;
- }
- #send {
- font-size: 1.4em;
- }
- #chat_messages ul, #chat_messages li {
- list-style: none;
- margin: 0px;
- padding: 0px;
- }
- #message {
- width: 75%;
- font-size: 1.4em;
- margin-top: 15px;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="chat_messages">
- <ul>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- <li><strong>Braubrau:</strong> Testing...</li>
- </ul>
- </div>
- <div id="chat_input">
- <form action="" method="post" id="submit_form" accept-charset="utf-8">
- <input type="hidden" name="author" value="John Doe" id="author" />
- <input type="text" name="message" value="" id="message" placeholder="Write your message here!" />
- <input type="submit" name="send" value="Send" id="send" />
- </form>
- </div>
- </div>
- <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- $(document).ready(function() {
- var message_box = $('#chat_messages');
- var last_message = $('#chat_messages li:last');
- function chatScroll() {
- var bottom_position = last_message.position().top;
- message_box.animate({
- scrollTop: bottom_position
- });
- }
- function sendMessage() {
- var message = $('#message').val();
- var author = $('#author').val();
- $('#message').val('');
- message_box.append('<li><strong>' + author + ':</strong> ' + message + '</li>');
- chatScroll();
- }
- $('#submit_form').submit(function() {
- sendMessage();
- return false;
- });
- chatScroll();
- $('#message').focus();
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement