Question

can only use Mootools here!

Okay so I have a basic input box:

<input id='input_box' value='Name' class="validate['required']" />

The class is for MooTools floor validation.

So what I have in mind is this:

1) The input box has the text of the value inside.
2) When the user clicks on the input box, the left side of the box slides inwards (left to right), so it now shows:

Name [inputbox]

3) If the user clicks out of the box area without typing anything, then it slides back to its original position with Name inside the box area.

I was thinking of doing it this way:

Have the text positioned behind the input box, onlick animate the size of the box, then fade in the text in the position. However, my Mootools knowledge is really bad, maybe something like this (as a starting point)?

        function introFunction() {
        var input = new Fx.Style($('input_box'),'width':'200');
            input.start(200);
    }

Then apply that to onlick, but it doesnt work :/

Answer 1

I gave it a try. http://jsfiddle.net/fJjTN/1/

I used tween instead of Fx. Instead of doing the effect on the input field, I did it on the label.

Edit after feedback in comments
http://jsfiddle.net/47CAH/1/