How do I make the textbox slippery to the left?

Here's the JS script

Or find below script:

<script>
        $('#box').focus(function()
{
    /*to make this flexible, I'm storing the current width in an attribute*/
    $(this).attr('data-default', $(this).width());
    $(this).animate({ width: 150 }, 'slow');
}).blur(function()
{
    /* lookup the original width */
    var w = $(this).attr('data-default');
    $(this).animate({ width: w }, 'slow');
});
</script>

      

And HTML

<input type="text" id="box"  style="width: 100px;" />

      

I only need to increase the width of the textbox to the left, not the right. How to do it.

+3


source to share


1 answer


The script only changes the width of the element, it doesn't grow to the right. But as the element is aligned to the left, it will expand to the right.

If you want to grow it to the left, you have to place it in the container and align it to the right.

See example:



<div style="width: 200px; text-align:right">
   <input type="text" id="box" style="width: 100px;" />
</div>

      

http://jsfiddle.net/9SSg3/420/

+3


source







All Articles