Tuesday, 29 January 2013 13:56

Add and animate border of textbox when get focused using jquery

Written by 
Rate this item
(1 Vote)

It's a good practice to show orange border when you set focus to textbox.
also the border will stay for some seconds.this way user know
that they have to do task on that textbox.

this kind of animation you have seen in web like when clicked on asp.net
or html textbox border appears and dissapears instantly,etc.

using jquery with animation it's easy to do -

$(".MessageReply").click(function (e) {
e.preventDefault();

$("#<%= submitPostTextbox %>").focus();
$("#<%= submitPostTextbox %>").animate({ borderColor: 'orange' }, 500);
$("#<%= submitPostTextbox %>").animate({ borderColor: '#888' }, 10);
});

so when element with MessageReply class clicked -

this line -
$("#<%= submitPostTextbox %>").animate({ borderColor: 'orange' }, 500);
will show orange border.

Then this line -
$("#<%= submitPostTextbox %>").animate({ borderColor: '#888' }, 10);
will show default border color again.

hope it helps.don't forget to give a +1 in google search for this page.

Read 3003 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments