Created
July 31, 2014 01:12
-
-
Save coderek/1477a94a95f68bc9e141 to your computer and use it in GitHub Desktop.
mraid sample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="mraid.js"></script> | |
| <!--april 1--><head> | |
| <meta name="viewport" content="width=device-width, user-scalable=no"> | |
| </head> | |
| <script>if (!window.mraid) { document.write('<script src="http://cdn.engagefront.com/mraid-basic.js"><\/script>'); }</script> | |
| <script> | |
| !function(a){a.setTimeout(function(){var b=a.document,c="engagefront",d="/EngageMetrics/v1/",e="script",f=b.getElementsByTagName(e)[0],g=b.createElement(e),h=b.location,i=h.protocol;g.src="https:"===i?"https://"+c+"-a.akamaihd.net"+d:"http://cdn."+c+".com"+d,f.parentNode.insertBefore(g,f)},0)}(window); | |
| </script> | |
| <style> | |
| #collapsed img, | |
| #expanded img | |
| { | |
| width: 100%; | |
| height: auto; | |
| } | |
| #expanded | |
| { | |
| width: 100%; | |
| height: 100%; | |
| display: none; | |
| background: url(http://www.addictivemena.com/dubai-calender/img/backgroundFull.png) no-repeat center center fixed; | |
| -webkit-background-size: cover; background-color:#066 | |
| } | |
| .hotspot{position:absolute; left:0; top:0; width:100%; height:100%; z-index: 9999;} | |
| .hotspot div{position:absolute; border-radius:5px; background-color:rgba(0,0,0,0);} | |
| .p4{width:29%; height:11.7%; top:5.9%; left:3.25%;} | |
| .p3{width:32%; height:11.7%; top:5.9%; left:34%;} | |
| .p2{width:29%; height:11.7%; top:5.9%; left:68%;} | |
| .p1{width:0.5%; height:11.7%; top:5.9%; left:102%;} | |
| .p8{width:21.6%; height:13.7%; bottom:0; left:3.25%;} | |
| .p7{width:21.6%; height:13.7%; bottom:0; left:25.9%;} | |
| .p6{width:23.5%; height:13.7%; bottom:0; left:48.7%;} | |
| .p5{width:23.3%; height:13.7%; bottom:0; left:73.5%;} | |
| .p7nocal{width:0; height:0; bottom:0; left:0;} | |
| .p6nocal{width:21.6%; height:13.7%; bottom:0; left:38%;} | |
| .left{width:20%; height:30%; top:24%; left:0%; position: absolute; z-index: 9999;} | |
| .right{width:20%; height:30%; top:24%; right:0%; position: absolute; z-index: 9999;} | |
| .link-download-ar{width:93.5%; height:14.4%; top:84.4%; left:3.25%;} | |
| .header{position:relative; width: 100%;} | |
| #sports_car{ | |
| opacity:0; | |
| display: none; | |
| -webkit-transition:opacity 0.01s linear 0s; | |
| transition:opacity 0.01s linear 0s; | |
| } | |
| #car_info{ | |
| -webkit-transition:opacity 0.01s linear 0s; | |
| transition:opacity 0.01s linear 0s; | |
| } | |
| .information | |
| { | |
| position: absolute; | |
| max-width: 62%; | |
| min-width: 62%; | |
| top: 63%; | |
| left: 7%; | |
| z-index: 999; | |
| } | |
| .title { | |
| font-family: Arial, sans-serif; | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| padding-bottom: 10px; | |
| } | |
| .label { | |
| font-family: Arial, sans-serif; | |
| font-size: 12px; | |
| font-weight: 400; | |
| color: #ffffff; | |
| } | |
| .output { | |
| font-family: Arial, sans-serif; | |
| font-size: 12px; | |
| font-weight: 400; | |
| color: #ffffff; | |
| } | |
| img.adv | |
| { | |
| position: absolute; | |
| max-width: 100%; | |
| top: 21%; | |
| left: 0; | |
| z-index: 999; | |
| } | |
| img.adv:empty | |
| { | |
| top: 21%; | |
| left: 0; | |
| -webkit-transform: translate(0%, -21%); | |
| -moz-transform: translate(0%, -21%); | |
| -ms-transform: translate(0%, -21%); | |
| -o-transform: translate(0%, -21%); | |
| transform: translate(0%, -21%); | |
| } | |
| img.carbg | |
| { | |
| position: absolute; | |
| max-width: 100%; | |
| top: 27%; | |
| left: 0; | |
| z-index: 5; | |
| } | |
| img.carbg:empty | |
| { | |
| top: 27%; | |
| left: 0; | |
| -webkit-transform: translate(0, -27%); | |
| -moz-transform: translate(0%, -27%); | |
| -ms-transform: translate(0%, -27%); | |
| -o-transform: translate(0%, -27%); | |
| transform: translate(0%, -27%); | |
| z-index: 5; | |
| } | |
| img.topPortion | |
| { | |
| position: absolute; | |
| max-width: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 2; | |
| } | |
| img.socialFooter | |
| { | |
| position: absolute; | |
| max-width: 100%; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 2; | |
| } | |
| img.socialFooter:empty | |
| { | |
| bottom: 0; | |
| left: 0; | |
| z-index: 2; | |
| } | |
| img.middlePortion | |
| { | |
| position: absolute; | |
| top: 50% !important; | |
| left: 0; | |
| bottom: 30% !important; | |
| min-height: 30%; | |
| min-height: 40%; | |
| z-index: 1; | |
| } | |
| img.calLogo | |
| { | |
| position: absolute; | |
| top: 72%; | |
| right: 0; | |
| z-index: 999; | |
| width: 28%; | |
| max-width: 28%; | |
| } | |
| img.calLogo:empty | |
| { | |
| top: 72%; | |
| right: 0; | |
| width: 28%; | |
| -webkit-transform: translate(0, -72%); | |
| -moz-transform: translate(0%, -72%); | |
| -ms-transform: translate(0%, -72%); | |
| -o-transform: translate(0%, -72%); | |
| transform: translate(0%, -72%); | |
| } | |
| </style> | |
| <div id="collapsed"> | |
| <img src="http://www.addictivemena.com/dubai-calender/img/DC-banner.gif"><!--small banner stuff--> | |
| </div> | |
| <div id="expanded"></div> | |
| <script type="text/html" id="expanded-html"> | |
| <img src="" class="topPortion" id="topPortion" /> | |
| <img src="http://www.addictivemena.com/dubai-calender/img/middleTile.png" class="middlePortion" /> | |
| <div class="hotspot"> | |
| <div id="sports" class="p4"></div> | |
| <div id="business" class="p3"></div> | |
| <div id="lifestyle" class="p2"></div> | |
| <div id="concerts" class="p1"></div> | |
| <div id="download" class="p8"></div> | |
| <div id="calendar" class="p7"></div> | |
| <div id="facebook" class="p6"></div> | |
| <div id="twitter" class="p5"></div> | |
| <div id="next" class="right"></div> | |
| <div id="previous" class="left"></div> | |
| </div> | |
| <img src="http://www.addictivemena.com/dubai-calender/img/carousel-bg.png" class="carbg" id="carousel-bg"> | |
| <img src="" id="sports_car" class="adv"> | |
| <div class="information" id="car_info"> | |
| <span class="title" id="car_title"></span><br /> | |
| <span class="label">Date : </span><span class="output" id="car_date"></span><br /> | |
| <span class="label">Venue : </span><span class="output" id="car_venue"></span> | |
| </div> | |
| <img src="http://www.addictivemena.com/dubai-calender/img/calLogo.png" class="calLogo"> | |
| <img src="" class="socialFooter" id="socialFooter"> | |
| </script> | |
| <script> | |
| (function () { | |
| var collapsed = document.getElementById('collapsed'), | |
| expanded = document.getElementById('expanded'), | |
| expandedHtml = document.getElementById('expanded-html'); | |
| var firstExpand = false; | |
| collapsed.addEventListener('click', function () { | |
| mraid.expand(); | |
| }); | |
| mraid.addEventListener('stateChange', function (state) { | |
| switch (state) { | |
| case 'expanded': | |
| expanded.style.display = 'block'; | |
| collapsed.style.display = 'none'; | |
| if (!firstExpand) { | |
| firstExpand = true; | |
| expanded.innerHTML = expandedHtml.innerHTML; | |
| if (typeof window.onExpand === 'function') { | |
| onExpand(); | |
| } | |
| } | |
| break; | |
| case 'default': | |
| collapsed.style.display = 'block'; | |
| expanded.style.display = 'none'; | |
| break; | |
| } | |
| }); | |
| }()); | |
| //END | |
| </script> | |
| <script> | |
| window.onExpand = function () { | |
| EF.init({ | |
| trackingId: "T41QIcNJMe9cvtwRjTfuqGLJTLGOLloylzuvttAHJAId8Zyvbd5KnQ==" | |
| }); | |
| var a = new Image; | |
| a.src = "{clickurl}"; | |
| var c, b = { | |
| Android: function () { | |
| return navigator.userAgent.match(/Android/i) | |
| }, | |
| BlackBerry: function () { | |
| return navigator.userAgent.match(/BlackBerry/i) | |
| }, | |
| iOS: function () { | |
| return navigator.userAgent.match(/iPhone|iPad|iPod/i) | |
| }, | |
| Opera: function () { | |
| return navigator.userAgent.match(/Opera Mini/i) | |
| }, | |
| Windows: function () { | |
| return navigator.userAgent.match(/IEMobile/i) | |
| }, | |
| any: function () { | |
| return b.Android() || b.BlackBerry() || b.iOS() || b.Opera() || b.Windows() | |
| } | |
| }; | |
| b.Android() ? (console.log("ANDROID"), c = "https://play.google.com/store/apps/details?id=com.dsf010.v2.dubaievents&hl=en") : b.iOS() ? (console.log("iOS"), c = "https://itunes.apple.com/ae/app/dubai-calendar/id501018460?mt=8") : c = "https://itunes.apple.com/ae/app/dubai-calendar/id501018460?mt=8", mraid.supports && mraid.supports("calendar") ? document.getElementById("socialFooter").src = "http://www.addictivemena.com/dubai-calender/img/bottomSocial.png" : (document.getElementById("calendar"), document.getElementById("calendar").className = "", document.getElementById("calendar").className = "p7nocal", document.getElementById("facebook").className = "", document.getElementById("facebook").className = "p6nocal", document.getElementById("socialFooter").src = "http://www.addictivemena.com/dubai-calender/img/bottomSocial2.png"); | |
| var e, f, g, h = function (a, b) { | |
| var h, i, j, k, c = 0, | |
| d = a, | |
| f = b; | |
| sports_car_elem = document.getElementById("sports_car"), i = document.getElementById("car_title"), j = document.getElementById("car_date"), k = document.getElementById("car_venue"), h = document.getElementById("car_info"), g = function () { | |
| console.log("next"), c++, c > d.length - 1 && (c = 0), m() | |
| }, prevNow = function () { | |
| console.log("prev"), c--, console.log(c), 0 > c && (c = d.length - 1, console.log(c)), m() | |
| }; | |
| var m = function () { | |
| document.getElementById("car_title").innerHTML = f[c][0], document.getElementById("car_date").innerHTML = f[c][1], document.getElementById("car_venue").innerHTML = f[c][2], sports_car_elem.innerHTML = d[c], document.getElementById("sports_car").src = "http://www.addictivemena.com/dubai-calender/img/" + d[c] + ".png", sports_car_elem.style.opacity = 1, h.style.opacity = 1 | |
| }, n = function () { | |
| document.getElementById("car_title").innerHTML = f[c][0], document.getElementById("car_date").innerHTML = f[c][1], document.getElementById("car_venue").innerHTML = f[c][2], sports_car_elem.innerHTML = d[c], document.getElementById("sports_car").src = "http://www.addictivemena.com/dubai-calender/img/" + d[c] + ".png", sports_car_elem.style.opacity = 1, h.style.opacity = 1 | |
| }; | |
| console.log(d.length), d.length > 1 ? m() : d.length <= 1 && n() | |
| }; | |
| document.getElementById("sports_car").style.display = "none", document.getElementById("carousel-bg").style.display = "none", document.getElementById("car_info").style.display = "none", setTimeout(function () { | |
| document.getElementById("sports_car").style.display = "block", document.getElementById("carousel-bg").style.display = "block", document.getElementById("car_info").style.display = "block" | |
| }, 200), document.getElementById("topPortion").src = "http://www.addictivemena.com/dubai-calender/img/sportsTop2.png"; | |
| var j = ["sports-event-summit","football-fives","desert-run", "fina-mens"], | |
| k = [ | |
| ["ME Sports Event Summit","2 - 4 June","The Address Hotel, Dubai Marina"], | |
| ["Football Five’s World Championship","12 - 13 June","Dubai World Trade Centre"], | |
| ["Dubai Desert Road Run","13 June","The Sevens Stadium"], | |
| ["FINA Men’s Water Polo World League - Super Final","16 - 21 June","Hamdan Sports Complex"] | |
| ]; | |
| h(j, k); | |
| var l = document.getElementById("sports"), | |
| m = document.getElementById("business"), | |
| n = document.getElementById("lifestyle"), | |
| o = document.getElementById("concerts"), | |
| p = document.getElementById("download"), | |
| q = document.getElementById("calendar"), | |
| r = document.getElementById("facebook"), | |
| s = document.getElementById("twitter"), | |
| t = document.getElementById("previous"), | |
| u = document.getElementById("next"); | |
| l.style.cursor = "pointer", m.style.cursor = "pointer", n.style.cursor = "pointer", o.style.cursor = "pointer", p.style.cursor = "pointer", q.style.cursor = "pointer", r.style.cursor = "pointer", s.style.cursor = "pointer", t.style.cursor = "pointer", u.style.cursor = "pointer", u.onclick = function () { | |
| clearTimeout(e), clearTimeout(f), g() | |
| }, t.onclick = function () { | |
| clearTimeout(e), clearTimeout(f), prevNow() | |
| }, l.onclick = function () { | |
| EF.track("tab_view_en", "dubai sports"), clearTimeout(e), clearTimeout(f), document.getElementById("sports_car").style.display = "none", document.getElementById("carousel-bg").style.display = "none", document.getElementById("car_info").style.display = "none", setTimeout(function () { | |
| document.getElementById("sports_car").style.display = "block", document.getElementById("carousel-bg").style.display = "block", document.getElementById("car_info").style.display = "block" | |
| }, 500); | |
| var b = ["sports-event-summit","football-fives","desert-run", "fina-mens"], | |
| c = [ | |
| ["ME Sports Event Summit","2 - 4 June","The Address Hotel, Dubai Marina"], | |
| ["Football Five’s World Championship","12 - 13 June","Dubai World Trade Centre"], | |
| ["Dubai Desert Road Run","13 June","The Sevens Stadium"], | |
| ["FINA Men’s Water Polo World League - Super Final","16 - 21 June","Hamdan Sports Complex"] | |
| ]; | |
| h(b, c), document.getElementById("topPortion").src = "http://www.addictivemena.com/dubai-calender/img/sportsTop2.png" | |
| }, m.onclick = function () { | |
| EF.track("tab_view_en", "dubai theatre"), clearTimeout(e), clearTimeout(f), document.getElementById("sports_car").style.display = "none", document.getElementById("carousel-bg").style.display = "none", document.getElementById("car_info").style.display = "none", setTimeout(function () { | |
| document.getElementById("sports_car").style.display = "block", document.getElementById("carousel-bg").style.display = "block", document.getElementById("car_info").style.display = "block" | |
| }, 500); | |
| var b = ["the-play-that-goes","le-prenom","captain-flinn"], | |
| c = [ | |
| ["The Play that Goes Wrong","5 - 7 June","Madinat Theatre"], | |
| ["Le Prenom - French Play","13 - 14 June","DUCTAC - Mall of the Emirates"], | |
| ["Captain Flinn and the Dinosaur Pirates","13 - 14 June","Madinat Theatre"] | |
| ]; | |
| h(b, c), document.getElementById("topPortion").src = "http://www.addictivemena.com/dubai-calender/img/businessTop2.png" | |
| }, n.onclick = function () { | |
| EF.track("tab_view_en", "dubai lifestyle"), clearTimeout(e), clearTimeout(f), document.getElementById("sports_car").style.display = "none", document.getElementById("carousel-bg").style.display = "none", document.getElementById("car_info").style.display = "none", setTimeout(function () { | |
| document.getElementById("sports_car").style.display = "block", document.getElementById("carousel-bg").style.display = "block", document.getElementById("car_info").style.display = "block" | |
| }, 500); | |
| var b = ["your-planet"], | |
| c = [ | |
| ["Your Planet Needs You","10 April to 10 August","Children's City"] | |
| ]; | |
| h(b, c), document.getElementById("topPortion").src = "http://www.addictivemena.com/dubai-calender/img/lifestyleTop2.png" | |
| }, o.onclick = function () { | |
| EF.track("tab_view_en", "dubai concerts"), document.getElementById("topPortion").src = "http://www.addictivemena.com/dubai-calender/img/concertsTop2.png", clearTimeout(e), clearTimeout(f), document.getElementById("sports_car").style.display = "none", document.getElementById("carousel-bg").style.display = "none", document.getElementById("car_info").style.display = "none", setTimeout(function () { | |
| document.getElementById("sports_car").style.display = "block", document.getElementById("carousel-bg").style.display = "block", document.getElementById("car_info").style.display = "block" | |
| }, 500); | |
| var b = [], | |
| c = [ | |
| [], | |
| ]; | |
| h(b, c) | |
| }, s.onclick = function () { | |
| EF.link("social_media_twitter", "https://twitter.com/Dubai_Calendar"), window.location.href = "https://twitter.com/Dubai_Calendar", mraid.open("https://twitter.com/Dubai_Calendar") | |
| }, r.onclick = function () { | |
| EF.link("social_media_facebook", "https://www.facebook.com/dubaicalendar?hc_location=timeline"), window.location.href = "https://www.facebook.com/dubaicalendar?hc_location=timeline", mraid.open("https://www.facebook.com/dubaicalendar?hc_location=timeline") | |
| }, p.onclick = function () { | |
| EF.link("app_download", "Dubai Calendar", c), window.location.href = c | |
| }, q.onclick = function () { | |
| var a, b; | |
| if(document.getElementById("car_title").innerHTML === "ME Sports Event Summit") { | |
| a = '2014-06-02T00:00-05:00'; | |
| b = '2014-06-04T00:00-05:00'; | |
| } else if(document.getElementById("car_title").innerHTML === "Football Five’s World Championship") { | |
| a = '2014-06-12T00:00-05:00'; | |
| b = '2014-06-13T00:00-05:00'; | |
| }else if(document.getElementById("car_title").innerHTML === "Dubai Desert Road Run") { | |
| a = '2014-06-13T00:00-05:00'; | |
| b = '2014-06-13T00:00-05:00'; | |
| }else if(document.getElementById("car_title").innerHTML === "FINA Men’s Water Polo World League - Super Final") { | |
| a = '2014-06-16T00:00-05:00'; | |
| b = '2014-06-21T00:00-05:00'; | |
| } | |
| else if(document.getElementById("car_title").innerHTML === "The Play that Goes Wrong") { | |
| a = '2014-06-05T00:00-05:00'; | |
| b = '2014-06-07T00:00-05:00'; | |
| } else if(document.getElementById("car_title").innerHTML === "Le Prenom - French Play") { | |
| a = '2014-06-13T00:00-05:00'; | |
| b = '2014-06-14T00:00-05:00'; | |
| } else if(document.getElementById("car_title").innerHTML === "Captain Flinn and the Dinosaur Pirates") { | |
| a = '2014-06-13T00:00-05:00'; | |
| b = '2014-06-14T00:00-05:00'; | |
| } | |
| else if(document.getElementById("car_title").innerHTML === "Your Planet Needs You") { | |
| a = '2014-04-10T00:00-05:00'; | |
| b = '2014-08-20T00:00-05:00'; | |
| } | |
| var c = document.getElementById("car_title").innerHTML; | |
| EF.track("calendar_add_event", c, function () { | |
| mraid.createCalendarEvent({ | |
| description: document.getElementById("car_title").innerHTML, | |
| location: document.getElementById("car_venue").innerHTML, | |
| start: a, | |
| end: b | |
| }) | |
| }) | |
| } | |
| }; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment