Jump to content
Search Community

MushuShrimp

Members

  • Posts

    3

  • Joined

  • Last visited

MushuShrimp's Achievements

0

Reputation

  1. MushuShrimp
    That last bit is interesting. Maybe I did not need to do the mraid code... We did have countless conversations where I specifically asked what exactly was needed from me, but a lot of information can be lost in translation when it goes through multiple people who are not that technically sound. I will check up on that one last time, got a week to debug anyways. Thanks for the help.
  2. MushuShrimp
    I believe cluep will be serving the ad based on what the pm has told me, with tracking from eyereturn. On the spec sheet it just says that the ad needs to be mraid compliant. Is there a way to just test the code to see if it is compliant without generating an ad tag? I am fairly new to coding mraid banners so I am not sure if I am doing it right by just pasting the html into the mraid webtester. The animation still happens, but cant see any of the assets because they cannot be found. Should have stated this in my initial post, but what I sort of want to know is: 1) Does the code look syntactically correct if it was a for a generic mraid compliant banner? 2) Is there a way to test the creative reliably without generating an ad tag, using mopub or creating my own mraid.js? The attached is all I was given for the specs.
  3. MushuShrimp
    Hey guys, I am wondering if I can get some help understanding how to use the MRAID library with GSAP on an a banner. The adserver is saying that the file does not work and I am sort of at wit's end now. <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name='viewport' content='width=device-width,maximum-scale=1' user-scalable="no"> <title></title> <script src="mraid.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> </head> <style type="text/css"> img { border: 0; } body { margin: 0; padding: 0; } a { cursor: pointer; border: 0; } .default{ position: absolute; left:0; top:0; } #mainContainer { display: block; cursor: pointer; position: absolute; width: 320px; height: 50px; border: 1px solid black; box-sizing: border-box; background-color: #ffffff; /*background-image: url('pic2.png');*/ overflow: hidden; } #expandedContainer{ display: none; cursor: pointer; position: absolute; width: 320px; height: 480px; border: 1px solid black; box-sizing: border-box; background-color: #ffffff; /*background-image: url('pic2.png');*/ overflow: hidden; } #pinContainer { width: 17px; height: 105px; left: 163px; top: 116px; overflow: hidden; } </style> <body> <div id="mainContainer"> <img class="default" src="bg.jpg" id="bg"> <img class="default" src="t1.png" id="t1" onclick="javascript:openWebPage('http://www.google.com/')"> <img class="default" src="expandbtn.png" id="expandBtn" onclick="javascript:expandMe()"> <img class="default" src="arrow.png" id="arrow" onClick="javascript:expandMe()"> <img class="default" src="logo.svg" id="logo"> </div> <div id="expandedContainer" onclick="javascript:openWebPage('http://www.google.com/')"> <img class="default" src="bgexp.jpg" id="bge"> <img class="default" src="ctaexp.png" id="ctae"> <img class="default" src="t1exp.png" id="t1e"> <img class="default" src="t2exp.png" id="t2e"> <img class="default" src="t3exp.png" id="t3e"> <img class="default" src="t4exp.png" id="t4e"> <img class="default" src="t5exp.png" id="t5e"> <img class="default" src="t6exp.png" id="t6e"> <img class="default" src="logoe.svg" id="logoe"> <div class="default pinContainer" id="pinContainer"> <img class="default" src="pinexp.png" id="pine"> </div> </div> <script type="text/javascript"> //Clickthrough function openWebPage(url) { mraid.open(url); } //Collapse Ad function collapseMe() { mraid.close(); } function adIsReady() { mraid.removeEventListener("ready", adIsReady); gsReadyCheck(); } function showMyAd() { var tl = new TimelineMax(); tl.to(logo, 0, {width:33, height:33, left:13, top:8}); tl.to(expandBtn, 0, {x:275, y: 9}); tl.to(arrow, 0, {x:283, y: 22}); tl.from(t1, 0.75, {ease: Power1.easeIn, alpha:0}); tl.from(expandBtn, 0.5, {ease: Back.easeOut, scaleX: 0, scaleY: 0}, "+=0.5"); tl.from(arrow, 0.5, {ease: Back.easeOut, scaleX: 0, scaleY: 0}, "-=0.5"); tl.to(arrow, 0.5, {ease: Sine.easeOut,alpha:0}, "+=0.5"); tl.to(arrow, 0.75, {ease: Sine.easeOut,alpha:1},"+=0.2"); tl.to(arrow, 0.5, {ease: Sine.easeOut,alpha:0},"+=0.5"); tl.to(arrow, 0.75, {ease: Sine.easeOut,alpha:1},"+=0.2"); tl.to(arrow, 0.5, {ease: Sine.easeOut,alpha:0},"+=0.5"); tl.to(arrow, 0.75, {ease: Sine.easeOut,alpha:1},"+=0.2"); tl.to(arrow, 0.5, {ease: Sine.easeOut,alpha:0},"+=0.5"); tl.to(arrow, 0.75, {ease: Sine.easeOut,alpha:1},"+=0.2"); mraid.addEventListener("stateChange", updateAd); } function expandMe() { mraid.setOrientationProperties({"allowOrientationChange":false, "forceOrientation":"portrait"}); mraid.expand(); } function updateAd(state) { if (state == "expanded") { expandedContainer.style.display = "block"; var tle = new TimelineMax(); //320x480 Animation tle.to(logoe, 0, {width: 238, height:41, top:428, left:41}); tle.from(t1e, 0.5, {ease: Quad.easeOut, alpha: 0, x: 100}); tle.from(pinContainer, 0.5, {ease:Quad.easeInOut, height: 0}); tle.from(t2e, 0.75, {ease:Power1.easeOut, alpha: 0}); tle.from(t3e, 0.75, {ease:Quad.easeOut, alpha: 0, x: -100}); tle.from(t4e, 0.75, {ease:Quad.easeOut, alpha: 0, x: -100}, "-=0.25"); tle.from(t5e, 0.75, {ease:Quad.easeOut, alpha: 0, x: -100}, "-=0.25"); tle.from(t6e, 0.75, {ease:Quad.easeOut, alpha: 0, x: -100}, "-=0.25"); tle.from(ctae, 0.5, {ease:Back.easeOut, transformOrigin: "166px 405.5px", scaleX:0, scaleY:0}); toggleMe('normal', 'expanded'); } else if (state == "default") { expandedContainer.style.display = "none"; toggleMe('expanded', 'normal'); } } function toggleMe(fromLayer, toLayer) { var fromElem = document.getElementById(fromLayer); fromElem.style.display = 'none'; var toElem = document.getElementById(toLayer); toElem.style.display = ''; } function readyCheck() { if (mraid.getState() == 'loading') { mraid.addEventListener("ready", adIsReady); } else { gsReadyCheck(); } } function gsReadyCheck() { if (mraid.isViewable() && window.TimelineMax) { showMyAd(); } else { setTimeout(gsReadyCheck, 100); } } readyCheck(); </script> </body> </html>
×
×
  • Create New...