White preview on double click banner

355 views
Skip to first unread message

hari.t...@gmail.com

unread,
Jul 3, 2015, 11:02:52 AM7/3/15
to gwd...@googlegroups.com
Hi I am having issues once I click preview, I only see a blank white screen. If I do an inspect, I can see all of the code there but not visible.

Can you please help me as to what the issue could be? I can send you the zip file if you want. The code is below:

Thanks
Hari




<!DOCTYPE html>
<html>

<head data-gwd-animation-mode="quickMode">
<link href="gwdyoutube_style.css" data-version="3" data-exports-type="gwd-youtube" rel="stylesheet">
<link href="gwdimage_style.css" data-version="1.4" data-exports-type="gwd-image" rel="stylesheet">
<link href="gwddoubleclick_style.css" data-version="1.9" data-exports-type="gwd-doubleclick" rel="stylesheet">
<link href="gwdtaparea_style.css" data-version="1.3" data-exports-type="gwd-taparea" rel="stylesheet">
<link href="gwdpagedeck_style.css" data-version="1.5" data-exports-type="gwd-pagedeck" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Oswald:700|PT+Sans" rel="stylesheet" type="text/css">
<script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script>
<meta name="generator" content="Google Web Designer 1.3.2.0521">
<meta name="template" content="Expandable 2.2.0">
<meta name="environment" content="gwd-doubleclick">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
position: absolute;
background-color: transparent;
}
.gwd-page-wrapper {
position: absolute;
-webkit-transform: translateZ(0px);
background-color: rgb(255, 255, 255);
}
.banner {
width: 300px;
height: 250px;
background: url(assets/bkg-300x250.png);
}
.expanded {
width: 600px;
height: 250px;
background: url(assets/bkg-300x250.png);
}
#expand-button, #expand-button_1 {
position: absolute;
border-radius: 6px;
text-align: center;
padding: 5px 0px 0px 10px;
-webkit-transform-style: preserve-3d;
left: 131px;
top: 200px;
width: 132px;
height: 31px;
-webkit-transform-origin: 71.3413461538px 19.22px 0px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
background-color: rgb(31, 159, 206);
}
#close-button {
position: absolute;
-webkit-transform-style: preserve-3d;
width: 25px;
height: 25px;
-webkit-transform-origin: 37.5px 12.5px 0px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
left: 558px;
top: 23px;
background-image: none;
background-color: rgb(31, 159, 206);
}
.gwd-span-rgrp {
font-family: Oswald;
}
.gwd-div-vald {
text-align: center;
}
.gwd-div-1jfl {
text-align: center;
}
.gwd-span-029m {
font-family: Oswald;
color: rgb(194, 194, 194);
}
.gwd-img-9im6 {
position: absolute;
}
.gwd-img-35xh {
top: 0px;
}
.gwd-img-2s4k {
width: 300px;
height: 250px;
left: 0px;
}
.gwd-span-l71i {
font-weight: bold;
color: rgb(255, 255, 255);
padding: 5px;
-webkit-transform-origin: 27.5px 26px 0px;
width: 324px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
font-family: 'PT Sans';
}
.gwd-div-4zso {
position: absolute;
font-family: 'Times New Roman';
text-align: left;
color: rgb(0, 0, 0);
-webkit-transform-style: preserve-3d;
width: 265px;
height: 171px;
-webkit-transform-origin: 132.5px 85.5px 0px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
top: 20px;
left: 20px;
}
.gwd-span-5css {
font-family: Oswald;
color: rgb(241, 131, 12);
}
.gwd-span-3nz4 {
font-size: 28px;
}
.gwd-span-lx7d {
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
font-size: 48px;
}
.gwd-span-jq5y {
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
.gwd-div-ufti {
text-align: left;
}
.gwd-span-d5ck {
color: rgb(241, 131, 12);
font-family: Oswald;
font-size: 52px;
background-color: initial;
}
.gwd-div-0ria {
text-align: center;
}
.gwd-div-0wb3 {
text-align: left;
}
.gwd-span-nl56 {
color: rgb(255, 255, 255);
font-family: 'PT Sans';
font-weight: bold;
font-size: 19px;
}
.gwd-div-pr60 {
background-image: none;
background-color: rgba(0, 0, 0, 0);
}
.gwd-div-dofi {
text-align: center;
width: 27px;
height: 10px;
-webkit-transform: translate3d(-1px, 0px, 0px);
-webkit-transform-style: preserve-3d;
}
.gwd-span-ioqv {
color: rgb(255, 255, 255);
font-family: 'PT Sans';
font-size: 19px;
font-weight: bold;
}
.gwd-div-zfhi {
position: absolute;
font-family: 'Times New Roman';
color: rgb(0, 0, 0);
line-height: 40px;
text-align: center;
-webkit-transform-style: preserve-3d;
width: 279px;
height: 176px;
-webkit-transform-origin: 50% 50%;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
left: 23px;
top: 35px;
}
.gwd-div-71cz {
text-align: center;
}
.gwd-span-94ze {
font-size: 53px;
}
.gwd-youtube-99wp {
position: absolute;
width: 200px;
height: 140px;
left: 357.5px;
top: 71px;
}
</style>
<script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>
<script data-source="gwdpagedeck_min.js" data-version="1.5" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script>
<script data-source="gwdtaparea_min.js" data-version="1.3" data-exports-type="gwd-taparea" type="text/javascript" src="gwdtaparea_min.js"></script>
<script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script data-source="gwddoubleclick_min.js" data-version="1.9" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script>
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
<script data-source="gwdimage_min.js" data-version="1.4" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script>
<script type="text/javascript" gwd-events="handlers"></script>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!

document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
<script data-source="gwdyoutube_min.js" data-version="3" data-exports-type="gwd-youtube" type="text/javascript" src="gwdyoutube_min.js"></script>
</head>

<body class="document-body">
<gwd-doubleclick id="gwd-ad" polite-load="">
<gwd-metric-configuration>
<gwd-metric-event source="youtubevideo" event="playpressed" metric="youtubevideo: YouTube play"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="paused" metric="youtubevideo: YouTube pause"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="ended" metric="youtubevideo: YouTube end"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="viewed25percent" metric="youtubevideo: YouTube first quartile"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="viewed50percent" metric="youtubevideo: YouTube midpoint"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="viewed75percent" metric="youtubevideo: YouTube third quartile"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="viewed100percent" metric="youtubevideo: YouTube complete"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="previewed0percent" metric="youtubevideo: YouTube preview started"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="previewed25percent" metric="youtubevideo: YouTube preview first quartile"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="previewed50percent" metric="youtubevideo: YouTube preview midpoint"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="previewed75percent" metric="youtubevideo: YouTube preview third quartile"></gwd-metric-event>
<gwd-metric-event source="youtubevideo" event="previewed100percent" metric="youtubevideo: YouTube preview complete"></gwd-metric-event>
</gwd-metric-configuration>
<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck" default-page="banner-page">
<div is="gwd-page" id="banner-page" data-gwd-name="Banner page" class="gwd-page-wrapper banner gwd-lightbox gwd-div-pr60" data-gwd-width="300px" data-gwd-height="250px">
<div class="gwd-page-content banner">
<gwd-taparea id="expand-button" class="" style="background-image: none;">
<div class="gwd-div-0wb3"><span class="gwd-span-nl56">WATCH VIDEO</span>
</div>
</gwd-taparea>
<div class="gwd-div-4zso">
<div><span class="gwd-span-5css gwd-span-lx7d" style=""><span class="gwd-span-94ze">FANCY A BIT</span> ON THE SIDE?</span>
</div>
</div>
</div>
</div>
<div is="gwd-page" id="expanded-page" expanded="" data-gwd-name="Expanded page" class="gwd-page-wrapper expanded gwd-lightbox gwd-div-8jm2 gwd-div-h222" data-gwd-width="600px" data-gwd-height="250px" style="">
<div class="gwd-page-content expanded">
<gwd-taparea id="close-button" class="">
<div class="gwd-div-dofi"><span class="gwd-span-ioqv">X</span>
</div>
</gwd-taparea>
<div class="gwd-div-zfhi">
<div class="gwd-div-ufti"><span class="gwd-span-d5ck">GET YOUR OWN £10 <font color="#c2c2c2">OFFER TODAY</font></span>
</div>
</div>
<gwd-youtube id="youtubevideo" video-url="https://www.youtube.com/watch?v=SheV6FKO6gM" annotations="" related="" title="" class="gwd-youtube-99wp" autoplay="standard"></gwd-youtube>
</div>
</div>
</div>
</gwd-doubleclick>
<script type="text/javascript " gwd-events="registration ">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('expand-button', 'action', gwd.handleExpand_buttonAction, false);
gwd.actions.events.addHandler('close-button', 'action', gwd.handleClose_buttonAction, false);
gwd.actions.events.addHandler('close-button', 'action', gwd.handleClose_reportManualClose, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('expand-button', 'action', gwd.handleExpand_buttonAction, false);
gwd.actions.events.removeHandler('close-button', 'action', gwd.handleClose_buttonAction, false);
gwd.actions.events.removeHandler('close-button', 'action', gwd.handleClose_reportManualClose, false);
};
document.addEventListener("DOMContentLoaded ", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload ", gwd.actions.events.deregisterEventHandlers);
</script>
<script type="text/javascript " gwd-events="handlers ">
gwd.handleExpand_buttonAction = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'expanded-page');
};
gwd.handleClose_buttonAction = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'banner-page');
};
gwd.handleClose_reportManualClose = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.reportManualClose('gwd-ad');
};
</script>
<script type="text/javascript " id="gwd-init-code ">
(function() {
document.body.style.opacity = "0 ";
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/

function handleDomContentLoaded(event) {
// This is a good place to show a loading or branding image while
// the ad loads.
}

/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
document.body.style.opacity = " ";
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}

/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {
// This marks the end of the polite load phase of the Ad. If a
// loading image was shown to the user, this is a good place to
// remove it.
}

window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body>

</html>

Google Web Designer beta

unread,
Jul 6, 2015, 2:58:35 PM7/6/15
to gwd...@googlegroups.com
Hi Hari,

I have tried using your codes in my file and run into some problems. It seems that some codes are corrupted (for example, there are repeated event handlers codes.) I probably need to take a look at all the source files.

Can you reply to this post and attach your zip file (pre-publish files) if you don't mind? Or you can send it to gwd-s...@google.com.

Thanks,
Emily (GWD Team)

he...@cabinetbrusa.com

unread,
Apr 1, 2016, 4:47:35 AM4/1/16
to Google Web Designer beta
Hi, i have same trouble, but i use firebug. and i see than body have Opacity:0 in style element by default. i force opacity : 1 !important, for show banner…

Anyone can help us?

How change move opacity 0 by default

lescr...@gmail.com

unread,
Oct 31, 2016, 5:54:15 AM10/31/16
to Google Web Designer beta
The same probleme for me.

Have you solution?

Reply all
Reply to author
Forward
0 new messages