Fading scroller question.

**tauhui** · 02-28-2012, 03:03 AM

1) Script Title: Fading scroller

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

3) Describe problem: Hi can I add images in the scroller? And how do i link them? I have tried putting image but it makes all the words not shown up. This is the script in my page.

Code:

<script type="text/javascript" src="<?php echo $this->themePath('js/itemupdate1.js')?> "></script>
<!--Only Add In This-->
<script type="text/javascript">
var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
//Add Your Item Pics Here
//If you want to add a content this how you do it fcontent["the last number value of the content"] = "Your Message Here";
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>";
closetag='</div>';
</script>		
<!--End -->
<script type="text/javascript" src="<?php echo $this->themePath('js/itemupdate2.js')?> "></script>

**jscheuer1** · 02-28-2012, 08:45 AM

Where's the image?

Anyways, in this sort of script, as with many, you have to observe proper quoting syntax. You cannot have "" inside "" without escaping them. You could, but it's easier to use single quotes (').

So, this works:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">

/***********************************************
* Fading Scroller- © 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 <img width='126' height='26' src='http://www.dynamicdrive.com/ddincludes/logo.gif'>. You get the idea behind this script.";
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 (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
    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" 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>
</body>
</html>

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**tauhui** · 02-28-2012, 04:35 PM

It works thanks!

Thread: Fading scroller question.

Thread Tools

Search Thread

Fading scroller question.

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions