Text mouseover for fade scroller

[Jeroen94]

1) Script Title: Fade scroller

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

3) Describe problem: Is it possible to program a text mouseover for the fade scroller (in order to some extra information when one moves with the mouse over the text in the scroller)?

[jscheuer1]

OK, try out this version (includes the pause onmouseover from before):

Demo (http://home.comcast.net/~jscheuer1/side/fade_scroll/demo_pause.htm)

Code:

<script type="text/javascript">

/***********************************************
* Fading Scroller- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var delay = 2000; //set delay between message change (in miliseconds)
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
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
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 fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";
fctitles = [];
fctitles[0] = "What's New?";
fctitles[1] = "Dynamic Drive Recommended!";
fctitles[2] = "You Get the Idea";
closetag='</div>';

var fwidth='150px'; //set scroller width
var fheight='150px'; //set scroller height

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

///No need to edit below this line/////////////////


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if(changecontent.pause){
setTimeout(changecontent, 300);
return;
}
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
document.getElementById("fscroller").title = fctitles[index] || '';
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
var obj=document.getElementById("fscroller").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 colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);

}
}

/*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] + ")");
}

if (ie4||DOM2)
document.write('<div id="fscroller" onmouseover="changecontent.pause=true;" onmouseout="changecontent.pause=false;" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>

Notice the highlighted lines. That's where you configure the mouseover texts.

[Jeroen94]

Thanks, it works perfectly again! :)

But, the mouseover text dissapears after a while. Isn't it possible to let it be visible the whole time, until one moves the mouse out of the scroller?

[Jeroen94]

Oh and something else too: how can I create paragraphes in the mouseover text? The <br> function doesn't work...

For exemple: when I write

fctitles[0] = "What's New?<br>I don't know"; one reads "What's New?<br>I don't know" in the mouseover text.

[jscheuer1]

It's just a title attribute. You can't use HTML. You can use \n to create a new line:


fctitles[1] = "Dynamic Drive\nRecommended!";

And for the same reason (it's just a title), you can't control how long it appears for.

With something like this, shouldn't the main content be in the scroller anyway?

If not, we might want to try incorporating a tooltip script or possibly even a popup content script or popup menu script.

At that rate though, if the real content is in the popup, maybe you don't need a scroller. Perhaps just having keywords in ordinary text on the page would be better triggers for whatever type of popup you decide to use.

[Jeroen94]

The tooltip script seems a very good option, because it doesn't dissapear after a while. Is it possible to fit it in the fade scroller script?

[jscheuer1]

Pick one from here:

http://www.dynamicdrive.com/dynamicindex5/index.html

or elsewhere from around the web.