How to Detect AdBlock Plus And Display Website Elements Depending On It Being Enabled or Disabled

AdBlock Plus is a Firefox extension which disables almost all kind of ads for all the websites you visit. It can be set to still display ads for some websites, if the user desires.

I have recently found a way to hide all website content if AdBlock Plus is enabled to hide the ads and only display a message like "Please set AdBlock Plus to display ads for this website", and if the user sets AdBlock Plus to allow ads on that website, the content appears upon refreshing it. But I do not like this because the user uses AdBlock Plus for a reason: he most definitely does not want to see ads, so why make him? You can find a tutorial for this, here, although I do not recommend it!

I'm writing about it because this can be used to fix some layout issues with certain elements being hidden when AdBlock Plus hides the ads. For instance let's say you have a text link ad on your website. That link will be blocked by AdBlock Plus, but if you have some images or text to be displayed next to that link, Adblock Plus will only block the link and that text and/or images will show up and they won't make any sense without the link which can be quite annoying.

How it works

AdBlock Plus hides among others, all the elements that have a name that sounds like an advertisement. That means we can use CSS to hide certain elements on the website and then make them show up by re-writing the CSS through a file called advertisement.js. AdBlock Plus will block the file called "advertisement.js" because it thinks it's an ad, so the elements we've hidden will remain hidden until "advertisement.js" will be allowed to load (when AdBlock Plus is not installed or is set to allow ads to be displayed on that website).

Here is how to use this:

1. Put this above the </head> section of your website:

<style type='text/css'>
#ffix {visibility:hidden;display:none;}
</style>

<noscript>
<style type='text/css'>
#ffix {visibility:visible!important; display:inline!important;}
</style>
</noscript>

2. Create a new empty file called advertisement.js and paste this in it:

document.write('<style type="text/css">#ffix {visibility:visible!important; display:inline!important;}</style>'); 

and then upload that file to a web host.

3. Put the following script above the </head> section of your website (but under the code from step 1):

<script src='http://my_host.com/advertisement.js' type='text/javascript'/>

advertisement.js should be the file you created on step 2; replace http://my_host.com with the website where you uploaded the file.

4. Now to make some CSS elements only show up when AdBlock Plus is not installed or when it allows ads, simply search those CSS elements in your source code and append the id called "ffix" to them.


Example: let's say you want to hide a div which contains your menu from being displayed unless AdBlock Plus allows ads:

<div id="ffix">my menu html code</div>

Yes, it's that easy ;)