safeframe
Version:
SafeFrame provides a consistent JS API to include 3rd party content
260 lines (222 loc) • 11.3 kB
HTML
<html>
<head>
<title>SafeFrame Example Expander</title>
<style type="text/css">
body {
font-family: Arial;
background: #cedce7;
margin: 0px;
padding: 0px;
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%);
background: -o-linear-gradient(top, #cedce7 0%,#596a72 100%);
background: -ms-linear-gradient(top, #cedce7 0%,#596a72 100%);
background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );
}
#feedback{
width: 460px;
height: 300px;
float:right;
overflow: auto;
border: 1px solid red;
color: green;
background: #333;
}
.coverAd{
/* this places it over ad for viewable test */
position: absolute;
top: 230px;
right: 150px;
}
#buttonsAndKnobs{
float:left;
width: 250px;
}
#content{
font-family: Arial;
width: 650px;
padding: 10px;
margin: auto;
background: white;
}
#leaderboardAd{
height:90px;
margin-bottom: 10px;
}
.leaderboardWrapper{
height:90px;
width: 768px;
margin: auto;
}
#leftScraperWrapper {
position: absolute;
top: 250px;
width: 170px;
height: 600px;
}
.adBg {
background: #d2dfed;
background: -moz-linear-gradient(-45deg, #d2dfed 0%, #a6c0e3 24%, #c8d7eb 32%, #bed0ea 51%, #afc7e8 62%, #bad0ef 81%, #99b5db 88%, #799bc8 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d2dfed), color-stop(24%,#a6c0e3), color-stop(32%,#c8d7eb), color-stop(51%,#bed0ea), color-stop(62%,#afc7e8), color-stop(81%,#bad0ef), color-stop(88%,#99b5db), color-stop(100%,#799bc8));
background: -webkit-linear-gradient(-45deg, #d2dfed 0%,#a6c0e3 24%,#c8d7eb 32%,#bed0ea 51%,#afc7e8 62%,#bad0ef 81%,#99b5db 88%,#799bc8 100%);
background: -o-linear-gradient(-45deg, #d2dfed 0%,#a6c0e3 24%,#c8d7eb 32%,#bed0ea 51%,#afc7e8 62%,#bad0ef 81%,#99b5db 88%,#799bc8 100%);
background: -ms-linear-gradient(-45deg, #d2dfed 0%,#a6c0e3 24%,#c8d7eb 32%,#bed0ea 51%,#afc7e8 62%,#bad0ef 81%,#99b5db 88%,#799bc8 100%);
background: linear-gradient(135deg, #d2dfed 0%,#a6c0e3 24%,#c8d7eb 32%,#bed0ea 51%,#afc7e8 62%,#bad0ef 81%,#99b5db 88%,#799bc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );
}
</style>
</head>
<body>
<div class="leaderboardWrapper"><div id="leaderboardAd" class="adBg"></div></div>
<h1>SafeFrame Example Timed Expander</h1>
<div style="clear:both;">Vendor Ad Below</div>
<div id="buttonsAndKnobs">
</div>
<div id="leftScraperWrapper" class="adBg">
<div id="leftAdPlacement"></div>
</div>
<div id="rightSideAds" >
<div id="middleAd" class="adBg"></div>
</div>
<div id="content">
<p>
Bicycle rights swag PBR, in ea veniam keffiyeh fingerstache ethical. Tofu mumblecore leggings cupidatat, chillwave locavore fanny pack aute art party keytar authentic sed shoreditch dreamcatcher polaroid. Terry richardson cardigan brooklyn, laboris tattooed ennui banh mi delectus nisi thundercats. Elit godard occupy keytar, sapiente cosby sweater +1 vice put a bird on it adipisicing magna helvetica nesciunt. Bushwick eu PBR, tumblr cardigan gastropub cred. Pinterest ennui irure tempor ea ullamco. Retro reprehenderit commodo, dolore nisi cardigan eiusmod polaroid twee.
</p>
<p>
VHS 8-bit delectus swag typewriter, reprehenderit narwhal marfa. Dolor biodiesel jean shorts do wayfarers. Et trust fund letterpress, direct trade twee bespoke chillwave. Odio sint Austin consequat aliquip four loko. Odio raw denim twee dreamcatcher. Id eu elit cupidatat ullamco, culpa sapiente odio. Commodo tumblr fingerstache, keffiyeh duis farm-to-table et beard quis DIY four loko.
</p>
<p>
Swag cred et mcsweeney's selvage farm-to-table eiusmod, street art dreamcatcher fap pinterest. 8-bit post-ironic banh mi, gluten-free gentrify ethical dolore scenester in nulla adipisicing brooklyn. Sustainable in vero organic, retro mcsweeney's eiusmod truffaut ea single-origin coffee brooklyn aute consectetur. Reprehenderit narwhal squid, mustache locavore keytar DIY placeat qui. Small batch wes anderson before they sold out readymade, post-ironic tattooed consequat non veniam. Messenger bag tumblr readymade, mustache you probably haven't heard of them pork belly nisi est sapiente. Cupidatat twee fap sustainable echo park qui, voluptate wes anderson fanny pack assumenda bicycle rights laboris vegan occaecat forage.
</p>
<p>
Officia hella adipisicing marfa. Truffaut id vinyl, veniam VHS organic chillwave ex consectetur bicycle rights 8-bit. Aute squid single-origin coffee retro, VHS brunch etsy exercitation organic consequat keffiyeh odio. Ex raw denim banh mi, fanny pack small batch keffiyeh elit jean shorts. Blog odd future sapiente typewriter scenester, mustache mlkshk sustainable gentrify salvia street art nihil PBR. Semiotics whatever commodo id, beard portland qui sapiente cillum. Esse viral messenger bag aute, PBR cupidatat occaecat.
</p>
<p>
Occaecat before they sold out mcsweeney's deserunt, ex put a bird on it jean shorts minim fap sunt anim leggings tempor gastropub. Kogi occaecat godard dolor. Williamsburg minim pickled consectetur, fugiat viral tempor fanny pack twee yr odio single-origin coffee high life. Gentrify leggings hoodie tempor bushwick raw denim 3 wolf moon polaroid, beard elit irony vice cosby sweater. Consectetur pork belly art party, delectus keytar biodiesel aute helvetica id. Gastropub bicycle rights semiotics ullamco, godard art party aliquip dolor non proident dreamcatcher street art terry richardson. Dreamcatcher leggings bushwick dolor Austin consectetur, laboris fap brooklyn wes anderson fixie polaroid squid.
</p>
<p>
Banh mi viral delectus, cliche butcher organic fugiat esse +1 stumptown pinterest. Pop-up cillum leggings, ethical godard chillwave exercitation semiotics culpa laborum american apparel PBR. Deserunt banksy messenger bag echo park ut placeat, authentic polaroid pinterest four loko williamsburg. Incididunt before they sold out farm-to-table mcsweeney's pickled, vegan put a bird on it truffaut direct trade tumblr vice synth ethnic. Quis truffaut culpa delectus jean shorts est. Fixie mixtape irony, 8-bit lomo enim ad american apparel pinterest fanny pack freegan cupidatat trust fund williamsburg. Kale chips tumblr tattooed, ad nesciunt narwhal nulla biodiesel ethical qui excepteur.
</p>
<p>
Put a bird on it echo park banksy, craft beer food truck street art swag fingerstache. Irony mlkshk in etsy food truck fap. Wayfarers minim proident odd future beard carles pinterest. Master cleanse voluptate freegan bushwick synth thundercats. Occupy mixtape velit tofu delectus banh mi, dolore pinterest ut sriracha. Carles et bicycle rights eiusmod williamsburg banksy. American apparel 8-bit art party wolf sriracha irure.
</p>
<p>
Twee lo-fi aute, wayfarers sartorial VHS fap williamsburg vero. Odio brooklyn umami art party, occupy et freegan DIY sustainable single-origin coffee jean shorts vice. Seitan messenger bag fugiat exercitation, skateboard wes anderson small batch ad pitchfork lomo letterpress. Est adipisicing fixie, kale chips incididunt selvage shoreditch polaroid aesthetic brunch retro nihil. Skateboard cardigan deserunt duis, exercitation freegan aesthetic veniam high life fixie anim blog Austin vinyl artisan. Nihil duis master cleanse viral, fanny pack non dreamcatcher elit. Culpa selvage fap photo booth umami.
</p>
</div>
<script type="text/javascript" src="../src/js/lib/base.js"></script>
<script type="text/javascript" src="../src/js/host/host.js"></script>
<script type="text/javascript" src="../src/js/lib/boot.js"></script>
<!--
"src": "../../tests/sample_ads/mouseOverExpander.js",
"src": "http://www.slob.com/iab/tests/sample_ads/mouseOverExpander.js",
"src": "http://www.slob.com/iab/v1/tests/sample_ads/mouseOverExpander.js",
-->
<script type='text/x-safeframe' class='sf_data'>
{
"id": "leftSkyscraperAdFrame",
"src": "../../tests/sample_ads/mouseOverExpander.js",
"conf":
{
"w": 160,
"h": 600,
"dest": "leftAdPlacement"
},
"meta":
{
"expand":
{
"x": "350",
"y": "0"
}
}
}
</script>
<script type='text/x-safeframe' class='sf_data' id="sf_tag_1" >
{
"id" : "adLeaderboard",
"html" : "<div style=\"background:darkblue;color:yellow;font-family:Comic sans ms;padding:6px;\"><div style=\"font-size:1.5em;font-weight:bold;\" >Eat At Joe's</div>SafeFrame sample in view: <span id=\"v\"></span>%<scr" + "ipt>function sup(stat){var vx=document.getElementById(\"v\");vx.innerHTML=\"and...\";vx.innerHTML=$sf.extern.inView();};$sf.extern.register(160, 650, sup);document.getElementById(\"v\").innerHTML=$sf.extern.inView();</sc" + "ript></div>",
"conf" :
{
"size" : "728x90",
"dest": "leaderboardAd"
},
"meta" :
{
"rmx":
{
"sectionID" : "14800347",
"siteID" : "140509"
}
}
}
</script>
<div id="feedback" ></div>
<hr style="clear:both;" />
<script type="text/javascript">
var host = $sf.host;
function nukePositions(){
host.nuke();
}
function startRenderCallback(id){
var posConf = hot.get(id);
var fb = document.getElementById("feedback");
fb.innerHTML += "onStartPosRender called for " + id + " <br />"
}
function endRenderCallback(id){
var posConf = hot.get(id);
var fb = document.getElementById("feedback");
fb.innerHTML += "onEndPosRender called for " + id + " <br />"
}
function beforePosMessageCallback(id, msgName, data){
var posConf = host.get(id);
var fb = document.getElementById("feedback");
fb.innerHTML += "onBeforePosMsg called for " + id + " <br />"
}
function posMessageCallback(id, msgName, data){
var posConf = host.get(id);
var fb = document.getElementById("feedback");
fb.innerHTML += "onPosMsg called for " + id + " <br />"
}
function renderFailCallback(id){
var posConf = host.get(id);
var fb = document.getElementById("feedback");
fb.innerHTML += "onFailure called for " + id + " <br />"
}
/* render some sample content */
// renderFile: "http://10.72.227.43/iab/safeframes/src/html/r.html",
// renderFile: "../src/html/r.html",
(function() {
var conf = new $sf.host.Config({
renderFile: "../src/html/r.html",
positions:
{
"leftSkyscraperAdFrame":
{
id: "leftSkyscraperAdFrame",
dest: "leftAdPlacement",
w: 160,
h: 600,
"supports":
{
"read-cookie": "1",
"write-cookie": "1"
}
}
},
onStartPosRender: startRenderCallback,
onFailure: renderFailCallback,
onEndPosRender: endRenderCallback,
onBeforePosMsg: beforePosMessageCallback,
onPosMsg: posMessageCallback
});
// var posMeta = new $sf.host.PosMeta(null,"rmx",{foo:"bar",bar:"foo"});
// var pos = new $sf.host.Position("LREC", "<h1>Hello World Sean</h1>", posMeta);
// $sf.host.render(pos);
})();
</script>
</body>
</html>