Building a DOS-feel script. How to make the command line?


Tags: javascript,html,css,layout

Problem :

I always had the idea to make a textarea based program, that gets the last line and uses it as a command. So it looks like some cool DOS-like program.. But in fact is simple textarea -> AJAX -> PHP -> textarea again. Textarea based version works great, but has alot of drawbacks. Mostly related to not getting the right command and possible vulnerabilities to the script.

So, my idea is to use a output container and command line totally separately. I found a good example of what I want, but I cannot figure out, how it is actually made. The main idea is that the hole thing feels like one block of text and you can highlight it:

enter image description here

But you actually cant delete the prompt (c:>) or the already outputted text above.. Since the command line is an actual input.

I don't understand, how this effect is being achieved. You can see the above examples source code, it is basically:

<div id="black_wrapper">
    <div id="outputted_code"></div>
    <span id="prompt">c:\&gt;</span><span id="commandline"></span><span id="blinker"></span>
    <input type="text" name="actual_commandline" value="" />
</div>

And the JavaScript behind it is: http://pastebin.com/pjbd9Y7k

How can I merge the spans line with the input, so it works like one line, but you cannot manipulate the span#prompt or span#blinker contents?

It is very hard to find any help on www for such localized problems. I can see some CSS in the example-link above..however my knowledge of CSS tells me, that it has nothing to do with that layout.

Also, I drew out exactly what I'm thinking to do, as it is very hard to explain these types of technical questions:

enter image description here

  • Red = General wrapper, not much function
  • Blue = Prompt area, very static
  • Green = Writing area, expands its width when typing, pushing the blinker more to the right
  • Purple = Blinker container, simple gif animation that looks like this: enter image description here

Note: I'm not actually ripping-off that example site, but well only that command-line layout. Any hint, link code or idea is welcome. It can be totally alternative, but should achieve the goal, thanks :)

Edit: The question got solved thanks to Joe. However, since the original idea might interest somebody in the future.. I will include a small picture, of what my script looks like. Maybe this inspires some of you someday :)

enter image description here



Solution :

What he's doing is hiding a textbox off-screen. The actual command line is just an element styled to have 1 line's worth of height. When you click this command line, the textbox takes focus.

The C:\> and _ sandwich the textarea, so your text appears in between, thus increasing the width on the command line element as you type, and pushing the _ to the right, giving the illusion that it moved on its own.

http://jsfiddle.net/YeR3L/1/


    CSS Howto..

    How to separate header from content

    How to remove border for last column in css?

    How do I format tabs in Blueprint CSS?

    ASP.net - How to achieve CSS with constant values, arithmetic and string manipulation

    How to fade loop background images in Twitter's Bootstrap 3

    CSS: how to make nth table column border thicker when column count is variable?

    How to 'clip away' part of a div using CSS?

    How to properly align rows with bootstrap

    How to float div in CSS?

    How to add a fade effect to html transition with javascript

    How to create two CSS transitions in parallel on nested elements

    How can I add read more click event to only open one news article?

    How to print data from left to right in html using css

    How to center a rotated div inside a table element with a specific width?

    How to render a template with dynamic CSS?

    How to write a PHP code that will group students into groups of ten using data from a database? [closed]

    How to write many functions in one JS function

    How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript) [duplicate]

    How can I use symbol fonts like marvosym in the browser?

    How to use Custom Fonts using CSS?

    CSS: how to have reposition relative to a centered background image

    How to make margin collapsing work with input type=button/submit?

    how to display image on mouse over by css

    How to make a barlike chart but only with html and css [closed]

    How can I make a div element float left after another float left while still filling the rest of the parent's width?

    How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    How to properly align icon and text in a table?

    How to do caption hover effect on a background?

    How Do I Make Li Clickable for Radio Button Inside

    How to manage css files the best way