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:


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>

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.

8 Years
Discussion Span
Last Post by nauticalmac


try using the

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

it shud be helpful


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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.