NodeChat - Client

by Tgwizman

HTML

<div id="messages">
    <p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p>
</div>
<div id="sidebar">
    <p>hi</p><p>hi</p><p>hi</p>
</div>
<input type="text" id="chatbox" watermark="Type something, then hit enter to send it..." />

CSS

#messages {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    border: 1px solid #999;
    overflow: auto;
}

#sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px;
    display: block;
    border: 1px solid #999;
    overflow: auto;
}

#chatbox {
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: block;
    border: 1px solid #999;
    overflow: hidden;
}

#messages p {
    margin: 0px;
    padding: 0px;
    border: none;
    border-bottom: 1px solid #999;
}

JavaScript

function resize() {
	document.getElementById('messages').style.width = window.innerWidth - 203 + 'px';
    document.getElementById('messages').style.height = window.innerHeight - 22 + 'px';
    document.getElementById('sidebar').style.height = window.innerHeight - 2 + 'px';
    document.getElementById('chatbox').style.width = window.innerWidth - 203 + 'px';
}

window.setInterval(resize, 1);