Home/ Questions/Q 8169613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T20:53:51+00:00

OK, So I have set up this html template which allows us to display

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
    • 0