Streaming Banners

Jeroen Haan Apr 9, 2007

General

Add a banner roll to your Web site with this easy-to-use script. Each banner can also include a URL. The size can be set in the script file.

Notes

Created by: Jeroen Haan
Web Site: http://www.haan.net/

In order the have the script working in FireFox as well you need a proper "DTD" to prevent the browser's "quirksmode". See http://www.quirksmode.nl/ for more details.

Or in case you experience problems, copy and paste next line on top of your Web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: banner.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com */
/* -----------------------------------------------
   Streaming banners - v.1.1
   (c) 2006 www.haan.net
   contact: jeroen@haan.net
   You may use this script but please leave the credits on top intact.
   Please inform us of any improvements made.
   When useful we will add your credits.
  ------------------------------------------------ */

/* usage
<body>
<div id="slideCont" style="position:relative;z-index:1;width:140px;left:0px;overflow:hidden;">
	<div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
		your banners (images inside anchor tags)
		<div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
			your banners (images inside anchor tags)
		</div>
	</div>
</div>
</body>

In order the have the script working in FireFox as well you need a proper "DTD" to prevent the browser's "quirksmode".

Please see http://www.quirksmode.nl/ for more details.

Or in case you experience problems, copy and paste next line on top of your webpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

*/

function clip() {
 	// width of the banner container
 	var contWidth = 150;
 	// height of the banner container
 	var contHeight = 300;

 	var id1 = document.getElementById('slideA');
 	var id2 = document.getElementById('slideB');
 	var height = id1.offsetHeight;

 	id1.style.top = parseInt(id1.style.top)-1 + 'px';

 	document.getElementById('slideCont').style.height = contHeight + "px";
 	document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
 	id2.style.display = '';
 	if(parseFloat(id1.style.top) == -(height/2)) {
  		id1.style.top = '0px';
 	}
 	setTimeout(clip,50)
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  clip();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#slideCont {
	margin: 10px;
	border: solid 1px #000;
	text-align: center;
}
#slideCont img {
	margin: 5px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="banner.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="slideCont" style="position:relative;z-index:1;width:140px;left:400px;overflow:hidden;">
  <div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
    <a href="http://www.apache.org/"><img src="apache.gif" width="126" height="44" border="0"></a>
    <a href="http://www.haan.net"><img src="banner_haan_net_en.gif" width="120" height="60" border="0"></a>
    <a href="http://www.linux.org/"><img src="linux.gif" width="126" height="64" border="0"></a>
    <a href="http://www.mysql.com/"><img src="mysql.gif" width="126" height="44" border="0"></a>
    <a href="http://www.php.net/"><img src="php.gif" width="126" height="44" border="0"></a>
    <a href="http://www.ubuntu.com/"><img src="ubuntu.gif" width="126" height="34" border="0"></a>

    <div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
      <a href="http://www.apache.org/"><img src="apache.gif" width="126" height="44" border="0"></a>
      <a href="http://www.haan.net"><img src="banner_haan_net_en.gif" width="120" height="60" border="0"></a>
      <a href="http://www.linux.org/"><img src="linux.gif" width="126" height="64" border="0"></a>
      <a href="http://www.mysql.com/"><img src="mysql.gif" width="126" height="44" border="0"></a>
      <a href="http://www.php.net/"><img src="php.gif" width="126" height="44" border="0"></a>
      <a href="http://www.ubuntu.com/"><img src="ubuntu.gif" width="126" height="34" border="0"></a>
    </div>
  </div>
</div>

Leave a Response

(9 comments)

Yes, as it is shown in the code for the body section, you'll need to supply whatever images you want to use.

Lee May 12, 2008

I can not get the script to work ,dont i need the images on file i followed the code and all I get is a black line in my browser

jamika May 8, 2008

You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Oct 26, 2007

Great script, but i can't make it work either on ie oe Firefox, followed every step but im having some trouble

Pat Oct 19, 2007

Dear Alain,[br /][br /]Between the anchor tags <a></a> is a image tag <img ... />[br /]of course you can place anything between the anchor tags.[br /]Try it and let us know![br /][br /]Dear Donald,[br /][br /]I already have a buggy demo but need to tweak a little.[br /]Remind me that I will place the horizontal version soon![br /](send me an email).

Jeroen Haan Jun 20, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details