As a very crude example of how I would use a <div> and overflow: auto; for a chat
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX Chat with a <div></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html,body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
}
#page {
width: 700px;
margin: 20px auto 0;
}
#chat {
background: #fff;
color: #000;
border: 2px solid #000;
height: 500px;
overflow: auto;
}
</style>
<script type="text/javascript">/* <![CDATA[ */
function updateChatBox()
{
// This function would normally get new chats with AJAX
// But I'll just simulate it using some gibberish
// This generates some random gibberish
var chars='aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789 ';
var l=5+Math.floor(Math.random() * 15);
var str='';
for (var i=0; i<l; i++) {
str += chars.substr(Math.floor(Math.random()*chars.length), 1);
}
// Put the gibberish in the chat -- normally here you would put any new messages obtained through AJAX in the text
document.getElementById('chat').innerHTML += '<strong>User' + (Math.floor(Math.random()*5)+1) + '</strong>: '+str+'<br />';
// Make sure the div scrolls to the bottom so users don't have to scroll manually
// Note: I haven't tested this cross-browser, but it works in FF and you should get the idea :)
document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
// Fire this function again.
// Here I used a random time out to make the chat look more realistic
// But in a real world setting with AJAX you would use a fixed value, like 1000
setTimeout(updateChatBox, Math.floor(Math.random()*750)+250);
}
window.onload = updateChatBox;
/* ]]> */</script>
</head>
<body>
<div id="page">
<div id="chat">
</div>
</div>
</body>
</html>
If you want multiple themes, just put them in the <head> of your HTML as alternate stylesheet. For example:
HTML Code:
<link rel="alternate stylesheet" title="yellow" type="text/css" href="/styles/themes/yellow.css" />
And then use a simple JavaScript stylesheet switcher (tutorial) to change enable/disable the stylesheet of your liking when a user clicks a button for a certain theme. The tutorial I linked to above uses cookies, so when the user reloads the page they will still see the theme they selected earlier (though they might see a flash of the default theme first, just a few ms).
Note: I use inline CSS and inline Javascript for this example, but if you use this it would be better to turn them into external versions (a .css file and a .js file)
Bookmarks