HTML and CSS Reference
In-Depth Information
Listing 11-14.
Synced Ad Example 300 Ad
<!DOCTYPE HTML>
<html lang=en>
<head>
</head>
<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);
}
</style>
<body align=center>
<div id="ad300">300x250</div>
</body>
<script type="text/javascript">
var checker300 = window.setInterval(check, 100);
function check () {
if (ad300 === "play") {
animate300();
} else {
console.log('300 is stopped');
}
}
function animate300 () {
clearInterval(checker300);
document.getElementById('ad300').style.color = 'white';
}
</script>
</html>
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
