Monday, 29 October 2012

How to change width of textbox dynamically using JQuery

Introduction
               In the previous post, I had show how to get Comma seperated values in Sql Server. In this post I will show you how to set textbox width dynamically.

Description                 When I click on search textbox then it checks wheather it has some value if no, then it keeps textbox width at 40px and text color as gray. And if have some text in search box then it will keep width as 80px and text as gray.


if ((tbSearch.val() == null) || (tbSearch.val() == '') || (tbSearch.val() == 'Search')) {
    tbSearch.val('Search');
    tbSearch.css("color", "Gray");
    tbSearch.css("width", 40);
} else {
    tbSearch.css("color", "Gray");
    tbSearch.css("width", 80);
}



               when I click in search box or when textbox gets focus, It will expand with animation from width of 40px to 80px and get fore color as black.


tbSearch.focus(function () {
    if (tbSearch.val() == 'Search')
        $(this).val('');
    $(this).css("color", "black");
    $(this).animate({ width: 80 }, 500);
});

              When I focus out of search box and if it contains some search data then width remains at 80px and fore color as gray, else it animate and shrink to 40px.


tbSearch.focusout(function () {
    $(this).css("color", "Gray");
    if ($(this).val() == '') {
        $(this).val('Search');
        $(this).animate({ width: 40 }, 500);
    }
});

No comments:

Post a Comment

ML.NET: Machine Learning for .NET Developers

Machine Learning in .Net ML.NET is a free software machine learning library for the C# and F# programming languages. It also supports Pyth...