It's hard for me to explain, so I'll start with a picture:
I'm working on a video chat server using WebRTC for a class. The server portion isn't the hard part, it's making everything pretty. What I am trying to do, if at all possible is make a scrollable div tag that contains the chat, and to the right of it, put the local video stream.
Below is the code for adding the local video stream.
var onLocalStream = function (stream) {
$("#chatArea").css({ right: ($(window).width()) - 175 })
var video = $("<video>").attr({
autoplay: "autoplay", id: stream.id, height: "150px", width: "170px", float: "right", display: "inline"
}).bind("click", { streamId: stream.id }, function (args) {
RTCConnection.removeStream(args.data.streamId, function (id) {
console.log("Local stream removed", id);
});
$(this).remove();
}).appendTo("#ChatAndVideo");
attachMediaStream($(video).get(0), stream);
};
This gets bound to the RTCConnection that is made later. My attempt was to shrink the chatArea by enough to fit the video to the right of it. The click event is really just for testing and will be removed later.
Now here is the HTML for the area I'm trying to append to.
<div id="ChatAndVideo">
<div id="chatArea" style="width: auto; height: 100px; overflow: auto; overflow-y: scroll; outline-color:black; outline:auto">
<p id="chat"></p>
</div>
</div>
And eventually I do plan on cleaning this up some and putting the CSS in a separate file, but I didn't want to worry about that till it was working.
This question has probably been answered in some way already, but I'm not really sure how to search for it. What little knowledge I have of HTML, CSS, and JavaScript is all self taught, so thank you in advanced for any feedback!