How can I make my message <ul> element appear with jQuery when I post a message?

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

using css only (and modern browser) you can style an empty ul with :empty pseudoclass

ul:empty {
   display: none;
}

example fiddle : http://jsbin.com/ipeciw/1/edit

or just remove/hide programmatically the empty ul via jQuery with

$('ul:empty').remove(); // or hide() if you need it later

Answer 2

It's all css related. The height at you say is probably a default margin or padding.

You could hide it initially

ul.message { display:none; }

and then when you write the html, display it like so.

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

Answer 3

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/