Member Avatar for 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.

  • 3 Contributors
  • 2 Replies
  • 2K Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by nauticalmac

Dani AI

Generated

the key is to hide the box only after the gallery finishes writing the caption. ’s suggestion will hide it but still leave a hole. is on the right track with display:none, but when galleries populate captions they often leave whitespace, &nbsp;, or even a <br>, so a plain innerHTML == "" check can miss those.

With Prototype loaded, you can make the check more robust and avoid layout gaps:

function refreshCaptionVisibility() {
  var el = $('imgDisplay_caption');
  // Remove tags, non‑breaking spaces, and trim whitespace
  var text = (el.innerHTML || '').stripTags().replace(/\u00a0/g, '').strip();
  if (text === '') {
    el.hide();
  } else {
    el.show();
  }
}

// Run once after DOM is ready, and call again whenever the image changes.
document.observe('dom:loaded', refreshCaptionVisibility);

If you control the spot where the gallery sets caption, prefer to decide visibility there to prevent any flicker: when changing images, do el.update(caption); and then show/hide based on (caption || '').strip().length > 0. That removes the caption box entirely when empty and brings it back when there is text.

One more modern option (for browsers that support it) is CSS-only: #imgDisplay_caption:empty { display:none; }. Just note :empty fails if the gallery inserts whitespace, &nbsp;, or a <br>, so the JS approach above is the safest.

Recommended Answers

All 2 Replies

Member Avatar for smvec

hi

try using the

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

it shud be helpful

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.