A few posts back I wrote about adding character counting to the .Net AJAX HTML Editor.  Recently, I received a question asking how to hide and show the character count element for the .Net AJAX HTML Editor when the editor goes in and out of focus.  The short and sweet answer is to wire up a function on the focus and blur events of the editor control and call the hide / show methods in jQuery on your count element.

$(GetEditor()).focus(function() {
  $(Editor1InfoArea).show();
}).blur(function() {
  $(Editor1InfoArea).hide();
});

Just add the above code in the $(document).ready function and away you go.  The GetEditor function and Editor1InfoArea variable are referenced in code in the original post.

However, jQuery has a lot to offer and I wanted to show some of these offerings.  I took advantage of method chaining to save myself having to call $(GetEditor()) twice as shown below.

$(GetEditor()).focus(function() { $(Editor1InfoArea).show();  });
$(GetEditor()).blur(function() { $(Editor1InfoArea).hide(); });

If your new to jQuery chaining may throw you a bit but it works great for saving keystrokes and once you get used to the syntax can be easy to follow. 

Beyond the show and hide methods you could call on many other methods to add some panache (Come on, give this one to me,  I am French after all).

You could replace show/hide with some of these combinations:

• slideDown, slideUp
• fadeIn, fadeOut
• slideToggle or toggle *
• animate (If you want to create your very own)

Nothing like making your app a little more appealing with some animation.  But wait! There’s more.

You can also change the style with the css method:

$(Editor1InfoArea).css("display", "block");
$(Editor1InfoArea).css("display", "none");

$(Editor1InfoArea).css("visibility", "");
$(Editor1InfoArea).css("visibility", "hidden");

Of course, you are using classes to make easier management of your styling right?  You can use the addClass/removeClass methods:

$(Editor1InfoArea).addClass("showCounter");
$(Editor1InfoArea).removeClass("showCounter");

* What about the toggle method? Ah, I’m glad you asked. In this case since we are tracking the focus and blur events you may end up with the toggle working the opposite as you expect.  This is because toggle does the opposite of what the targeted element’s visible value is when called.  You can fix this by calling the show or hide on your element after the focus/bind methods are setup.  Toggle is really designed for the click event but can be used in this situation.

So there you have it.  More ways than you probably care to know and I wouldn’t be surprised if there were more. 

A parting thought.  Earlier this week I read a great post on the performance of show/hide vs. toggle, css and addClass/removeClass.  Check it out if you want to read more on it but the basic answer is calling the css method is the best.  However, there is one more way that’s even faster but you’ll just have to read the article to find out what it is.

Happy Coding!