Question

I have this markup:-

<textarea id="TextBox1"></textarea>
<span id="validator"></span>

And the following jQuery:-

jQuery('#TextBox1').live('input', function() {
    var charLength = $(this).val().length;
    $('#validator').html(charLength + ' of 250 characters used');
    if ($(this).val().length > 250) {
        $('#validator').html('<strong>You may only have up to 250 characters !</strong>');
    } 
});

This works fine.

I wish to modify the above jQuery so that the #validator fades in when it appears and also fades out if the length drops to 0 (doesn’t do this currently, message stays on the screen).

EDIT: Forgot to add, I have the following function also:-

jQuery.fn.fadeInOrOut = function(status) {
    return status ? this.fadeIn() : this.fadeOut();
}; 

I have tried the following but it doesent seem to have any effect:-

$('#validator').html(charLength + ' of 250 characters used').fadeInOrOut(!! charLength);

and…

$('#validator').html(charLength + ' of 250 characters used');
$('#validator').fadeInOrOut(!! charLength);

Answer 1

see this: http://jsfiddle.net/CsXU8/3/

You need to hide the validator onload (with css). else it cannot fade in.

So adding this line in your css:

#validator {display:none}

should do the trick.