Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Doctor XTN

HTML5 Push Down Bnner

Recommended Posts

So I have a campaign guy who somehow got roped into one of those expanded 970x250s which close into a 970x90. 

 

I have NO IDEA how to make this. Anyone have any clues? 

 

I can make a nice animated 970x90 and a rather sweet 970x250, but the rest of the stuff is indecipherable. 

 

Their rep gave me a Sizmek build guide, but it seems to not focus on where to put my art and how to get it to click.

 

Clues? Please? 

Link to comment
Share on other sites

You would normally have two containing DIV's one for the 970x90 banner and one for the 970x250 expanded state, positioned absolutely on top of each other.

 

Then you use some JS to hide/show each DIV.

  • Like 1
Link to comment
Share on other sites

Orrrrr....

 

Depending on your design and assets, you can put it all in one div, and tween the height as well as reposition the other assets.

 

But I guess the biggest enigma here is who's the Ad Platform - Assuming it is Sizmek - they will have a help file on how to actually set up the JS in order to trigger the push down.

Link to comment
Share on other sites

Yeah, for Sizmek it's all in the link I posted.  The build guide is here: http://demo.sizmek.com/blocks/buildguide/HTML5%20Pushdown%20Banner%20Build%20Guide.pdf

 

The template is already fully functional but can be tweaked further to auto expand:

 

Many publishers and networks allow pushdowns to expand automatically once in a given time period. For example, you may be allowed to auto-expand once per day, or once per campaign. If you want this functionality, include the following script in the head of your HTML:

<script type="text/javascript" src="http://ds.servingsys.com/BurstingRes/CustomScripts/html5_auto_expand_frequency_capping_v1.j
s"></script>

You can then set your auto-collapse settings using JavaScript. The settings below set the ad to auto-expand once per campaign, then auto-collapse after 7000 milliseconds, or 7 seconds. 

var autoExpandSettings = {
isEnabled: true,
frequency: EB.autoExpandFrequencyCapping.Frequencies.CAMPAIGN,
expansionsPerPeriod: 1,
timeUntilAutoCollapse: 7000
};
EB.autoExpandFrequencyCapping.initialize(autoExpandSettings);
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×