How to check if anything is visible in a div

Question

I have a script on my page which loads content from an ad network into a div. This ad network has an 80% fill rate i.e. it only serves an ad 80% of the time, the other 20% of the time it doesn't show an ad. Sadly, the ad network doesn't provide me with a callback to tell me when it hasn't served an ad. As a consequence, sometimes this div shows an ad, and other times it's blank.

This looks horrendous on my website, and makes me a sad panda. Is there a way to check if any content is visible inside a div? If I knew this, I would know when to show the div, and when to hide it.

This sounds like a hard problem to solve, but I wanted to see if there's any solution. On to you, gurus.

Answer 1

Does the IFrame has an image tag when the ad is served successfully?

Answer 2

I'd say the best solution is to look for a more reliable ad network. However, you can check for the existence of any DOM element by using the length property on a jQuery object. For example:

if (!$('#adframe img').length) {
  // the ad image doesn't exist, so do something to deal with it
}

That's just a generic example since I don't know the structure of your ad markup or what element is sometimes missing, but the point is to use the length property to see how many elements the selector matches. If it doesn't find the element, the value will be zero and you can use this to take some action.

Answer 3

Here you go Assuming that the Div visibility is not set by the ad. This is sudo-code.

1.) Assign a variable to the div using the id or name

var myDiv=document.getElementsByName("divName");

2.) Place the div inner text into a variable

var myAd = getInnerText(myDiv);

3.) Check the inner Text div if it is null

if(typeof(myAd) == '' || myAd == null)

4.) Change Visibility of DIV based on text being between DIV tags.

Answer 4

Having some actual markup would help, but if I'm reading you correctly, you most often have an empty div and then sometimes have an iframe or nested iframes or something similarly horrendous.

So I'd use two concurrent solutions: first, the simplest jQuery solution would be:

$("#ad-container div:empty").hide();

(Replace #ad-container div with whatever you use.)

Meanwhile, for the times when that won't work (nasty iframes and stuff), use CSS to provide a backup background image, maybe promoting yourself or just making the space look better. Just basic, like so:

#ad-container { background-image: url(...);background-repeat:none; }

When the ad is served, the image will be covered. When it's not, the backup'll be there for you.