The JavaScript Source: Image Effects : Streaming Horizontal Banner

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

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/
Posted: July 16, 2007

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://javascript.internet.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>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

5. From: Corry
Banner doesn't work when online
05/13/2008 12:19:10

6. From: Lee (Admin)
10/31/2008 14:23:06

3. From: hANjEK
Correction
11/29/2007 06:06:40

4. From: Lee (Admin)
12/04/2007 11:22:33

1. From: jackson
Need help on code please
08/24/2007 10:33:39

2. From: Lee (Admin)
10/03/2007 14:48:55

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

5. From: CorryBanner doesn't work when online05/13/2008 12:19:10

6. From: Lee (Admin)10/31/2008 14:23:06

3. From: hANjEKCorrection11/29/2007 06:06:40

4. From: Lee (Admin)12/04/2007 11:22:33

1. From: jacksonNeed help on code please08/24/2007 10:33:39

2. From: Lee (Admin)10/03/2007 14:48:55

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

5. From: Corry
Banner doesn't work when online
05/13/2008 12:19:10

6. From: Lee (Admin)
10/31/2008 14:23:06

3. From: hANjEK
Correction
11/29/2007 06:06:40

4. From: Lee (Admin)
12/04/2007 11:22:33

1. From: jackson
Need help on code please
08/24/2007 10:33:39

2. From: Lee (Admin)
10/03/2007 14:48:55