How Do Hide Div If Ad Does Not Appear

I just implemented AdSense in my website. I've added a box-shadow to the div that contains my ad to add a level of depth. When there's no ad, or the ad is blocked using adblock or

Solution 1:

You can probably check the contents of that div (id: 'footer') after those scripts run with your own script in a third tag. In the script you can check to see if the div has more content added to if, and if not you can remove the shadow. You'll probably want to load the page with the ad and with it blocked and compare what shows up in the div to get an idea of what it looks like empty and what it looks like when shown.

Solution 2:

By default you can have it hidden, and load the ad using the jquery getScript method. Upon success you can make it visible.

$.getScript("http://pagead2.googlesyndication.com/pagead/show_ads.js", function(data, textStatus, jqxhr) {
    // make the ad visible
    $('#ad').show();
});

This will attempt to load the show_ad.js script, and upon success will invoke the callback function which would make the ad visible.

It all depends on how ad blockers work. If they simply prevent loading scripts at googlesyndication then this should work.

Solution 3:

This javascript removes the div:

var el = document.getElementById("footer");
if (el.innerHTML == "") {el.parentNode.removeChild(el)};

But if it messes your layout you can just set styles for CSS that are "bothering you" and/or don't look good empty. To hide it if empty:

addEvent(window, 'load', function(){
var el = document.getElementById("footer");
if (el.innerHTML == "") {el.style.display="none";}
});