I want to do a console like on quake : .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? / 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?

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? http://lifehacker./ 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?

• javascript
• jquery
• jquery-ui

• you want to know the tilde thing or the scrollbar thing? – Naftali Commented May 3, 2011 at 17:18
• scrollbar. I agree i wasn't clear enough: The question is how to create an area where you can display some long log/text with a browser scrollbar without iframe? – acemtp Commented May 3, 2011 at 18:21

2 Answers 2

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/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();
    }
});