Push Down Banners Tutorial

Introduction
Source Code
All Examples
Basic Template
Flash Banners
Images Banners & HTML Banners
2 different Images or HTML banners
More options - Adding a cookie

A) Introduction - top

Push Down Banners allows you to create professional rich media banners in any size that push web content down to reveal the banner. You can use any media such as Flash, HTML, HTML5 or Images.

B) Source Code - top

pushdownbanners.js

By purchasing you own the rights to use the source code on as many websites that you run or administer.
Not for resale or distrubution.

C) All Examples - top

Example 1 - Images - 1 image, click to open, click to close
Example 2 - Images - Auto opens afer 2 seconds, click to close
Example 3 - Images - Auto opens afer 2 seconds, click to close - adds a cookie so you only view it once.
Example 4 - Images - 1 image expand to HTML, the first image dissappears to reveal the 2nd banner.
Example 5 - Images - Change the Speed
Example 6 - Image Billboard - Auto-open, no animation
Example 7 - Flash Billboard - Auto-open, no animation
Example 8 - Flash Auto Expand - Auto-open
Example 9 - Flash Pencil - Skinny pencil flash ad
Example 10 - Flash Click to open - click to open
Example 11 - Flash Rollover Countdown - Rollover, 3,2,1 countdown.

* Please make sure that these examples files are working from the URL your client code is connected with before moving on.

D) Basic Template - top

Basic template.

<html>
<head>
<script type="text/javascript" src="pushdownbanners.js></script>
<script type="text/javascript">
var _gPDBSpeed = 20;
var _gPDBTime = 500;
var _gPDBAutoopen = 2000;
var _gPDBAutoclose = 6000;
autostart();
</script>
</head>

<body>  <div id="PushdownAd1" class="PushdownAd" style="width:950px; margin:auto; border:0; text-align:center;
height:18px; overflow:hidden;>
<object width="950" height="400">

Your Push Down (Flash, Image or HTML) Banner goes here.
</object>
</div>

</body>
</html>

If you want to start an HTML document you can begin with this template.
Notice the DIV id="PushdownAd1" has a height of 18px
and the Object tag has a height of 400px.

Change the speed of the Push Down Animation

Find line 10 & 11 in any of the HTML examples

var _gPDBSpeed = 20;
var _gPDBTime = 500;

To open instantly set to

var _gPDBSpeed = 1;
var _gPDBTime = 1;

To set the Auto-open or Auto close of any banner.

Find line 12 & 13 in any of the HTML examples

var _gPDBAutoopen = 0;
var _gPDBAutoclose = 0;

To open right away set to

var _gPDBAutoopen = 1;
var _gPDBAutoclose = 0;

To never open set to 0

var _gPDBAutoopen = 0;
var _gPDBAutoclose = 0;

E) Flash Banners - top

You can view a flash banner example here.

Step 1. Setting up your Flash file

There is only 1 Flash file to make, and that is the larger expanded version you see when its fully expanded.
When the page first loads all your seeing is the top portion of that 1 Flash file.

In the first frame of your timeline create your small first banner. Add a button that says Click here to expand.

On that button add this Actionscript

on (release) {
  getURL("javascript:PushdownAd.get('PushdownAd1').open();");
  gotoAndPlay(2);
}

The first line calls the open JavaScript function which will expand the banner.
The second line plays the timeline to the next frame. Now in the 2nd frame display the larger banner content with your videos etc.

Now you will want to creat a visible close button somewhere, preferable in the bottom right-hand corner.
On the close button add this Actionscript

on (release) {
  getURL("javascript:PushdownAd.get('PushdownAd1').close();");
  play();
}

The first line calls the close JavaScript function which will close the banner.
The second line plays the timeline again and should stop on the first frame again.

Rollover to open.

You can easily change the onRelease to a onRollover just chnage the code below.

on (rollOver) {
  getURL("javascript:PushdownAd.get('PushdownAd1').close();");
  play();
}

Now you will also want to change your button text to read Rollover to Expand, you will also want to go inside your button, goto the Hit State in the button and draw a large square that is the same size as the entire small banner.

Insert your Flash File into your page.

We are using the SWFobject file located at https://code.google.com/p/swfobject/
We have included these files and they should have been uploaded to your website along with the other file.

Add this JavaScript after the <head> tag along with the basic template above.

<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = true;
var params = {
  wmode: "transparent"
  };
var attributes = {};
swfobject.embedSWF("flash/billboard.swf", "large_exp", "950", "300", "9.0.0", "swfobject/expressInstall.swf",
flashvars, params, attributes);
</script>

Change the red text with the name and dimensions of your Flash file.

If you'd like to turn the Transparency off use this.

<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("flash/billboard.swf", "large_exp", "950", "300", "9.0.0", "swfobject/expressInstall.swf");
</script>

Add these DIV layers inside of the <body> tag where you want your flash push down banner to appear.

<div id="PushdownAd1" class="PushdownAd" style="width:950px; margin:auto; border:0;
text-align:center; height:90px; overflow:hidden;>
<object width="950" height="300"> 
          <div id="large_exp">Place your backup image here</div>
     <object>
</div>

Change the width and height of the Object tags to your width and height.
You can place a backup image for users who do not have Flash.

Done.

Here's everything put together for a flash file.

<html>
<head><script type="text/javascript" src="pushdownbanners.js></script>
<script type="text/javascript">
var _gPDBSpeed = 20;
var _gPDBTime = 500;
var _gPDBAutoopen = 2000;
var _gPDBAutoclose = 6000;
autostart();
</script>

<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = true;
var params = {
  wmode: "transparent"
  };
var attributes = {};
swfobject.embedSWF("flash/billboard.swf", "large_exp", "950", "300", "9.0.0", "swfobject/expressInstall.swf",
flashvars, params, attributes);
</script>

</head>
<body>
<div id="PushdownAd1" class="PushdownAd" style="width:950px; margin:auto; border:0; text-align:center;
height:90px; overflow:hidden;>
<object width="950" height="300"> 
          <div id="large_exp">Place your backup image here</div>
     <object>
</div>

</body>
</html>

F) Image Banners & HTML Banners - top

You can see an image banner example here.

Step 1. Create 3 JPG, GIF or PNG Banner files.

Then insert the 3 images below inside of the DIV Layer where you want the Push Down Banner to appear.

1. The first banner is the first top banner that is always visible, it is 950 X 20 pixels and has the open link
<a href="javascript:PushdownAd.get('PushdownAd1').open();">

2. The 2nd Banner is your main ad and is only visible after you click the first banner and is 950 X 380 pixels.
Here you link to whatever website you want. <a href="http://www.yourwebsite.com" target="_blank">

3. The 3rd Banner is your close button and is only visible after you click the first banner and is 950 X 25 pixels.
Here you add the link <a href="javascript:PushdownAd.get('PushdownAd1').close();">

<div id="PushdownAd1" class="PushdownAd" style="width:950px; border:0;background-color:#FFF;
width:auto; text-align:center; height:20px; overflow:hidden;">
  
  <object width="950" height="425">     
  <a href="javascript:PushdownAd.get('PushdownAd1').open();"><img src="images/clicktoexpand.jpg"
width="950" height="20" border="0">  </a>
  <a href="http://www.yourwebsite.com" target="_blank"><img src="images/image-example.jpg"
width="950" height="380" border="0"></a>
  <a href="javascript:PushdownAd.get('PushdownAd1').close();"><img src="images/clicktoclose.jpg"
width="950" height="25" border="0"></a>
  </object>
 
 
</div>

Change the dimensions in the inline CSS of the DIV Layer and the image name to your file.

The HTML code to open the banner is: <a href="javascript:PushdownAd.get('PushdownAd1').open();" />Click to open</a>
The HTML code to close the banner is: <a href="javascript:PushdownAd.get('PushdownAd1').close();" />Click to close</a>

USE ANY HTML CODE YOU WANT

Alternatively, instead of using Images in the spot where you would place your image, simply replace it with any HTML that you want.

<div id="PushdownAd1" class="PushdownAd" style="width:950px; border:0;
background-color:#FFF; width:auto; text-align:center; height:20px; overflow:hidden;">
  
  <object width="950" height="400">     
     ANY HTML CODE YOU WANT!
  </object>
 
</div>

Make sure you still add a close button somewhere so that users can close the banner.

<a href="javascript:PushdownAd.get('PushdownAd1').close();" />Click to Close</a>

DONE.

Here's everything put together for an image file.

<html>
<head><script type="text/javascript" src="pushdownbanners.js></script>
<script type="text/javascript">
var _gPDBSpeed = 20;
var _gPDBTime = 500;
var _gPDBAutoopen = 2000;
var _gPDBAutoclose = 6000;
autostart();
</script>

</head>
<body>
<div id="PushdownAd1" class="PushdownAd" style="width:950px; border:0;background-color:#FFF;
width:auto; text-align:center; height:20px; overflow:hidden;">
<object width="950" height="425">     
  <a href="javascript:PushdownAd.get('PushdownAd1').open();"><img src="images/clicktoexpand.jpg"
width="950" height="20" border="0">  </a>
  <a href="http://www.yourwebsite.com" target="_blank"><img src="images/image-example.jpg"
width="950" height="380" border="0"></a>
  <a href="javascript:PushdownAd.get('PushdownAd1').close();"><img src="images/clicktoclose.jpg"
width="950" height="25" border="0"></a>
  </object>
</div>

YOUR WEBSITE

</body>
</html>

Push Down Banners are very useful being the very first thing after your <body> tag.

G) 2 Different IMAGES or HTML BANNERS - top

This is an example of an having 2 different images or HTML blocks for your banner.
*When you click the 1st banner it disappears and shows the 2nd banner.

View an image-example4.html

Step 1.

Add the DIV layer after the <body> tag where you want your Push Down Banner to appear.

<div id="PushdownAd1" class="PushdownAd" style="width:950px; border:0;
background-color:#5d2d90; text-align:center; height:20px; width:auto; overflow:hidden;">
<object width="950" height="450">   
  
<div id="pushdownopen" style="width:950px; border:0; background-color:#eee;
margin:auto; height:420px; display:block; overflow:hidden;">
      <a href="javascript:PushdownAd.get('PushdownAd1').open();toggle()"><img src="950x20.jpg"
width="950" height="20" border="0" usemap="#Map"></a>
       <a href="javascript:PushdownAd.get('PushdownAd1').close();toggle()"><div id="closebutton"
style="width:70px; border:0; background:url(close.png); float:right; height:77px; overflow:hidden;"></div></a>
</div>
     
     <div id="pushdownclose" style="width:950px; border:0; background-color:#eee; margin:auto;
height:420px; display:none; overflow:hidden;">
      
       <a href="javascript:PushdownAd.get('PushdownAd1').close();toggle()"><div id="closebutton"
style="width:70px; border:0; background:url(close.png); float:right; height:77px; overflow:hidden;"></div></a>
         
         <br><br>This is just a block of HTML - You can add tables or other DIV layers here.
         
    </div>

     </object>
 
</div>

The Green Text is the 1st banner. The Black text is the 2nd banner.

Simply change the 2 different banners to what you want them to be. Be sure to add your close button where you want it.

All CSS is inline CSS and can be changed there.

H) Add a cookie - top

Show the banner once per user per day - View example3_images.html

You will need to wrap an additional DIV layer around your banner.


<div id="PushdownAd-cookie">
 <div id="PushdownAd1" class="PushdownAd" style="width:950px; border:0; text-align:center;
height:0; width:auto; overflow:hidden;">
  
  <img src="images/introducing2.jpg" width="950" height="300" border="0" usemap="#Map">
   <object width="950" height="300">   
   <map name="Map" id="Map">
    <area shape="rect" coords="805,235,949,299" href="javascript:PushdownAd.get('PushdownAd1').close();" />
    <area shape="rect" coords="6,3,801,296" href="examples.php" />
    <area shape="rect" coords="802,4,946,231" href="examples.php" />
  </map>
 
  </object>
  </div>
  </div>

This is basically just an on/off switch.

Add this CSS just before the </head> tag.

<style type="text/css">
#PushdownAd-cookie {
   display: none;
}
#PushdownAd-cookie.show {
    display: block;
}
</style>

Add this JavaScript to the top of the page after the </head> tag.

<script type="text/javascript">
function createCookie(name,value,days) {
   if (days) {
   var date = new Date();
   date.setTime(date.getTime()+(days*24*60*60*1000));
   var expires = "; expires="+date.toGMTString();
   }
   else var expires = "";
   document.cookie = name+"="+value+expires+"; path=/";
   }

   function readCookie(name) {
   var nameEQ = name + "=";
   var ca = document.cookie.split(';');
   for(var i=0;i < ca.length;i++) {
   var c = ca[i];
   while (c.charAt(0)==' ') c = c.substring(1,c.length);
   if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
   }
   return null;
   }
   function eraseCookie(name) {
   createCookie(name,"",-1);
   }
</script>

Then add this 2nd piece of JavaScript just before the closing </body> tag

<script type="text/javascript">
var days = 1;
var PushdownAd-cookie = document.getElementById('PushdownAd-cookie');
if (readCookie('seenAdvert')) {
    PushdownAd-cookie.className = '';
} else {
    PushdownAd-cookie.className = 'show';
    createCookie('seenAdvert', 'yes', days);
}
</script>

Change the var days = 1; to the ammount of days it will be until the user can see the banner again.