Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save walia/d9f1867530e2409ed8ff9a3f193f66bf to your computer and use it in GitHub Desktop.
Save walia/d9f1867530e2409ed8ff9a3f193f66bf to your computer and use it in GitHub Desktop.
Two Part Expandable
<!doctype html>
<html lang="en">
<head>
<script src="mraid.js"></script>
<script type="text/javascript">
function setupAd() {
var image = document.getElementById('Apple News_Vox_Media_MREC_iPhone');
var expandedImage = document.getElementById('expanded');
image.addEventListener('click', function() {
var state = mraid.getState();
if (state === "default") {
mraid.expand("https://cdn1.vox-cdn.com/uploads/chorus_asset/file/8557311/Apple_News_Vox_Media_MREC_Expand_iPhone_B.0.html");
}
});
}
function addTracker(url) {
var image = document.createElement("img");
image.setAttribute('src', url);
image.setAttribute('height', '1');
image.setAttribute('width', '1');
image.setAttribute('style', 'position:absolute; top:0; left:0; visibility:hidden;');
var element = document.body;
element.insertBefore(image, element.firstChild);
}
if (mraid.getState() === 'loading') {
mraid.addEventListener('ready', setupAd);
} else {
setupAd();
var adLoaded = 'https://pubads.g.doubleclick.net/gampad/ad?iu=/172968584/Impression_Trackers/Briar*Nate_Integration_Tests/Apple-News/ImpTracker2&sz=1x1&c=%%CACHEBUSTER%%'
addTracker(adLoaded);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div>
<img id="Apple News_Vox_Media_MREC_iPhone"
width="300" height="250"
src="https://cdn1.vox-cdn.com/uploads/chorus_asset/file/8405997/colony-900-750_3x.0.png"
srcset="https://cdn1.vox-cdn.com/uploads/chorus_asset/file/8405997/colony-900-750_3x.0.png 3x,
https://cdn2.vox-cdn.com/uploads/chorus_asset/file/8406009/colony-900-750_2x.0.png 2x,
https://cdn2.vox-cdn.com/uploads/chorus_asset/file/8406007/colony-900-750.0.png 1x"/>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment