How can I make Response.js in markup mode load OpenX ads (or any javascript)?

Question

EDIT: Here's a jsfiddle for the whole thing. If the OpenX resource is deleted, the text will load, but as long as it is there, it will not load.

We have our own hosted OpenX adserver, and are working on a Responsive site. I am trying to use Response.js to load a 728x90 banner on full-screen websites, and a 300x50 banner on mobile websites. We are using the OpenX single page call method.

I am using the markup mode for Response.js to try and load the correctly sized ad, which works when I have the noscript image version (just a standard img tag) in there, but does not work when loading the javascript version of the ad.

Here's the setup for the breakpoints in Response.js

<script type="text/javascript">
Response.create({
prop: "width" // property to base tests on
, prefix: "ad" // custom aliased prefixes
, breakpoints: [0,320,961] // custom breakpoints
});
</script>

Here is the code I am using for the banners:

<div  
data-ad320="<script type='text/javascript'><!--// <![CDATA[
    OA_show(75);
// ]]> --></script>" 
data-ad961="<script type='text/javascript'><!--// <![CDATA[
    OA_show(22); 
// ]]> --></script>"
>
noscript ad goes here
</div>

With the script in there (as shown above), the site loads only the ad, and just sits there trying to load the rest of the page, as seen here. If the script is not there (like shown below), it loads everything perfectly.

data-ad320="<img src='small ad url here'>"
data-ad961="<img src='big ad url here'>"

Any help or at least some direction would be appreciated.

Answer 1

I've been looking at this also, as I do want to implement responsive ads using OpenX adserver. The reason it's not working for you at the moment is that the JavaScript from OpenX contains document.write() which when loaded after the DOM of your page has loaded will overwrite everything so all you are left with the first ad and nothing else.

The work around that I have come up with is actually load the script in an iframe

<div 
data-min-width-320='<iframe src="test.html" width=100% height=100% frameBorder="0">   </iframe>' 
data-min-width-961='<iframe src="test2.html" width=100% height=100% frameBorder="0">  </iframe>'
> 
text-only @ <320px and no-js
</div>

The test.html and test2.html contains the different javascript for each ad unit.

I'm not 100% sure if this is the best solution, and I have only just come up with it now, as no one else has answered this, I thought I would post straight away, if anyone else has any other suggestions please post them.