How to make an ad wrapper which displays a message if a user has adblock running?

Question

I have a website with an ad on every page.

I'd like to display a message saying, "Please consider disabling your adblock, it helps us out tremendously." if the user has AdBlock enabled.

Here's my attempt:

<div id="ad-wrapper">
    <!-- Ad script here. It works fine. -->
</div>

And my CSS:

#ad-wrapper {
    background-color: #1D1D1D;
    border: 1px solid #232323;
    float: right;
    height: 90px;
    margin-right: 4px;
    width: 728px;
    overflow:hidden;
    background-image: url('/Public/images/disabled-ad.jpg');
}

When I turn off AdBlock the ad is displayed correctly without issues.

When I turn it on, AdBlock completely makes the #ad-wrapper invisible. I thought it would only remove the ad, leaving my background-image message there for my users to see.

How can I accomplish this behavior?

Answer 1

I assume Ad Block is blocking your wrapper because it contains the word "ad". Try using something like:

<div id="disabled-wrapper">
    <!-- Ad script here. It works fine. -->
</div>