Expanding direction

[riccard...@gmail.com]

Is there a way to change the expanding direction in an expanding ad? E.g. expanding to the left rather than right?

[Paul Blankinship]

Take a look at the Help Center - there is an example that shows how to create an expandable ad that opens to the right:

https://support.google.com/webdesigner/answer/3265056

[ricca...@gmail.com]

Thanks Paul.
I thought that there would be an option in GWD when initially setting up the ad, that would allow to specify the expansion direction. Maybe a nice addition for next release.

I managed to change the expansion direction by editing the CSS in "Code view".
My ad is a 300x250 expanding to 600x350.
I added "left: 300px;" to the class ".gwd-page-wrapper".
This moved the whole add 300px to the right.
Then I added "left: 0px;" to the class ".expanded".
This pulled the expanded panel x position back to the origin.
In DoubleClick I set the X Offset to 300px;
It seems to work fine.

Cheers
Riccardo

[William Grose]

Hi Riccardo,

Sorry, the only way to expand up or the the left currently is to manually edit the published output.

Will

[jennygr...@gmail.com]

How do you do it? What is the code? I've been all over the internet looking for a solution.

I've got an expanding cube in both FLASH and HTML5 using Google Web Designer. The Flash is fine, but the HTML5 expands to the right and will end up off the page!!

[William Grose]

If you wanted to manually hack this onto the new document structure you could do the following.

Say you have an expanding ad with a banner page and expanded page. It's a 300x250 that expands left to 500x250.

First you would set the 300x250 banner page to be offset 200px to the right by going into "Code view" adding some css for that page:

      #banner-page {

        left: 200px;

      }

Note: When the ad renders in studio, it will be a 300x250 iframe that has the body's left margin set to -200px to show the collapsed portion.

This means that you want the page container to not be 100% width (inherited from the iframe) but to 500px x 250px.

.gwd-page-container {

  width: 500px;

  height: 250px;

}

Then the final step would be edit the published zip index.html and add the offset to the studio sdk command:

From:

Enabler.setExpandingPixelOffsets(0,0,500,250,false,false);

To:

Enabler.setExpandingPixelOffsets(200 /* left offset */,0 /* top offset */,500,250,false,false);

as described here:

http://www.google.com/doubleclick/studio/docs/sdk/html5/en/class_studio_Enabler.html#expand-collapse

Or you could do this in the Studio Preview in the Display Properties accordion.

HTH,

Will

[sjerr...@phyte.com]

I've found the answer on how to expand to the left. It took a bit, but in the end, the solution is extremely simple. Say you have an expandable: 300x250 to 510x250. In the CSS you'll find:

.gwd-page-wrapper {
background-color: rgb(255, 255, 255);
position: absolute;
-webkit-transform: translateZ(0px);
}

I made a copy of this class and renamed it ending with "_exp". I then changed "-webkit-transform: translateZ(0px);" to "-webkit-transform: translateX(-210px);". I then assigned the class "gwd-page-wrapper_exp" to the expanded page:

<div is="gwd-page" id="expanded-page" expanded="" data-gwd-name="Expanded page" class="gwd-page-wrapper_exp expanded gwd-lightbox" data-gwd-width="510px" data-gwd-height="250px">

The class looks like this:

.gwd-page-wrapper_exp {
background-color: rgb(255, 255, 255);
position: absolute;
-webkit-transform: translateX(-210px);
}

Then to position the whole ad over to the right a bit, so it won't get chopped off, I opened, "gwdpagedeck_style.css" and edited this, from:

.gwd-pagedeck{overflow:hidden;position:relative}.gwd-pagedeck>.gwd-page.transparent{opacity:0}.gwd-pagedeck>.gwd-page{position:absolute;top:0;left:0px;

to:

.gwd-pagedeck{overflow:hidden;position:relative}.gwd-pagedeck>.gwd-page.transparent{opacity:0}.gwd-pagedeck>.gwd-page{position:absolute;top:0;left:210px;

And that's how I got my ad to expand to the left!

Thanks.

[sjerr...@phyte.com]

I'm sorry, I take back my solution. Taking out -webkit-transform: translateZ(0px); messes up the stage in design mode. I didn't realize this, but I'm getting close! Stay tuned.