display elements from bottom to top like facebook messages - html

Question

I want to display elements from bottom to top like how the facebook messages are displayed from bottom to top. How would I do that?
html:
<div id="message_wrapper">
<div class="message">
<p>1 Message message message....</p>
</div>
<div class="message">
<p>2 Message message message....</p>
</div>
<div class="message">
<p>3 Message message message....</p>
</div>
<div class="message">
<p>4 Message message message....</p>
</div>
</div>
So I would like it to display:
4 Message message message....
3 Message message message....
2 Message message message....
1 Message message message....
Update: Added django tempate
This the template for coversation.html:
<div id="messages_wrapper">
<!-- if there are conversation in the recent thread, then show the conversation -->
{% if conversations != 0 %}
<p><b>You have conversations:</b></p>
<!-- check the messagestate of each message of the recent_tread, if all the messages of the thread are not hidden then show the messages -->
{% if recent_thread|all_message_hidden:user %}
<p>All messages are hidden</p>
{% else %}
{% for conversation in conversations %}
{% if conversation|conversation_hidden:user %}
{% if conversation.sender == user %}
<div id="conversation" class="user_sent_conversation">
<p>{{conversation.id}}-{{conversation.body}} : Sender- {{conversation.sender}}, ID {{conversation.sender.id}}</p>
<p>Already hidden</p>
</div>
<hr/>
{% else %}
<div id="conversation" class="others_sent_conversation">
<p>{{conversation.id}}-{{conversation.body}} : Sender- {{conversation.sender}}, ID {{conversation.sender.id}}</p>
<p>Already hidden</p>
</div>
<hr/>
{% endif %}
{% else %}
{% if conversation.sender == user %}
<div id="conversation" class="user_sent_conversation">
<p>{{conversation.id}}-{{conversation.body}} : Sender- {{conversation.sender}}, ID {{conversation.sender.id}}</p>
[X]
</div>
<hr/>
{% else %}
<div id="conversation" class="others_sent_conversation">
<p>{{conversation.id}}-{{conversation.body}} : Sender- {{conversation.sender}}, ID {{conversation.sender.id}}</p>
[X]
</div>
<hr/>
{% endif %}
{% endif %}
{% endfor %}
<div id="message_form_wrapper_inside">
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<form action="/inbox/send_messages/{{recent_thread|get_user_id:user}}/" method="post">
{% csrf_token %}
<label for="recipient">To - {{recent_thread|get_user_id:user}}</label>
<label for="subject">
Subject -
{% if recent_thread.subject != '' %}
{{recent_thread.subject }}
{% else %}
No subject
{% endif %}
</label>
<label for="body">Message</label>
<textarea name="body" id="body" value=""></textarea>
<input type="submit" value="Send">
</form>
</div>
{% endif %}
{% else %}
<p>No message for this thread</p>
{% endif %}
</div>
Updated: Added the views.py
Views for displaying the message.
#login_required(login_url='/accounts/required_login/')
def message(request):
user = request.user
# Get all the threads of that user
threads = user.thread_set.all()
# Order the threads by which thread recieved the latest message
order_threads_message = threads.annotate(max_sent_date=Max('message__sent_date')).order_by('-max_sent_date')
if order_threads_message.count() > 0:
# Get the recent thread
recent_thread = order_threads_message[0]
if recent_thread.message_set.all().count() > 0:
# Get the conversations of the recent thread
recent_thread_conversations = recent_thread.message_set.all()
return render(request, 'conversations.html', {
'recent_thread':recent_thread,
'all_threads':order_threads_message,
'conversations':recent_thread_conversations,
'active': recent_thread.id
})
else:
recent_thread_conversations = 0
return render(request, 'conversations.html', {
'recent_thread':recent_thread,
'all_threads':order_threads_message,
'conversations':recent_thread_conversations,
'active': recent_thread.id
})
else:
order_threads_message = 0
recent_thread_conversations = 0
return render(request, 'conversations.html', {
'all_threads':order_threads_message,
'conversations':recent_thread_conversations,
})

Answer 1

The simplest solution is to loop over the messages in reversed orderr:
{% for conversation in conversations reversed %}
...
{% endfor %}

Answer 2

In order to get it displayed "bottoms up" use the #reverse() method on your QuerySet.
This is assuming that the threads are sorted in descending order, that is, newest message is first.
recent_thread_conversations.reverse()