quake like console in javascript (and jquery if it can help)

I want to do a console like on quake : http://klickverbot.at/blog/2011/02/quake-style-terminal-on-osx/quake4-console.png

When you press tilde, it drop down from the top of the screen, overlapping half of the screen, if you press again tidle, it disappear totally.

The question is how to create an area where you can display some log/text with a browser scroll bar and so on without iframe? ht开发者_Python百科tp://lifehacker.com/ seems to do it, there's 2 scrollbars that scroll only a part of the webpage.

And is jquery or/and jquery ui gives some easier way to achieve it?

Here you go. Live Demo showing how to use jquery to capture the ~ key and slide down a console div.

UPDATE WITH SCROLLBARS

http://jsfiddle.net/huxXT/19/

Update: Now triggers on ~ in addition to the back-tick.

Live Demo

$(window).keypress(function(e) {
    if (e.which == 96 || e.which == 126) {
        $('#console').slideToggle();
    }
});