Here is my html page :
<html>
<head>
<title></title>
<head>
<SCRIPT TYPE="text/JavaScript" SRC="Scroller.js"></SCRIPT>
</head>
<body>
<script language="javascript">
var ticker = new Scroller('absolute',50,100,500,250);
ticker.SetBorder(true,1,'#AAAAFF','solid');
ticker.SetBackgroundColor(true,'#EEEEFF');
ticker.AddFeed("this is a simple test 1");
ticker.AddFeed("another stupid test");
ticker.AddFeed("a very very long text, just to show the differences with the others");
ticker.Start();
</script>
</body>
</html>
and here is my .js code
var output_scroller="";
var enumScrollerType = new Array("fading","scrolling");
// constructor of Scroller class
function Scroller(strPosition,iLeft, iTop, iWidth, iHeight)
{
this.timer = 0;
this.Feed = new Array();
this.ScrollerType = enumScrollerType[0]; // fading
this.iFeedAmount=0;
this.Position = strPosition;
this.Left = iLeft;
this.Top = iTop;
this.Width = iWidth;
this.Height = iHeight;
this.Scrolling = 'no';
this.BrowserType = this.DetectBrowserType();
this.BrowserVersion = this.DetectBrowserVersion();
}
Scroller.prototype.DetectBrowserType = function()
{
if (navigator.appName == "Microsoft Internet Explorer")
{
BType = "IE";
}
else if (navigator.appName == "Netscape")
{
BType="NN";
}
return(BType);
}
Scroller.prototype.DetectBrowserVersion = function()
{
if(parseInt(navigator.appVersion) == "5")
{
BVersion ="5";
}
else if(parseInt(navigator.appVersion) == "4")
{
BVersion ="4";
}
else if(parseInt(navigator.appVersion) == "3")
{
BVersion ="3";
}
return (BVersion);
}
// Add article to Scroller
Scroller.prototype.AddFeed = function(article)
{
// alert(this.Feed.length);
this.Feed[this.Feed.length] = article;
}
// Set Border to Object
Scroller.prototype.SetBorder = function(bBorder, iBorderWidth, strBorderColor, strBorderLine)
{
if(bBorder)
{
this.Border = true;
this.BorderWidth = iBorderWidth;
this.BorderColor = strBorderColor;
this.BorderLine = strBorderLine;
}
else
{
this.Border = false;
this.BorderWidth = 0;
this.BorderColor = 'FFFFFF';
this.BorderLine = 'none';
}
}
// start the scrolling
Scroller.prototype.Start = function()
{
// fading mode
if(this.ScrollerType == "fading")
{
if(this.Feed.length>0)
{
this.Render(); // first element
for(i=0;i<this.Feed.length;i++)
{
var divid = "divfeed"+i;
this.FadeInOut(divid,2000,2000,2000);
if(i==this.Feed.length-1)// last article
{
i=0;
}
// alert(divid);
}
}
}
// scrolling mode
else
{
alert('scrolling');
}
}
// Render the object appearance
Scroller.prototype.Render = function()
{
output_scroller += "<div id='FirstDiv'" +
"style='" +
"position:" + this.Position +
";left:" + this.Left +
";top:" + this.Top +
";width:" + this.Width +
";height:" + this.Height +
";border-color:" + this.BorderColor +
";border-width:" + this.BorderWidth + "px" +
";border-style:" + this.BorderLine +
";background-color:" + this.BackgroundColor +
";' SCROLLING='" + this.Scrolling + "'>";
for (i=0;i<this.Feed.length;i++)
{
output_scroller += "<div id='divfeed"+ i + "' " +
"style='" +
"background-color:#BBBBEE;" +
"margin:3px;" +
"width:" + (this.Width-6) + "px;" +
"height:" + (this.Height-6) + "px;" +
"opacity:0;" +
"filter:alpha(opacity=0);" +
"MozOpacity:0;" +
"KhtmlOpacity:0;" +
"display:none;" +
"' >" +
this.Feed
+
"</div>";
}
output_scroller += "</div>";
document.write(output_scroller);
// alert(output_scroller);
}
Scroller.prototype.FadeInOut = function(id, TimeFadeIn, TimeFadeOut, TimeToPause)
{
var speedIn = Math.round(TimeFadeIn / 100);
var speedOut = Math.round(TimeFadeOut / 100);
var pause = Math.round(TimeToPause / 100);
// alert('FADEINOUT - ID : '+id);
// alert("START : "+id+".style.display (before) : " + document.getElementById(id).style.display);
var objdiv = document.getElementById(id);
objdiv.style.display='';
// alert("START : "+id+".style.display (after) : " + document.getElementById(id).style.display);
changeOpac(50,id);
/* for(i = 0; i <= 100; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "');",(this.timer * speedIn));
this.timer++;
}
// alert('FADEINOUT : IN - end');
for(i = 0; i <= 100; i++)
{
setTimeout("",(this.timer * pause));
this.timer++;
}
for(i = 100; i >= 0; i--)
{
setTimeout("changeOpac(" + i + "," + id + ")",(this.timer * speedOut));
this.timer++;
}
*/
objdiv.style.display='none';
// alert("START : "+id+".style.display (end of function) : " + document.getElementById(id).style.display);
}
//change the opacity for different browsers
//Scroller.prototype.changeOpac = function(opacity, id)
function changeOpac(opacity, ident)
{
var object = document.getElementById(ident).style;
object.Opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
// alert("OPACITY for "+ document.getElementById(ident).id + " : " + object.opacity);
}
Scroller.prototype.opacity = function(id, opacStart, opacEnd, millisec)
{
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
// alert('OPACITY : speed = '+ speed);
// alert('Start : ' + opacStart + "\n" + 'End : ' + opacEnd);
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd)
{
for(i = opacStart; i >= opacEnd; i--)
{
setTimeout("this.changeOpac(" + i + ",'" + id + "');",(timer * speed));
timer++;
}
}
else if(opacStart < opacEnd)
{
// alert("id - Start : " +id);
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + "," + id + ")",(timer * speed));
timer++;
}
}
}
Scroller.prototype.blendimage = function(divid, imageid, imagefile, millisec)
{
var speed = Math.round(millisec / 100);
var timer = 0;
//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = imagefile;
//fade in image
for(i = 0; i <= 100; i++)
{
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
// set tje background color of object
Scroller.prototype.SetBackgroundColor = function(bBGColor, strBGColor)
{
if(bBGColor)
{
this.BackgroundColor = strBGColor;
}
else
{
this.BackgroundColor = 'FFFFFF';
}
}
