fading effect for ProHTML Ticker [Archive]

View Full Version : fading effect for ProHTML Ticker

dukevn

07-16-2008, 03:34 AM

1) Script Title: ProHTML Ticker

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/prohtmlticker.htm

3) Describe problem:

I am playing around with ProHTML ticker, and because its display is boring, then I want to add fading effect to it. The fading effect I applied from is from Fading scroller (http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm), and here is the modified script that I finally come up with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ProHTML Ticker</title>
<style type="text/css">

#tickersubject{
width: 250px;
font-weight: bold;
}

.tickercontainer{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #cccccc;
padding: 3px;
display:block;
}

</style>

<script type="text/javascript">

var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step

var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
var faderdelay=0;
var index=0;

/***********************************************
* ProHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
var enablesubject=1 //enable scroller subject? Set to 0 to hide

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.tickercontainer{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

function linkcolorchange(step){
var obj=document.getElementById("message"+selectedDiv).getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfader(step,obj) {
if(step<=maxsteps) {
obj.style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfader("+step+","+obj+")",stepdelay);
}else{
clearTimeout(fadecounter);
obj.style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
}
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

function contractall(){
var inc=0
while (document.getElementById("message"+inc)){
document.getElementById("message"+inc).style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=document.getElementById("message"+selectedDiv)
contractall()
document.getElementById("tickersubject").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
selectedDivObj.style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
if (fadelinks)
linkcolorchange(1);
colorfader(1,selectedDivObj);
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

function startscroller(){
while (document.getElementById("message"+totalDivs)!=null)
totalDivs++
expandone()
if (!enablesubject)
document.getElementById("tickersubject").style.display="none"
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

</script>
</head>
<body>
<div id="tickersubject"></div>

<div id="message0" class="tickercontainer" subject="What is JavaScript?">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<div id="message1" class="tickercontainer" subject="Java & JavaScript Differences">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.
</div>

<div id="message2" class="tickercontainer" subject="What is DHTML?">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
</body>
</html>
The code runs... OK, but the fading effect still does not show up. I think I get very close to the end, but I can not figure out what errors I made. Anybody helps please!

Thanks,

D.

codeexploiter

07-16-2008, 04:18 AM

dukevn

07-16-2008, 04:44 AM

fadecounter=setTimeout("colorfader("+step+","+obj+")",stepdelay);

Firebug shows an error on the above line and the script doesn't work properly in Firefox 2.0.0.15.

I've changed the above line to the below code and it started to work correctly.

fadecounter=setTimeout(function(){
colorfader(step,obj);
},stepdelay);

Now it works correctly in IE7 and Firefox.

Thank you very much codeexploiter.

While I am glad that the code works fine now, I still do not get the reason. From the original code of Fading Scroller, I just made a tiny chane of colorfade function, and it SHOULD work. But it actually does not. Does that mean the original code (http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm) has error also?

D.

codeexploiter

07-16-2008, 05:41 AM

Does that mean the original code (http://www.dynamicdrive.com/dynamici...fadescroll.htm) has error also?

If you check the original script you can find that the following code calls the colorfade function with only one parameter with a timeout. But in your case you tried to pass an HTML element object into the colorfade function as the second parameter and that neew parameter messed up the thing.

fadecounter=setTimeout("colorfade("+step+")",stepdelay);

Hope this is clear now.

dukevn

07-16-2008, 06:22 AM

I see now. I do not know that parsing the HTML code as the second parameter makes colorfader totally different. I did think that function with either one or two parameter should be the same :)

Anyway, thanks for your explanation. It helps a novice like me learn a lot.

D.

codeexploiter

07-16-2008, 06:48 AM

It is not the problem of colorfader function as a JavaScript function can accept any number of arguments when you call it. If you check the way the following code work

fadecounter=setTimeout("colorfader("+step+","+obj+")",stepdelay);

You are using an object reference as a part of the string concatenation (check the above line) and it seems that that JS engine calls the toString() on the object reference and thus trying to convert the object reference into a string representation.

So to avoid this problem I've used an anonymous function as the first argument of the setTimeout (Check the following line)

fadecounter=setTimeout(function(){
colorfader(step,obj);
},stepdelay);

And called the colorfader function from within the anonymous function. You can see that we are passing two arguments into the colorfader function.

Hope this is clear now.

dukevn

07-16-2008, 02:05 PM

It is not the problem of colorfader function as a JavaScript function can accept any number of arguments when you call it. If you check the way the following code work

fadecounter=setTimeout("colorfader("+step+")",stepdelay);

You are using an object reference as a part of the string concatenation (check the above line) and it seems that that JS engine calls the toString() on the object reference and thus trying to convert the object reference into a string representation.

So to avoid this problem I've used an anonymous function as the first argument of the setTimeout (Check the following line)

fadecounter=setTimeout(function(){
colorfader(step,obj);
},stepdelay);

And called the colorfader function from within the anonymous function. You can see that we are passing two arguments into the colorfader function.

Hope this is clear now.
Oh, so it is the way I call codefader, not the function itself. For string parameters, this way

fadecounter=setTimeout("colorfader("+step+","+obj+")",stepdelay);
works. But for object parameters, I have to use the *correct* way (?):

fadecounter=setTimeout(function(){
colorfader(step,obj);
},stepdelay);
Do I understand it correctly?

Thanks,
D.