RespondAd is a simple solution to handling ad units in a responsive layout.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
respondad.js
respondad.min.js

README.md

RespondAd

RespondAd is a simple solution to handling ad units in a responsive layout. It is not intended to handle complex ad layouts, but if you've ever needed to swap in ad units at different breakpoints, RespondAd might just be for you.

The way it works is simple: first, tag some containers in your markup with "data-ad" attributes and set the value to a comma-delimited string of resolutions at which this container should hold an ad. Something like this:

<div data-ad="mobile,tablet"></div>
<div data-ad="desktop"></div>

These containers can be anywhere in your layout. A common use for this is having a top banner ad for mobile and tablet layouts and sidebar ads for desktop.

Now, include RespondAd in your page and initialize it by passing in an object with one key for each of the sizes you've used in your "data-ad" values. Each key should be an object with two keys: 1) an integer specifying the max screen size to show this ad unit for and 2) A string of content to inject in to the page at the indicated breakpoints. Note that you should specify keys in ascending order of screen width.

<script type="text/javascript">
    Respondad.init({
        mobile: {
            size: '480',
            content: '<img src="http://placehold.it/320x50&text=Mobile" />'
        },
        tablet: {
            size: '768',
            content: '<img src="http://placehold.it/480x50&text=Tablet" />'
        },
        desktop: {
            size: '9999',
            content: '<img src="http://placehold.it/120x600&text=Desktop" />'
        }
    });
</script>

IFrame Support

If you're working with an ad network that serves IFrame ads, just specify the IFrame option, either globally or in a breakpoint. An <iframe> element will be injected, with the 'src' attribute set to whatever you specified for 'content'. The <iframe> will be set to 100% width and height, and the border set to none.

Using IFrame Globally

Set the 'iframe' options of RespondAd before calling init().

Respondad.options({
    iframe: true
});

Granular use of IFrame

Respondad.init({
    mobile: {
        size: '480',
        content: 'http://ad.doubleclick.net/adi/...',
        iframe: true
    },
    tablet: {...},
    desktop: {...},
    otherSize: {...}
});

Browser Support

RespondAd will work great in all modern browsers, and IE8+. If you need support for IE7, you'll need to include a polyfill for document.querySelectorAll. There are a few, but here is one.