Streaming Horizontal Banner

Jeroen Haan Jul 16, 2007

General

Add a horizontal 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: streamingBannerHorizontal.js

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

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

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

 	id1.style.left = parseInt(id1.style.left)-1 + 'px';
 	
 	document.getElementById('slideCont').style.width = contWidth + "px";
 	document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
 	id2.style.display = '';
 	if(parseFloat(id1.style.left) == -(contWidth)) 	{
 		id1.style.left = '0px';
 	}
 	setTimeout(clip,25)
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/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 {
 	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="streamingBannerHorizontal.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="slideCont" style="position:relative;z-index:1;width:425px;height:90px;top:0px;overflow:hidden;">
	<div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:850px;height:90px;overflow:hidden;">
		<div style="float:left" id="innerSlideA">
			<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.mysql.com/"><img src="mysql.gif" width="126" height="44" border="0"></a>
		</div>
		<div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:425px;height:90px;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.mysql.com/"><img src="mysql.gif" width="126" height="44" border="0"></a>
		</div>
	</div>
</div>

Leave a Response

(0 comments)

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