Scroller ohne Javascript

[marcelguenther]

Hallo an alle,

ich brauche für eine Website einen Textscroller in der Art wie dieser hier.
http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm

Da ich diesen Scroller allerdings über eine Schleife mit Daten fülle, brauche ich diesen Scroller mehr als einmal auf der Seite. Und genau hier ist mein Problem. Dadurch das der Scroller mehrere male mit den gleichen Variablen aufgerufen wird, startet immer nur der erste, alle folgenden zeigen die Daten nur an, bewegen sich aber nicht.

Gibt es oder kann man solch einen Scroller auch ohne Javascript realisieren bzw. wie sollt man das Script umschreiben um alle Scroller auf der Seite zum bewegen zubringen!

Noch eine kurze Erklärung zur Seite:
In den Scrollern sollen Produkbewertungen laufen, welche passend zum jeweiligen Produkt aus einer DB gezogen werden. Auf der Seite sollen mehrere Produkte dargestellt werden (bzw. in unserem speziellen Fall Hersteller) und darunter dann der jeweilige Scroller mit den jewiligen Bewertungen!

Bin für jeden Denkanstoss dankbar.

Marcel

 

[DeluXe]

Gibt es oder kann man solch einen Scroller auch ohne Javascript realisieren

Nein. Ausser mit Kandidaten wie z. B. Flash, aber das macht es nicht einfacher und ist für ein solches Vorhaben übertrieben.

bzw. wie sollt man das Script umschreiben um alle Scroller auf der Seite zum bewegen zubringen!

Ohne das Script zu kennen kann man da keine aussagekräftige Antwort geben.
Möglich ist es auf jeden Fall - je nach Skript mit mehr oder weniger Aufwand.

 

[marcelguenther]

<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 these pointless messages. You get the idea behind this script.</a>";
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>

Das hier ist der Code des Scripts, welches auch läuft, aber eben immer nur einmal. Es muß aber mehrmals, in meinem Fall 5x, auf einer Seite laufen aber immer mit anderen Daten! Die Daten sind nicht das Problem, aber die Dinger ALLE zum laufen zu bringen! Und leider habe ich von JavaScript auch wenig bis gar keine Ahnung. :-(

Danke für jede Hilfe.
Marcel

 

[Maik]

Hi,

dann müsstest Du dieses Script in fünffacher Ausfertigung nutzen, und darin jeweils den ID-Bezeichner, die Variablen-Namen, usw. umbenennen, damit sie sich in einem Dokument nicht ins Gehege kommen.

mfg Maik