HTML and CSS Reference
In-Depth Information
Listing 11-14. Synced Ad Example 300 Ad
<html lang=en>
<style type="text/css">
#ad300 {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 250px;
border: 1px solid #000;
font-family: Arial;
font-size: 50px;
background-color: red;
color: black;
opacity: 1;
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4);
<body align=center>
<div id="ad300">300x250</div>
<script type="text/javascript">
var checker300 = window.setInterval(check, 100);
function check () {
if (ad300 === "play") {
} else {
console.log('300 is stopped');
function animate300 () {
document.getElementById('ad300').style.color = 'white';
As you can see, you fire an interval to check the shared ad300 value to see whether you are to stop or play your
300 unit's animation. There are a few things to keep in mind with this type of execution. First, you'll need to know
how you are being served to the publisher's page. Are you in an iframe, a safe frame, an MRAID container, or a div
with CSS overflow set to hidden ? This all impacts how the communication via JavaScript will have to be handled.
For instance, if you're served to the publisher's page in a div with overflow : hidden , all you would need to do is
have both ads communicate on the same shared values within the script (like in the previous example). Again, setting
a 0 to a 1 can do this, and having a “checker” interval poll for when that value changes can be helpful. Also, you can
Search WWH ::

Custom Search