Home
Live Examples
Quick Start
Customize the Look
Write Plugins
Download
API
Issues
Community
Links

Customize The look

1. Command prompt by itself simply ask for a textarea and it'll work with it, no fancy windows, just a bare bone comamnd prompt. You can see the bare command prompt in this DHTML Navigation Live Example.

2. You may like the fancy window I have around my textarea like in this example. I used Prototype Window for the decoration. Note, to work with command prompt, I modified their source code a little bit, so don't download their software and overwrite my included version of the library. (what i modified will be documented on this page later).

If you want the pretty window now, you have to

Make sure you have a container outside of your textarea. In my case, it's a table with id="test_content". You can use div as well.

<table id="test_content">
<tr>
     <td>
        <textarea 
              style="BACKGROUND:#000000; 
              COLOR:#ffffff" 
              id="CmdPrompt" 
              cols="80" rows="20" 
              wrap="virtual">
        </textarea>
     </td>
</tr>
</table>

Add this function to your <head></head> section. *Replace 'test_content' with the container id that you have which I mentioned in the seciton above.

function openContentWindow() {
var contentWin = new Window('content_win', {
						className: "alphacube",
						title: "AjaxLab Command Prompt",
						maximizable: true, 
						resizable: true, 
						closable: true,
						hideEffect:Element.hide, 
						showEffect:Element.show
				}
				)
var width = $('test_content').offsetWidth;
var height = $('test_content').offsetHeight;
contentWin.setContent('test_content', true, true);
contentWin.setSize(width,height);
contentWin.setLocation(420,120);
contentWin.toFront();
contentWin.setDestroyOnClose();
contentWin.show();
var myObserver = { 
				onEndResize	:	function(eventName, win)
				{
				     if(win == contentWin)
				     {
						$('CmdPrompt').style.width = win.width-15+"px";
						$('CmdPrompt').style.height = win.height-15+"px";
					 }
				}, 
				
				onEndMaximize: function(eventName, win)
				{
					if(win == contentWin)
					{
						$('CmdPrompt').style.width = win.width-15+"px";
						$('CmdPrompt').style.height = win.height-15+"px";
					}
				}
			}
			Windows.addObserver(myObserver);
}

Simply add openContentWindow() function to pageLoad() and you are done.

Please refere to Prototype window documentation for more information on how to customize the pretty window look.

Credits

AjaxLab.com