ScriptChecked.com ✘ ✘ ✔
The main purpose is to prevent the collapse of web page design when advert filtering is being used but it doesn’t provide a counter-measure to the advert blocking itself, which is still respected. You can see it being used at the top of this page and on our demo page at https://scriptchecked.com/example
How to use Script Checked
Above the closing </head> tag...
<link href="css/scriptchecked.css" type="text/css" rel="stylesheet" media="all" />
In your web page after the <body> tag...
<div id="scriptdisabled"><p><img src="images/scriptdisabled.png" alt=" " /></p></div>
<div id="scriptenabled"><p><img src="images/scriptenabled.png" alt=" " /></p></div>
<div id="scriptchecked"><p><img src="images/scriptchecked.png" alt=" " /></p></div>
Placing the advert code...
Replace <p><img src="images/scriptchecked.png" alt=" " /></p> with your advert code.
Note about using images
The benefit of using images for your #scriptdisabled and #scriptenabled messages is for SEO purposes. Using an image means that message text will not be indexed as part of your web site content. However you need to ensure any image you use isn’t in standard advert dimensions or it could be filtered by the browser plugin. You could consider providing your image sliced into several images to overcome this issue.
How Script Checked works
If a browser plugin is used the last file to be loaded is blocked and does not make any further changes to the CSS statements. To achieve this effect the file name of advertisement.js is used so that it looks like it relates to advertising. However if it isn't blocked it uses document.write to add additional CSS statements, so that it disables the display of #scriptenabled and enables the display of #scriptchecked. It isn’t necessary to make an additional statement for #scriptdisabled so it remains disabled.
CSS display vs CSS visibility
CSS display is used on block elements such as div tags. If you want to use it for inline elements such as text you may wish to consider modifying the code to use CSS visibility to suit your requirements. We use CSS display because we want to ensure that the hidden elements do not occupy any space in the layout and are replaced by the visible div. See www.w3schools.com/css/css_display_visibility.asp for additional guidance.
CSS id vs CSS class
It you want to use the code in more than one place in your web page you will need to add additional statements to each of the three files to match the names of your new id elements. A simple method would be to add numbers such as #scriptdisabled2 and #scriptdisabled3 (etc) so that you keep each div unique and can follow your workings easily. This is necessary to ensure your code will validate against W3C standards.
HTML vs XHTML
If you are using an HTML doctype instead of XHTML please change the closing /> tags to > to validate against W3C standards.
Restricting Site Access
Our example shows you how you can use our code to provide a graceful way of managing your page design when adverts are removed by browser plugins. It is possible for you to use the same technique to prevent access to your web site. However we would like to discourage you from using it that way.
If you are serious about supporting your web site with advertising it is better to accept that some visitors prefer to exclude ads using browser plugins such as Adblock Plus. These people are probably less likely to subsequently support your web site if you just deter them with brute force.
If you provide a polite notice asking them to whitelist your domain and why that would be important to you it is easier to win their support.
Is this an Anti Adblock Script?
No, Script Checked respects the way that Adblock Plus and other web filtering plugins work. It is not intended to be a counter-measure and only uses passive CSS declarations to respond to the way the page is modified. It’s main purpose is to provide the web designer with a graceful alternative to the content they have removed instead of blank space or a collapsed page layout. Adblock Plus provides whitelisting capabilities because they understand that some users are happy to accept advertising on some sites, and presenting your message to the user whilst respecting their preference for advert filtering can help you to convince them to whitelist your site.
Follow us on Twitter for updates
If you would like to be informed of any updates we make to this code, perhaps due to a change in the way that Adblock Plus is working, please follow us on Twitter.
You can also send messages to our Twitter account with any coding tips or example web sites you want to share with other users.
The current version of Script Checked is v1.4
Tested with Adblock Plus v2.3.2 to v2.6.9
Download the CSS and JS from here