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.
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.
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.
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);
});
tbSearch.focusout(function () {
$(this).css("color", "Gray");
if ($(this).val() == '')
{
$(this).val('Search');
$(this).animate({
width: 40 }, 500);
}
});