safeframe/examples/IAB_RisingStars/AdFiles/portraitAdBootstrap.js

SafeFrame provides a consistent JS API to include 3rd party content

// Ad contents or bootstrap
  var html = "<!--\nTHIS IS EMBEDDED AS scripted content .\nSource here is provided as a mechanism to make the ad more readable.\nActual source is translated into Javascript string and placed in \"portraitAdBootstrap.js\" file.\n-->\n<style>\n#adBase{\n top : 0px;\n left : 0px;\n width: 300px;\n height: 1050px;\n}\n\n#adLogo{\n  float : right;\n max-width: 270px;\n  width: 270px;\n  height : 40px;\n  margin-right : 15px;\n  margin-left : 15px;\n  margin-top : 15px;\n  margin-bottom : 10px;\n}\n\n#adLogo > div{\n  display: inline-block;\n  padding: 6px; margin: 2px;\n  border: 1px solid #333;\n}\n\n#adModule1Collapsed{\n clear : both;\n  float : right;\n position : relative;\n  width : 270px;\n  height : 460px;\n cursor : pointer;\n  margin-right : 15px;\n  margin-left : 15px;\n  margin-bottom : 15px;\n  margin-top : 0px;\n  background-image: url(https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/ad460.png);\n}\n\n#adModule1Expansion{\n display : none;\n  position : absolute;\n  left : -343px;\n width : 613px;\n  height : 460px;\n cursor : pointer;\n}\n\n#adModule2Collapsed{\n clear : both;\n  float : right;\n position : relative;\n  width : 270px;\n  height : 202px;\n cursor: pointer;\n  margin-right : 15px;\n  margin-left : 15px;\n  margin-bottom : 5px;\n  margin-top : 0px;\n}\n\n#adModule2Expansion{\n display : none;\n  position : absolute;\n left : -135px;\n  width : 405px;\n  height : 303px;\n cursor : pointer;\n}\n\n#adModule3Collapsed{\n clear : both;\n  float : right;\n position : relative;\n  width : 270px;\n  height : 202px;\n cursor : pointer;\n  margin-right : 15px;\n  margin-left : 15px;\n  margin-bottom : 50px;\n  margin-top : 10px;\n}\n\n#adModule3Expansion{\n display : none;\n  position : absolute;\n top : -101px;\n left : -135px;\n  width : 405px;\n  height : 303px;\n cursor : pointer;\n}\n\n.adContent{\n  position : relative;\n  background-color : orange;\n  margin : 15px;\n}\n\n.adContent > div, .adContent > h1, .adContent > p {\n padding: 5px;\n}\n\n</style>\n\n\n<div id=\"adBase\" style=\"width: 300px;\">\n <!-- Pushdown Teaser -->\n <div id=\"adLogo\" class=\"adContent\"><div>LOGO HERE</div>\n </div>\n \n <div id=\"adModule1Collapsed\" class=\"adContent\" onclick=\"expandModule(1)\" style=\"display: block; z-index: 1;\">\n  <div id=\"adModule1Expansion\" onclick=\"collapseModule(1)\" style=\"display: none; z-index: 3000; padding: 0px;\"> <!-- 343 because of the 15px margins on both sides -->\n  <img src=\"https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/adModule1Expansion.png\">\n  </div>\n </div>\n <div id=\"adModule2Collapsed\" class=\"adContent\" onclick=\"expandModule(2)\" style=\"display: block; z-index: 1;\">\n  <div id=\"adModule2Expansion\" onclick=\"collapseModule(2)\" style=\"display: none;\"> \n  <img src=\"https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/adModule2Expansion.png\">\n  </div>\n </div>\n <div id=\"adModule3Collapsed\" class=\"adContent\" onclick=\"expandModule(3)\" style=\"display: block; z-index: 1;\">\n  <div id=\"adModule3Expansion\" onclick=\"collapseModule(3)\" style=\"display: none;\">\n  <img src=\"https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/adModule2Expansion.png\">\n  </div>\n </div>\n</div>\n\n<scr"+"ipt src=\"https://s3-us-west-2.amazonaws.com/safeframe/examples/IAB_RisingStars/AdFiles/adPortraitBehavior.js\"></scr"+"ipt>\n"
  
document.write(html);