Hiding a div if a variable is empty

[kanjigirl]

I'm using a Javascript gallery (runs on Prototype library) that populates a caption field if the user has entered a caption for an image.

I need a little bit of code to hide the caption's div entirely if the user hasn't entered a caption for a particular image (var 'caption' is empty).

It's the bottom-right white box below the image, you'll have to click over to the second page of the gallery (NEXT) to see an example of an empty one that I want to hide:

http://www.redkitecreative.com/projects/kontour/typefaces_gallery2.html

Here's the CSS:

#imgDisplay_caption {
	padding: 6px 6px 8px 6px;
	color: #000;
	background-color: #fff;
	font-size: 11px;
	line-height: 16px;
}

Here's the HTML:

<div class="b2-narrow-last">
	<div id="imgDisplay_caption"></div>
</div>

Please help. I'm sure this isn't that hard, but I've spent more time trying to get that caption box to hide than setting up the gallery.

[smvec]

hi

try using the

style="visibility:hidden" option in the DIV tag..

it shud be helpful

[nauticalmac]

I don't use prototype but in straight javascript you might define a function as follows:

function hideCaption()	{
	var el = document.getElementById("imgDisplay_caption");
	if(el.innerHTML == "")	{
		el.style.display = "none";
	}	else	{
		el.style.display = "block";
	}
}

Then run the function after you know prototype has done its thing.

I used display:none so no space is taken up on the page.
visibility:hidden will hide the div but it will take up blank space on the page.