Complex HTML/CSS Layout Positioning - html

Question

I have this complex HTML Layout:
http://jsfiddle.net/5RgjL/2/
As you can see, messages are anchored at the top of the #messages container.
I want it so they are anchored at bottom, so the first message displayed will be at bottom, and not at the top.
Also when resizing the page the view inside the scrolling box must slide up from bottom.
It is hard to explain, i will make you understand with an example:
Populate messages inside the box, till is full and there is the scroll bar.
Try to resize the entire window from bottom, you can see that the message on bottom will be covered. i do not want this, but instead, slide up from bottom.
I tried many things, like to absolute positioning the #message container, but i run into other problems and i cannot get it to work like i want.
I need some help from someone really experienced in HTML/CSS.
If you are familiar with the Facebook messages page, you will understand what i'm trying to do.
PS: Some CSS styles are applied with javascript, because i generate page content dinamically, and only in this page i need those styles.

Answer 1

If I understand correctly then setting an absolute bottom position for the messages until there are more messages than vertical space will solve the first requirement of new messages appearing at the bottom.
This requires a CSS and JavaScript change:
CSS
#messagesWrapper {
position:absolute;
bottom:0;
}
JavaScript
var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');
function populateMessages(){
var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
i++;
newMessage.hide().appendTo('#messages').stop().fadeIn(400);
if ($messages.height() >= $messagePageContent.height()){
messagesWrapper .css({position:'static'});
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
}
}
The scrolling also needs to occur if then window is resized, so attaching a handle to the resize event is also required.
$(window).resize(function() {
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
});
However, this is not good enough because the height calculation is missing which resets the CSS position to its default value. This is required for the enscroll jQuery plugin (and I suspect any sort of scrolling) to work.
But we can simply refactor and move all of the code into a common function, for example:
var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');
function populateMessages(){
var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
i++;
newMessage.hide().appendTo('#messages').stop().fadeIn(400);
scrollMessages();
}
function scrollMessages() {
if ($messages.height() >= $messagePageContent.height()){
$messagesWrapper.css({position:'static'});
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
}
}
$(window).resize(scrollMessages);
This is the code I used in this demo. It's probably not the best solution, I was looking at using -webkit-transform: scaleY(-1) to flip the container and then flip the messages back but it messed up the scrolling (i.e. it was backwards!). There might be a better solution using CSS transforms out there.

Answer 2

You can have them added to the bottom by applying this style to your messages id:
position: absolute;
bottom: 0;
Also, if you want the images to add to the top of the list instead of to the bottom you can use prependTo() instead of appendTo().
I'm not sure what exactly you are asking for on the scrolling, so if you could give a bit more info I will update my answer.