Question

I have the following HTML:

<ul class="message" 
    style="border-width: 1px 0 0 0;
           border-top-left-radius: 0;
           border-top-right-radius: 0;">
</ul>

and this code that sets $message:

oLink.$message = oLink.$modal.find('.message');

I have the following javascript that adds a message:

obj.$message.html("<li>Contacting Server, please wait ...</li>");

This works but the problem is that when there is no message my ul is still styled with some properties that give it a height and make it show as an area at the bottom of my screen. Is there some way that I could make the message invisible and then have it show up. I am not very good at jQuery but could I chain in a show or hide into when I am creating a new message?

Answer 1

There are the jQuery show and hide methods. If the message doesn’t change anyway you could just insert it into the ul and then show/hide it like this:

$('.message').show();
$('.message').hide();

See for more info:
http://api.jquery.com/show/
http://api.jquery.com/hide/