Increase textbox width onclick by jQuery

Hello Friends,

Today i want to share one small example of increase textbox width onclick by jquery. Actually to increase width of textbox we will animate textbox with jquery.

We will use following code to animate textbox.

        $(document).ready(function ()
        {
            $('#txtSearch').focus(function ()
            {
                /*to make flexible, store the current width in an attribute*/
                $(this).attr('width-default', $(this).width());
                $(this).animate({ width: 250 }, 'slow');
            }).blur(function ()
            {
                /* restore the original width */
                var w = $(this).attr('width-default');
                $(this).animate({ width: w }, 'slow');
            });
        });

Replace txtSearch with your textbox name and also change width in animate as appropriate your width. Enjoy!!!

How to open and close jquery UI dialog box

Hi Friends,

Today I am going to represent how to use jquery dialog box in html page.

In this article I will describe, How to open and close jQuery UI Dialog box on click of anchor tag.

Add below code in your html header section







I have added online jquery script reference. you can download it from those URL.

Now add below code in html body section


Sample demo of jquery modal popup

click here to open dialog box

Sample content of modal popup window comes her

This is sample jquery modal popup window...

Design this as per your requirement


That’s it.

Click here for online demo of jquerymodal