XF 1.2 Set iframe width using responsive presets

[dvsDave]

So, XF defines presets width's for responsive layouts that users CSS display:none; to hide elements when the browser page gets too narrow.

I would like to set an iframe's width based on the active preset being used.

If I can pull this off, I use javascript to grab the width of the iframe (using this code) , and use that width to pull the correct size ad from adzerk. (adzerk responsive code)

I have to feed that code through a convoluted iframe because we reload the iframe automatically every 9 seconds. (our ads are contract only, we don't use adsense or any other networks)

So, any ideas of how I can set the iFrame's width based on the active responsive preset being used?

 

[Paul B]

Can't you just set the width to 100% and the iframe will resize with the browser width?

 

[dvsDave]

Unfortunately no. the iFrame contains a banner ad and is floated to the far right of the header. (see http://www.controlbooth.com/xenforo), so it must be a defined size. So, after posting my first post last night, I had a rum and coke and went to bed. Bizarre programming dreams later, I realized that I might be able to wrap the iframe in a DIV and use CSS to define the size of the DIV according to the presets. That might work, but the question is whether the javascript inside the iframe will be able to pick up the pixel dimensions of the iframe if I define the iframe as 100% . The magic of the crazy convoluted refresh is that it might allow me to switch which size ad it displays when the iframe reloads after the 9 second counter.

 

[Paul B]

Have you tried assigning a class to the iframe and then using standard media queries to change the width?
For example:

<style type="text/css">
.iframe {
width: 800px;
}

<xen:if is="@enableResponsive">
    @media (max-width:910px) {
        .iframe {
        width: 600px;
        }
    }
</xen:if>
</style>

 

[dvsDave]

Have you tried assigning a class to the iframe and then using standard media queries to change the width?
For example:

<style type="text/css">
.iframe {
width: 800px;
}

<xen:if is="@enableResponsive">
@media (max-width:910px) {
.frame {
width: 600px;
}
}
</xen:if>
</style>

No I hadn't tried that, but that's far more elegant than what my rum-addled brain could dream up last night

 

[dvsDave]

So, I've been working hard at this and I'm happy to report that I have been wildly successful.

I've actually gone a step further and made my logo responsive as well. If you go to http://www.controlbooth.com/xenforo and start shrinking the size of the browser window, my logo will first collapse to my site's common abbreviation, then the banner ad will shrink from 728x90 to 300x50, and then if you shrink further, the appreviated logo gets even smaller to make it display properly on my smartphone (a Galaxy Nexus)

I ended up setting the iframe to 100% width and height and used media queries to change a DIV wrapping the iframe. The responsive adcode is from adzerk (there is a bug in their documentation, I've contacted them about it, and will update this thread with the link once they've updated the code.

The responsive logo was done via the picturefill.js technique.

 

[Ferdinand]

Have you tried assigning a class to the iframe and then using standard media queries to change the width?
For example:

<style type="text/css">
.iframe {
width: 800px;
}

<xen:if is="@enableResponsive">
    @media (max-width:910px) {
        .iframe {
        width: 600px;
        }
    }
</xen:if>
</style>

Is it possible to get this for extra.css?

 

[dvsDave]

What exactly are you trying to do? The iframe solution I use puts a php page in the iframe and forces itself to auto-refresh every 9 seconds. I only run privately contracted ads, I do NOT run anything like Double-Click, or Google Adsense, or any publisher network (an auto-refresh would be against the Terms of Service for these networks)

You CAN run this code for any block level element, like a DIV or a SPAN.

 

[dvsDave]

I ended up setting the iframe to 100% width and height and used media queries to change a DIV wrapping the iframe. The responsive adcode is from adzerk (there is a bug in their documentation, I've contacted them about it, and will update this thread with the link once they've updated the code.

XenForo won't allow me to edit that post anymore, but Adzerk did update their responsive code tutorial based on the bug report I sent them. The guide is here: http://help.adzerk.com/How_To_Serve_Ads_Based_On_Browser_Window_Size