I'm currently working on a real-time Twitter feed using Node.js and websockets. My main goal is to make sure that the display automatically scrolls horizontally when the browser window is full, while preventing any vertical overflow.
This project will be showcased on a fixed screen, so I don't have to worry about the browser being resized. Here's what I've come up with so far:
socket.onmessage = function(message) {
var d = JSON.parse(message.data);
console.log(message.data);
var obj = {
text: d.text,
imgURL: d.imgURL,
}
updateView(obj);
}
var updateView = function(obj) {
container.append("<span class='inner'><img class='profile' src=" + obj.imgURL +
"></img><p>" + obj.text + "</p></span>");
}
span#container {
width: 1450px;
min-width: 100px;
min-height: 100%;
overflow-y: hidden;
overflow-x: scroll;
}
span.inner {
float: left;
border: 1px #333333 solid;
width: 469px;
height: 450px;
}
<div id="container"></div>