How can I do this?

[video=youtube;4NbtrnNr8nQ]http://www.youtube.com/watch?feature=player_embedded&v=4NbtrnNr8nQ[/video]

any tutorial about this?

 

There are tons of tutorials on Google for doing such. You're not gonna find something exactly to explain how DP et al does this, but put pieces of code together along with some creativity / common sense. I'm to lazy to search for one.

But that can be achieved using jQuery. Once the user submits their post using jQuery the post content is stored in a variable using JavaScript on the client side. Once the server side (PHP, ASP, JSP etc...) stores the content to the database successfully, the server side sends a message back saying that the post was submitted and stored successfully.

Upon receiving that message, using JavaScript, the content that was stored in the variable earlier on during submission of the post, is added to the current page's DOM.

(Pseudo code) Lets say the current page has 3 posts already

<div id="allpost">
<div>First Post</div>
<div>Second Post</div>
<div>Third Post</div>
</div>

HTML:

When you submit your post, it is stored in a variable like

var submittedPost = 'Your Post';

Code (markup):

When you submit your post and the server side responds successfully, using Javascript, the content that was stored is added to the current page's content.

var oldContent = document.getElementsByID("allpost");
var newContent = oldContent.'<div>'.submittedPost.'</div>';
document.getElementsByID("allpost") = newContent;

Code (markup):

So the page would now look like

<div id="allpost">
<div>First Post</div>
<div>Second Post</div>
<div>Third Post</div>
<div>Your Post</div>
</div>

HTML:

I KNOW THE ABOVE CODE IS BOGUS AND NOT VERY GENERIC BUT ITS JUST FOR AN EXAMPLE.

jQuery handles all the fancy animation etc of the div rolling down and what not. If you are already a programmer you should get an idea of how to go about this I hope.

 

do you mean the screencast?