Script Checked provides a graceful way of handling scripted elements that haven’t loaded. It can detect when JavaScript is disabled and help with design issues caused by removal of content by browser plugins such as Adblock Plus.

The concept is fairly straightforward. It starts out with a basic CSS declaration which is subsequently revised by additional CSS statements written to the HTML document with JavaScript.

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

Download the CSS files and JavaScript from here and then add the following to your web page.

Above the closing </head> tag...

<link href="css/scriptchecked.css" type="text/css" rel="stylesheet" media="all" />
<script src="js/scriptchecked.js" type="text/javascript"></script>
<script src="js/advertisement.js" type="text/javascript"></script>

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

There are three scenarios to consider. We only show one div element in each scenario. The starting point is with JavaScript disabled. In this situation the initial CSS declaration from scriptchecked.css enables the display of #scriptdisabled, and disables the display of #scriptenabled and #scriptchecked

With JavaScript running the file scriptchecked.js is loaded and it uses document.write to add additional CSS statements. If more than one CSS statement is made for the same element the last to load is taken to have priority and this is used to disable the display of #scriptdisabled and enable the display of #scriptenabled. At this stage it is not necessary to make an additional statement for #scriptchecked so it remains disabled.

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.

Script Checked is not exclusively focused on advert filtering plugins either. It can be used just for handling the status of JavaScript which some users may have disabled in their browser settings.

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.

Version Information

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