Slide Banners Tutorial

Introduction
Source Code
All Examples
Basic Template
Customizing Slide Banners

A) Introduction - top

Slide Banners allows you to create professional rich media banners in any size an using any media such as Flash, HTML, HTML5 or Images. You design 1 banner and 1 close or open image. Customize it by changing the variable to your needs.

B) Source Code - top

slidebanners.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

* 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

<html>
<head>
<script type="text/javascript" src="slidebanners.js"></script>
<script>
      var banner5;
      window.onload = function(){
      banner5 = new SlideBanner({
      html_id:'slidebanner',
      html_height:600,
      html_width:120,
      direction:'left',
      left:0,
      scrollwithpage:true,
      delay:1,
      autoclose:200000,
      closebutton:{className:'closeButton'},
      closebuttonid:'buttonclose1',
      onshow:function(sb){
      sb.closebutton.innerHTML = '';
      sb.closebutton.className = 'closeButton'; },
      onclose:function(sb){
      sb.closebutton.innerHTML = '';
      sb.closebutton.className = 'reopenButton';

} 

/* Uncomment below to make the banner disappear completely */
/*,closebuttonclick:function(o,b,settings){
b.style.display = 'none'; },
*/

});
  document.getElementById('slidebanner').style.opacity='100';
};
</script>

<style type="text/css">
  .closeButton{
    height:40px;width:40px;
    background: url('images/close2.png') no-repeat top left;}
  .reopenButton{
    height:78px;width:29px;
    background: url('images/open.png') no-repeat top left;}
</style>
</head>

<body>  

<div id="slidebanner" style="width:120px;height:600px;z-index:2001;opacity:0">
    <a href="http://onlinecreative.org" target="_blank">
<img src="images/example1.jpg">OR ANY HTML CONTENT</a>
</div>

</body>
</html>

If you start a new HTML document you can begin with this template.

If you view all the examples you can view the source code and see the settings that the example has.

E) Customizing Slide Banners. - top

1. Change the dimensions
2. Change the direction (Left, Top, Right or Bottom )
3. Change the position
4. Centered page position (only use Top, or Bottom)
5. Scroll with the page
6. Adding 2 or more to the same page
7. Auto open & auto close
8. Change the location of the close & open button (remove the open button)
9. Making the open button appear first
10. Close dissappear entire banner
11. Adding a Cookie
12. Adding a text link to open/close the banner.
13. Flash Files - The Flash Actionscript to open and close the banner.
14. Change the URL where it links to.
15. Mobile - Responsive - Open up the example to see how its made.

E1) Change the dimensions - top

Whatever your banner dimensions are you need to change it in 2 places.

Once in the JavaScript

html_height:600,
html_width:120,

Once in the DIV layer

<div id="slidebanner" style="width:120px;height:600px;">

E2) Change the direction (Left, Top, Right or Bottom ) - top

By Changing the variable to left, right, top, or bottom,

direction:'left',

E3) Change the position - top

To make the banner stick to the edge of the page, you must also add a 0 to the direction.

This will align the banner centered to the left side of the page.

left:0,

This will align to the top/left corner.

left:0,
top:0,

This will align 30 pixels down from the top/left corner.

left:0,
top:30,

This will align the banner to the right side, 30 pixels from the bottom

direction:'right',

right:0,
bottom:30,

This will align the banner top/centered.

direction:'top',

top:0,

This will align the banner to the bottom 10 pixels from the right.

direction:'bottom',

bottom:0,
right:10,

E4) Centered page position (only use Top, or Bottom) - top

If you want the final position to be top/centered in the page, you must use the direction of top.

direction:'top',

top:100,

You can see an example of this here. example16.html

If you want the final position to be bottom/right, you must use the direction of bottom.

direction:'bottom',

bottom:300,

E5) Scroll with the page - top

Find line 39 in the variables and change this from false to true if you want the banner to follow the page when you scroll down.

scrollwithpage:true,

E6) Adding 2 or more to the same page - top

You can see an example of 2 or more on the same page here. example7.html

Banner 1. Here is what the top variables looks like.

var banner5;
window.onload = function(){    
banner5 = new SlideBanner({
          
html_id:'slidebanner',

Make sure your DIV ID is the same.

<div id="slidebanner" style="width:120px;height:600px;z-index:2001;opacity:0">
    <a href="http://onlinecreative.org" target="_blank"><img src="images/example1.jpg"></a>
  </div>

Banner 2. Notice the first variables are slightly different then in the first banner.

var banner5 = new SlideBanner({
          
html_id:'slidebanner2',

Make sure your DIV ID is the same.

<div id="slidebanner2" style="width:120px;height:600px;z-index:2001;opacity:0">
    <a href="http://onlinecreative.org" target="_blank"><img src="images/example1.jpg"></a>
  </div>

You will most likely need a new close/open button for the 2nd banner.
To do this you need to add another CSS element.

 <style type="text/css">

.closeButton2{
      height:40px;width:29px;
      background: url('images/close3.png') no-repeat top right;
    }

.reopenButton2{
      height:78px;width:29px;
      background: url('images/open2.png') no-repeat top left;
    }
</style>

In the Banner 2 variables you will need to add this.

closebutton:{className:'closeButton2'},
    closebuttonid:'buttonclose2',
    onshow:function(sb){  
    sb.closebutton.innerHTML = '';
    sb.closebutton.className = 'closeButton2'; /* closeButton is the CSS close element. */
    },
    onclose:function(sb){
    sb.closebutton.innerHTML = '';
    sb.closebutton.className = 'reopenButton2'; /* reopenButton is the CSS open element. */
},

If you wanted to add a third banner just follow the same format as the 2nd banner.

Here is what the JavaScript looks like for 2 banners altogether

<script>

      var banner5;
      window.onload = function(){
      banner5 = new SlideBanner({
      html_id:'slidebanner', /*    Specify your DIV ID    */
      html_height:600, /*   Height   */
      html_width:120, /*   Width    */
      direction:'left', /*   Direction left,right,top,bottom    */
      left:0, /*   Position of Direction 0 = align to side.  */
      bottom:0,
      scrollwithpage:true, /*   Scroll with page,  True/False  */
      delay:1,/* Auto Open After - 1000 = 1 second */
      autoclose:20000, /* Auto Close After -  1000 = 1 second */
      closebutton:{className:'closeButton'},
      closebuttonid:'buttonclose1',
      onshow:function(sb){
      sb.closebutton.innerHTML = '';
      sb.closebutton.className = 'closeButton'; /* closeButton is the CSS close element. */
      },
      onclose:function(sb){
      sb.closebutton.innerHTML = '';
      sb.closebutton.className = 'reopenButton'; /* reopenButton is the CSS open element. */
}

   /* Uncomment below to make the banner disappear completely */
   /*
   ,closebuttonclick:function(o,b,settings){
   b.style.display = 'none';

   },
   */
   });

  document.getElementById('slidebanner').style.opacity='100';


  var banner5 = new SlideBanner({

      html_id:'slidebanner2', /*    Specify your DIV ID    */
      html_height:600, /*   Height   */
      html_width:120, /*   Width    */
      direction:'right', /*   Direction left,right,top,bottom    */
      right:0, /*   Position of Direction 0 = align to side.  */
      bottom:0,
      scrollwithpage:true, /*   Scroll with page,  True/False  */
      delay:500,/* Auto Open After - 1000 = 1 second */
      autoclose:200000, /* Auto Close After -  1000 = 1 second */
      closebutton:{className:'closeButton2'},
      closebuttonid:'buttonclose2',
      onshow:function(sb){
      sb.closebutton.innerHTML = '';
      sb.closebutton.className = 'closeButton2'; /* closeButton is the CSS close element. */
      },
      onclose:function(sb){
      sb.closebutton.innerHTML = '';
      sb.closebutton.className = 'reopenButton2'; /* reopenButton is the CSS open element. */
      }

      /* Uncomment below to make the banner disappear completely */
     /*
     ,closebuttonclick:function(o,b,settings){
     b.style.display = 'none';
     },
     */

      });
      document.getElementById('slidebanner2').style.opacity='100';
  };

E7) Auto open & auto close - top

Find line 40 in the variables and set the delay to 2000 if you want it to auto open after 2 seconds.
4000 = 4 seconds.

delay:2000,
autoclose:4000,

E8) Change the location of the close & open button (remove the open button) - top

Here is example of the close button on the left slide of the banner. example11.html

Find line 42 and add an additional CSS element to the close & open buttons.

closebutton:{className:'closeButton topBanner'},
          closebuttonid:'buttonclose1',
          onshow:function(sb){  
          sb.closebutton.innerHTML = '';
          sb.closebutton.className = 'closeButton topBanner'; 
          },
          onclose:function(sb){
          sb.closebutton.innerHTML = '';
          sb.closebutton.className = 'reopenButton topBanner';

Add this CSS

<style type="text/css">

.topBanner
{
  left:0px;
}
</style>

This will make both the close button and the open button align to the left side.

If you want the close button to be inside of the banner, not outside see example12.html
Add a new CSS element "closebuttoninside"

closebutton:{className:'closeButton closebuttoninside'},
    closebuttonid:'buttonclose1',
    onshow:function(sb){  
    sb.closebutton.innerHTML = '';
    sb.closebutton.className = 'closeButton closebuttoninside'; 
    },
    onclose:function(sb){
    sb.closebutton.innerHTML = '';
    sb.closebutton.className = 'reopenButton topBanner2'; 
  },

And here is the CSS for it.

.closebuttoninside{
      left:0px;
      top:10px !important
    }

.topbanner2 {
      left:0px;
    }

E9) Making the open button appear first - top

Find line 40 in the variables and set the delay to 1, and the autoclose to 2,

delay:1,
autoclose:2,

You can see this in the example19.html

E10) Close dissappear entire banner - top

To make the banner instantly disappear. Find line 53 on any example file you will see this.

/* Uncomment below to make the banner disappear completely */
 /*
  closebuttonclick:function(o,b,settings){
  b.style.display = 'none'; 
          },
*/

Simply uncomment out this so that it looks like this.

closebuttonclick:function(o,b,settings){
b.style.display = 'none'; 
          },

E11) Adding a Cookie - top

Adding this JavaScript just before 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 CSS file, make sure the CSS ID is the same that you wrap around the banner DIV

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

Add this code just before the </body> tag
Wrap a new DIV layer around your current DIV Banner
Also add the JavaScript below the your banner. Make sure that your DIV ID has the same name that is in the below JavaScript.

<div id="slidebannercookie">
  <div id="slidebanner" style="width:720px;height:160px;z-index:2001;opacity:0">
    <a href="http://onlinecreative.org" target="_blank"><img src="images/example2.jpg"></a>
  </div>
</div>  

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

E12) Adding a text link to open/close the banner. - top

Click to open or close.

<a href="javascript:banner5.hide();">Click to open or close.</a>

E13) Flash Files - The Flash Actionscript to open and close the banner. - top

For the flash banners we use SWFobject code. https://code.google.com/p/swfobject/

<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/slidebanner_720_160.swf", "slidebanner_flash", 
"720", "160", "9.0.0", "swfobject/expressInstall.swf", flashvars, params, attributes);
</script>

<div id="slidebanner_flash">

HERE is where you can put a backup image for users who do not have flash

</div>

Create a button in flash and add the below Actionscript code.

Click to open.

on (release) {
  getURL("javascript:banner5.hide();");
}

Rollover to open.

on (rollOver) {
  getURL("javascript:banner5.hide();");
}

That's all for flash.

E14) Change the URL where it links to. - top

Change the URL in the Banner DIV

<div id="slidebanner" style="width:720px;height:160px;z-index:2001;opacity:0">
    <a href="http://onlinecreative.org" target="_blank"><img src="images/example2.jpg"></a>
  </div>

2015 � OnlineCreative.org