06-08-06, 01:23 PM
Newbie Coder
Join Date: Jun 2006
Location: Sweden
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
mBanner
Hi, I´m using the mBanner and I desperately need help modifying the code.
I´d like to change the code so you can specify bgcolor for each and every .swf file that I use to play in order.
Hope someone can help me...
Here´s my files:
mbannerreadme.txt
HOW TO USE THE BANNER IN YOUR HTML PAGE
---------------------------------------
STEP 1:
Copy files mBanner.js, mBanner.css
STEP 2:
Create a folder with name "banners"
(For the current example
place 10 images and 5 swf files in this folder
and rename them as
1.jpg, 2.jpg,...., 10.jpg,
10.swf, 11.swf,..., 14.swf)
STEP 1:
Include STYLE SHEET file for Banner
STEP 2:
Include JAVASCRIPT file for Banner
STEP 3:
Copy and modify the code for banner
Code:
<script language="javascript">
// SPECIFY THE NAME OF BANNER HERE
// REMEMBER THAT NAME OF VARIABLE AND ARGUMENT PASSED SHOULD BE SAME
// HERE IT IS 'banner1'
banner1 = new Banner('banner1');
// ADD THE BANNER HERE
// FIRST ARGUMENT : "FLASH" OR "IMAGE"
// SECONG ARGUMENT: PATH OF THE FILE
// THIRD ARGUMENT : DURATION IN SECONDS
// FOURTH ARGUMENT : HEIGHT
// FIFTH ARGUMENT : WIDTH
// SISTH ARGUMENT: HYPERLINK
banner1.add("FLASH", "banners/10.swf", 15, 100, 500,"mBanner.htm");
banner1.add("FLASH", "banners/11.swf", 7, 100, 500,"");
banner1.add("IMAGE", "banners/12.jpg", 9, 100, 500,"manish.htm");
banner1.add("FLASH", "banners/13.swf", 7, 100, 500,"");
banner1.add("IMAGE", "banners/14.gif", 9, 100, 500,"http://www.google.com");
// START THE BANNER
document.write(banner1);
banner1.start();
</script>
mBanner.js
Code:
/////////////////////////////////
// File Name: mBanner.js //
// By: Manish Kumar Namdeo //
/////////////////////////////////
// BANNER OBJECT
function Banner(objName){
this.obj = objName;
this.aNodes = [];
this.currentBanner = 0;
};
// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink);
};
// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
this.name = name;
this.bannerType = bannerType;
this.bannerPath = bannerPath;
this.bannerDuration = bannerDuration;
this.height = height
this.width = width;
this.hyperlink= hyperlink;
// alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink);
};
// Outputs the banner to the page
Banner.prototype.toString = function() {
var str = ""
for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
str = str + '<span name="'+this.aNodes[iCtr].name+'" '
str = str + 'id="'+this.aNodes[iCtr].name+'" ';
str = str + 'class="m_banner_hide" ';
str = str + 'bgcolor="#FFFCDA" '; // CHANGE BANNER COLOR HERE
str = str + 'align="center" ';
str = str + 'valign="top" >\n';
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'">';
}
if ( this.aNodes[iCtr].bannerType == "FLASH" ){
str = str + '<OBJECT '
str = str + 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
str = str + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'id="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="" '
str = str + 'VIEWASTEXT>'
str = str + '<PARAM NAME=movie VALUE="'+ this.aNodes[iCtr].bannerPath + '">'
str = str + '<PARAM NAME=quality VALUE=high>'
str = str + '<PARAM NAME=bgcolor VALUE=#FFFCDA>'
str = str + '<EMBED ';
str = str + 'src="'+this.aNodes[iCtr].bannerPath+'" '
str = str + 'quality=high '
// str = str + 'bgcolor=#FFFCDA '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'NAME="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="center" '
str = str + 'TYPE="application/x-shockwave-flash" '
str = str + 'PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">'
str = str + '</EMBED>'
str = str + '</OBJECT>'
}else if ( this.aNodes[iCtr].bannerType == "IMAGE" ){
str = str + '<img src="'+this.aNodes[iCtr].bannerPath+'" ';
str = str + 'border="0" ';
str = str + 'height="'+this.aNodes[iCtr].height+'" ';
str = str + 'width="'+this.aNodes[iCtr].width+'">';
}
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '</a>';
}
str += '</span>';
}
return str;
};
// START THE BANNER ROTATION
Banner.prototype.start = function(){
this.changeBanner();
var thisBannerObj = this.obj;
// CURRENT BANNER IS ALREADY INCREMENTED IN cahngeBanner() FUNCTION
setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);
}
// CHANGE BANNER
Banner.prototype.changeBanner = function(){
var thisBanner;
var prevBanner = -1;
if (this.currentBanner < this.aNodes.length ){
thisBanner = this.currentBanner;
if (this.aNodes.length > 1){
if ( thisBanner > 0 ){
prevBanner = thisBanner - 1;
}else{
prevBanner = this.aNodes.length-1;
}
}
if (this.currentBanner < this.aNodes.length - 1){
this.currentBanner = this.currentBanner + 1;
}else{
this.currentBanner = 0;
}
}
if (prevBanner >= 0){
document.getElementById(this.aNodes[prevBanner].name).className = "m_banner_hide";
}
document.getElementById(this.aNodes[thisBanner].name).className = "m_banner_show";
}
mBanner.css
mBanner.html [Here´s where I´d like to be able to specify bgcolor for each separate .swf]
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Flash and Image Banner</TITLE>
<META NAME="Generator" CONTENT="TextPad 4.0">
<META NAME="Author" CONTENT="Manish Kumar Namdeo">
<META NAME="Keywords" CONTENT="Banner Flash Image">
<META NAME="Description" CONTENT="Banner for rotating images and flash files">
<link rel="StyleSheet" href="mBanner.css" type="text/css" />
<script type="text/javascript" src="mBanner.js"></script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<table width="100%">
<tr>
<td colspan="3">
<script language="javascript">
banner1 = new Banner('banner1');
banner1.add("FLASH", "banners/1.swf", 15, 100, 500,"mBanner.htm");
banner1.add("FLASH", "banners/2.swf", 7, 100, 500,"");
banner1.add("FLASH", "banners/3.swf", 9, 100, 500,"mBanner.htm");
banner1.add("FLASH", "banners/4.swf", 7, 100, 500,"");
banner1.add("FLASH", "banners/5.swf", 9, 100, 500,"mBanner.htm");
document.write(banner1);
banner1.start();
</script>
</td>
</tr>
<tr>
<td>
<script language="javascript">
banner2 = new Banner('banner2');
banner2.add("IMAGE", "banners/1.jpg", 2, 500, 100,"");
banner2.add("IMAGE", "banners/3.jpg", 1, 500, 100,"");
banner2.add("IMAGE", "banners/4.jpg", 2, 500, 100,"");
banner2.add("IMAGE", "banners/5.jpg", 1, 500, 100,"");
banner2.add("IMAGE", "banners/6.jpg", 2, 500, 100,"");
banner2.add("IMAGE", "banners/7.jpg", 1, 500, 100,"");
document.write(banner2);
banner2.start();
</script>
</td>
<td>
Middle Column
</td>
<td>
<script language="javascript">
banner3 = new Banner('banner3');
banner3.add("IMAGE", "banners/3.jpg", 2, 500, 100,"mBanner.htm");
banner3.add("FLASH", "banners/1.swf", 1, 500, 100,"mBanner.htm");
banner3.add("IMAGE", "banners/1.jpg", 4, 500, 100,"mBanner.htm");
banner3.add("FLASH", "banners/2.swf", 3, 500, 100,"mBanner.htm");
banner3.add("IMAGE", "banners/2.jpg", 2, 500, 100,"mBanner.htm");
banner3.add("FLASH", "banners/3.swf", 5, 500, 100,"mBanner.htm");
document.write(banner3);
banner3.start();
</script>
</td>
</tr>
</table>
<script language="javascript">
</script>
<script language="javascript">
</script>
</BODY>
</HTML>
Last edited by Christian; 06-08-06 at 02:02 PM .
Reason: hehehe, beat ya to it TwoD :D, Please remember to use the [CODE] tags when posting code.
06-08-06, 03:53 PM
Community VIP
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
Code:
/////////////////////////////////
// File Name: mBanner.js //
// By: Manish Kumar Namdeo //
/////////////////////////////////
// Modified by: //
// Henrik Danielsson 06-08-06//
//////////////////////////////
// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink, bgColor ) {
this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink, bgColor );
};
// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink, bgColor ) {
this.name = name;
this.bannerType = bannerType;
this.bannerPath = bannerPath;
this.bannerDuration = bannerDuration;
this.height = height
this.width = width;
this.hyperlink = hyperlink;
this.bgColor = bgColor;
// alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink + "|" +bgColor );
};
// Outputs the banner to the page
Banner.prototype.toString = function() {
var str = ""
for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
str = str + '<span name="'+this.aNodes[iCtr].name+'" '
str = str + 'id="'+this.aNodes[iCtr].name+'" ';
str = str + 'class="m_banner_hide" ';
str = str + 'bgcolor='+this.aNodes[iCtr].bgColor+' '; // CHANGE BANNER COLOR HERE
str = str + 'align="center" ';
str = str + 'valign="top" >\n';
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'">';
}
...
banner1.add("FLASH", "banners/1.swf", 15, 100, 500,"mBanner.htm","#FF0000" );
Bold areas are additions to the code.
Untested code, but I think the changes are enough to do the trick.
06-09-06, 12:01 AM
Newbie Coder
Join Date: Jun 2006
Location: Sweden
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
ThanX alot!
I can´t tell you how thankful I am!
Is it also possible to modify so that it´s not always the first banner that is first in the list, but still it will show. What I mean is that if I have 1.swf, 2.swf, 3.swf i.e then I might want that 2.swf sometimes shows before 1.swf when you enter the page, and next time someone enter the page it is 3.swf that comes first?
Hope you get what I´m trying to explain.
However I´m som greatful for you helping me out!
Thanks also to moderator who edited my newbie post (forgot to put the code in code brackets. Sorry for that
06-09-06, 08:39 AM
Newbie Coder
Join Date: Jun 2006
Location: Sweden
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Error
Unfortunately I get an error message on row 21 that Banner is undefined.
Can you see what´s possibly wrong??
My code:
Code:
/////////////////////////////////
// File Name: mBanner.js //
// By: Manish Kumar Namdeo //
/////////////////////////////////
// Modified by: //
// Henrik Danielsson 06-08-06//
//////////////////////////////
// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink, bgColor ) {
this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink, bgColor );
};
// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink, bgColor ) {
this.name = name;
this.bannerType = bannerType;
this.bannerPath = bannerPath;
this.bannerDuration = bannerDuration;
this.height = height
this.width = width;
this.hyperlink = hyperlink;
this.bgColor = bgColor;
// alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink + "|" +bgColor );
};
// Outputs the banner to the page
Banner.prototype.toString = function() {
var str = ""
for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
str = str + '<span name="'+this.aNodes[iCtr].name+'" '
str = str + 'id="'+this.aNodes[iCtr].name+'" ';
str = str + 'class="m_banner_hide" ';
str = str + 'bgcolor='+this.aNodes[iCtr].bgColor+ ' '; // CHANGE BANNER COLOR HERE
str = str + 'align="center" ';
str = str + 'valign="top" >\n';
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'">';
}
if ( this.aNodes[iCtr].bannerType == "FLASH" ){
str = str + '<OBJECT '
str = str + 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
str = str + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'id="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="" '
str = str + 'VIEWASTEXT>'
str = str + '<PARAM NAME=movie VALUE="'+ this.aNodes[iCtr].bannerPath + '">'
str = str + '<PARAM NAME=quality VALUE=high>'
str = str + '<PARAM NAME=bgcolor VALUE=#FFFFFF>'
str = str + '<EMBED ';
str = str + 'src="'+this.aNodes[iCtr].bannerPath+'" '
str = str + 'quality=high '
// str = str + 'bgcolor=#FFFCDA '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'NAME="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="center" '
str = str + 'TYPE="application/x-shockwave-flash" '
str = str + 'PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">'
str = str + '</EMBED>'
str = str + '</OBJECT>'
}else if ( this.aNodes[iCtr].bannerType == "IMAGE" ){
str = str + '<img src="'+this.aNodes[iCtr].bannerPath+'" ';
str = str + 'border="0" ';
str = str + 'height="'+this.aNodes[iCtr].height+'" ';
str = str + 'width="'+this.aNodes[iCtr].width+'">';
}
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '</a>';
}
str += '</span>';
}
return str;
};
// START THE BANNER ROTATION
Banner.prototype.start = function(){
this.changeBanner();
var thisBannerObj = this.obj;
// CURRENT BANNER IS ALREADY INCREMENTED IN cahngeBanner() FUNCTION
setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);
}
// CHANGE BANNER
Banner.prototype.changeBanner = function(){
var thisBanner;
var prevBanner = -1;
if (this.currentBanner < this.aNodes.length ){
thisBanner = this.currentBanner;
if (this.aNodes.length > 1){
if ( thisBanner > 0 ){
prevBanner = thisBanner - 1;
}else{
prevBanner = this.aNodes.length-1;
}
}
if (this.currentBanner < this.aNodes.length - 1){
this.currentBanner = this.currentBanner + 1;
}else{
this.currentBanner = 0;
}
}
if (prevBanner >= 0){
document.getElementById(this.aNodes[prevBanner].name).className = "m_banner_hide";
}
document.getElementById(this.aNodes[thisBanner].name).className = "m_banner_show";
}
mBanner.htm
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Flash and Image Banner</TITLE>
<META NAME="Generator" CONTENT="TextPad 4.0">
<META NAME="Author" CONTENT="Manish Kumar Namdeo">
<META NAME="Keywords" CONTENT="Banner Flash Image">
<META NAME="Description" CONTENT="Banner for rotating images and flash files">
<link rel="StyleSheet" href="mBanner.css" type="text/css" />
<script type="text/javascript" src="mBanner.js"></script>
</HEAD>
<BODY BGCOLOR="#e4e4e4">
<table width="100%">
<tr>
<td colspan="3">
<script language="javascript">
banner1 = new Banner('banner1');
banner1.add("FLASH", "banners/1.swf", 15, 90, 183,"mBanner.htm");
banner1.add("FLASH", "banners/2.swf", 7, 90, 183,"", "#ffffff");
banner1.add("FLASH", "banners/3.jpg", 9, 90, 183,"manish.htm", "#000000");
banner1.add("FLASH", "banners/4.swf", 7, 90, 183,"http://www.cnn.com", "#e4e4e4");
banner1.add("FLASH", "banners/5.gif", 9, 90, 183,"http://www.google.com");
document.write(banner1);
banner1.start();
</script>
</td>
</tr>
<tr>
<td>
</td>
<td>
Middle Column
</td>
<td>
</td>
</tr>
</table>
<script language="javascript">
</script>
<script language="javascript">
</script>
</BODY>
</HTML>
Last edited by Blues; 06-09-06 at 08:42 AM .
06-09-06, 05:55 PM
Community VIP
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
You need to specify the bgColor argument (in the banner1.add rows) for each one of the banners (Flash and normal) since it doesn't use a default value if nothing is defined.
06-10-06, 05:19 AM
Newbie Coder
Join Date: Jun 2006
Location: Sweden
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Still error
I think that I´ve done just what you´ve described, but I still get the same error message - that Banner is undefined and niether of the banners are visible on the page.
My code for
mBanner.html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Flash and Image Banner</TITLE>
<META NAME="Generator" CONTENT="TextPad 4.0">
<META NAME="Author" CONTENT="Manish Kumar Namdeo">
<META NAME="Keywords" CONTENT="Banner Flash Image">
<META NAME="Description" CONTENT="Banner for rotating images and flash files">
<link rel="StyleSheet" href="mBanner.css" type="text/css" />
<script type="text/javascript" src="mBanner.js"></script>
</HEAD>
<BODY BGCOLOR="#e4e4e4">
<table width="100%">
<tr>
<td colspan="3">
<script language="javascript">
banner1 = new Banner('banner1');
banner1.add("FLASH", "banners/1.swf", 15, 90, 183, "http://www.google.com/", "#e4e4e4 ");
banner1.add("FLASH", "banners/2.swf", 15, 90, 183, "http://www.google.com/", "#ffffff ");
banner1.add("FLASH", "banners/3.swf", 15, 90, 183, "http://www.google.com/", "#000000 ");
banner1.add("FLASH", "banners/4.swf", 15, 90, 183, "http://www.google.com/", "#ff0000 ");
banner1.add("FLASH", "banners/5.swf", 15, 90, 183, "http://www.google.com/", "#999999 ");
document.write(banner1);
banner1.start();
</script>
</td>
</tr>
<tr>
<td>
</td>
<td>
Middle Column
</td>
<td>
</td>
</tr>
</table>
</BODY>
</HTML>
06-12-06, 12:36 AM
Community VIP
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
I noticed now that you left out this part in the script:
and maybe some more.
Note that I only posted the bits where I made changes, the rest of the code should remain intact.
The part above defines the object in which all data about the banner rotator resides.
The function definitions beginning with Banner.prototype all add a method to all "instances" of this object, and without the object itself those additions will fail.
06-15-06, 06:51 PM
Newbie Coder
Join Date: Jun 2006
Location: Sweden
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
ThanX
TwoD
Appreciate your help alot!!
11-27-06, 03:49 PM
New Member
Join Date: Nov 2006
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
I would like to use this script but do not want it to continually rotate the banners. I would rather have the banners just rotate when the page is refreshed. This seems like it should be simple enough but I am a total newbie and would greatly appreciate any help on this!
11-30-06, 10:26 AM
New Member
Join Date: Nov 2006
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
You can delete the post above. I can't figure out how to do it with your forum software.
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Thread Tools
Display Modes
Linear Mode
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off