CODEWITHSUNDEEP
javascripthtmlcssiframemedia-queries
astro shark
astro shark

Reputation: 53

Refreshing the content of an iframe on orientation change

OK, So I have set up this html template which allows us to display animated html ads on ipads. Essentially it uses media queries to determine the width of the device and then (using css) displays either the "portrait" or "landscape" div. The portrait and landscape divs both house iframes which contain the ads for their respective orientation.

The problem I am encountering it that for some reason, ads that have been made using Adobe Edge do not reanimate when the orientation of the device is changed. What I am hoping to accomplish is forcing either the entire html page or the content of the iframes to refresh when the orientation of the device is changed, thus reainimating the ad.

My code is as follows: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link href="http://www.calgaryheralddigital.com/creative/ads/general/reset.css" rel="stylesheet" type="text/css" media="screen">
<link href="http://www.calgaryheralddigital.com/creative/ads/general/clickTags.css" rel="stylesheet" type="text/css" media="screen">

<!-- orientation handler -->
<style type="text/css" media="all and (min-width: 1px) and (max-width: 800px)">
    #portrait{ display:block; }
    #landscape{ display:none; }
</style>
<style type="text/css" media="all and (min-width: 800px) and (max-width: 1500px)">
    #portrait{ display:none; }
    #landscape{ display:block; }
</style>
</head>

<body>
<div id="landscape">
    <div style="z-index:1; position:relative;">
        <iframe src="http://www.calgaryheralddigital.com/creative/ads/client/filename.html" width="1024px" height="90px" frameborder="0">
        <p>Your browser does not support iframes.</p>
        </iframe>
    </div>
    <div id="bannerLand">
        <a href="%cINSERT URL HERE">
            <img src="http://www.calgaryheralddigital.com/creative/ads/general/trans.gif" width="1024" height="90"/>
        </a>
    </div>
</div>
<div id="portrait">
    <div style="z-index:1; position:relative;">
        <iframe src="http://www.calgaryheralddigital.com/creative/ads/client/filename.html" width="768px" height="90px" frameborder="0">
        <p>Your browser does not support iframes.</p>
        </iframe>
    </div>
    <div id="bannerPort">
        <a href="%cINSERT URL HERE">
            <img src="http://www.calgaryheralddigital.com/creative/ads/general/trans.gif" width="768" height="90"/>
        </a>
    </div>
</div>
</body>

</html>

Thank you in advance for your help!

Upvotes: 1

Views: 5892

Answers (1)

astro shark
astro shark

Reputation: 53

I was actually able to solve this issue on my own using some code I pulled from another stack overflow question: What is the best method of re-rendering a web page on orientation change?

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    window.location.reload()
}, false);

Upvotes: 3

Related Questions