Javascript: div-container zeitweise anzeigen

[Steffen187]

Hallo Community-Mitlgieder,
ich versuche mich gerade daran, mit JavaScript mehrere div-Container ein- und ausblenden zu lassen.
Ich habe z.B. 3 Container mit allem möglichen Inhalt. Diese sollen jetzt hintereinander angezeigt und wieder ausgeblendet werden.
Folgendes Script habe ich schon gefunden:
Code:

   <script type="text/javascript">  
/* *****  
 * User defined fade objects and messages  
 *  
 * These messages are used in fades triggered by mouseovers and  
 * mouseouts on table cells.  They are the simplest type of fade and  
 * require no extra Javascript code.  
 */  
var fader = new Array();  
  
fader[0] = new fadeObject('fade0', 'dddddd', '000000', 20, 20);  
fader[0].msg[0] = "This is an optional default message; the fade object on the right side has no default.  Mouseover each topic to make quotes fade in and out.";  
fader[0].msg[1] = "Nowhere can a man find a quieter or more untroubled retreat than in his own soul.<br />- Marcus Aurelius";  
fader[0].msg[2] = "Feeding the starving poor only increases their number.<br />- Ben Bova";  
fader[0].msg[3] = "The limits of tyrants are prescribed by the endurance of those whom they oppose.<br />- Frederick Douglass";  
fader[0].msg[4] = "The foolish man seeks happiness in the distance, the wise grows it under his feet.<br />- James Oppenheim";  
  
fader[1] = new fadeObject('fade1', 'bbbbbb', '000000', 20, 20);  
fader[1].msg[1] = "Success is relative. It is what we can make of the mess we have made of things.<br />- T.S. Eliot";  
fader[1].msg[2] = "We have two ears and one mouth so we may listen more and talk the less.<br />- Epictetus";  
fader[1].msg[3] = "It is better to be violent, if there is violence in our hearts, than to put on the cloak of nonviolence to cover impotence.<br />- Mahatma Gandhi";  
fader[1].msg[4] = "Don't part with your illusions. When they are gone you may still exist, but you have ceased to live.<br />- Mark Twain";  
  
  
  
/* *****  
 * The code below describes how to make a throbbing or automatic fade  
 * sequence of messages.  It is important to note that this function is  
 * NOT part of the Buffered Text-Fade Effect, but merely an example of  
 * how it can be used.  In this example, the throb() function controls  
 * the commands which are sent to the fade engine; it is called  
 * repeatedly at set time intervals rather than using mouseover events  
 * as triggers.  
 *  
 * Notes:  
 * - A global array "hash" is used to keep track of where each  
 *   animation is currently in the sequence.  
 * - The list of messages defined in the fader *must* start at one (1)  
 *   and count upwards without skipping any integers.  
 * - The third line of the throb() function controls how fast  
 *   commands get sent to the fade engine.  It waits only 100 milli-  
 *   seconds when fading out, but 5000 milliseconds (5 seconds) when  
 *   fading in; this means the message will remain visible for about 5  
 *   seconds before fading out again.  
 *  
 * Other types of fade animation are possible simply by designing  
 * different ways to control the fade-ins and fade-outs!  
 */  
var hash = new Array();  
function throb(item) {  
  
  // If the hash array does not have an entry for this item, initialise it at 2  
  if (!hash[item]) hash[item] = 2;  
  
  // Send a fade command, using the hash array to tell us what parameters we should use  
  fader[item].fade(Math.floor(hash[item] / 2), !(hash[item] % 2));  
  
  // Call this function again for this same item after a certain amount of time  
  setTimeout(function() { throb(item); }, (hash[item] % 2) ? 100 : 5000);  
  
  // If we have exceeded the number of messages in this fader, start over again at 2  
  if (++hash[item] > fader[item].msg.length * 2 - 1) hash[item] = 2;  
}  
  
fader[2] = new fadeObject('fade2', 'bbbbbb', '000000', 30, 30);  
fader[2].msg[1] = "<table border='1'><tr><td>Testzeile</td></tr></table>";  
fader[2].msg[2] = "By designing your own looping functions...";  
fader[2].msg[3] = "You can co-ordinate many separate fade effects";  
fader[2].msg[4] = "Including a simple list of messages like this one";  
fader[2].msg[5] = "View the source to find out how!";  
  
// Start this fader  
setTimeout(function() { throb(2); }, 1000);  
  </script>

<div id="fade2"></div>

In dem untere Teil kann ich den zu wechselnden Text eingeben:
Code:

fader[2] = new fadeObject('fade2', 'bbbbbb', '000000', 30, 30);  
fader[2].msg[1] = "<table border='1'><tr><td>Testzeile</td></tr></table>";  
fader[2].msg[2] = "By designing your own looping functions...";  
fader[2].msg[3] = "You can co-ordinate many separate fade effects";  
fader[2].msg[4] = "Including a simple list of messages like this one";  
fader[2].msg[5] = "View the source to find out how!";

So wie hier funktioniert es auch! Ich habe aber Code, der über mehrere Zeilen hinweg geht und sobald ich einen Zeilenumbruch hereinbringe funktioniert das Script nicht mehr.
Z.B. so:

fader[2] = new fadeObject('fade2', 'bbbbbb', '000000', 30, 30);  
fader[2].msg[1] = "<table border='1'>  
<tr><td>Testzeile</td></tr>  
</table>";  
fader[2].msg[2] = "By designing your own looping functions...";  
fader[2].msg[3] = "You can co-ordinate many separate fade effects";  
fader[2].msg[4] = "Including a simple list of messages like this one";  
fader[2].msg[5] = "View the source to find out how!";

Da mein Code durch PHP ausgegeben wird, ist es nicht möglich, diesen in eine Zeile zu bringen.

Was ich mir gedacht habe:
Ich habe mehrere div-Container in meinem HTML-Dokument, in denen mein Code enthalten ist. Jetzt sollen diese nacheinander ein- und wieder ausgeblendet werden. Das sollte dann in einer Dauerschleifen erfolgen.

Mit JavaScript habe ich leider noch sehr wenig Erfahrung!

Vorweg schon vielen Dank!

Grüße Steffen187

[henman]

hallo Steffen187,

So wie hier funktioniert es auch! Ich habe aber Code, der über mehrere Zeilen hinweg geht und sobald ich einen Zeilenumbruch hereinbringe funktioniert das Script nicht mehr.

Da mein Code durch PHP ausgegeben wird, ist es nicht möglich, diesen in eine Zeile zu bringen.

Warum nicht? Mach ihn einzeilig, indem du die Zeilenumbrüche entfernst. str_replace in PHP sollte dir helfen

grüße,
henman

[Steffen187]

hallo Steffen187,

So wie hier funktioniert es auch! Ich habe aber Code, der über mehrere Zeilen hinweg geht und sobald ich einen Zeilenumbruch hereinbringe funktioniert das Script nicht mehr.

Da mein Code durch PHP ausgegeben wird, ist es nicht möglich, diesen in eine Zeile zu bringen.

Warum nicht? Mach ihn einzeilig, indem du die Zeilenumbrüche entfernst. str_replace in PHP sollte dir helfen

grüße,
henman

Das ist eigentlich eine gute Idee.
Aber aufgrund meines gesamten Codes ist das nicht möglich!

[ChrisB]

Hi,

Warum nicht? Mach ihn einzeilig, indem du die Zeilenumbrüche entfernst. str_replace in PHP sollte dir helfen

Das ist eigentlich eine gute Idee.
Aber aufgrund meines gesamten Codes ist das nicht möglich!

Warum sollte das nicht möglich sein?

Die andere Alternative ist das Setzen eines Backslash ans Ende jeder Zeile, auch damit kann man über Zeilengrenzen hinweg gehende Textliterale in JavaScript notieren. Erfordert aber wohl ebenso eine Behandlung des Textes mit str_replace.

MfG ChrisB

[Steffen187]

Hi,

Warum nicht? Mach ihn einzeilig, indem du die Zeilenumbrüche entfernst. str_replace in PHP sollte dir helfen

Das ist eigentlich eine gute Idee.
Aber aufgrund meines gesamten Codes ist das nicht möglich!

Warum sollte das nicht möglich sein?

Die andere Alternative ist das Setzen eines Backslash ans Ende jeder Zeile, auch damit kann man über Zeilengrenzen hinweg gehende Textliterale in JavaScript notieren. Erfordert aber wohl ebenso eine Behandlung des Textes mit str_replace.

MfG ChrisB

Danke für die Antwort!
Sobald ich etwas mehr Zeit habe, werde ich mich nochmals damit beschäftigen und ihren Vorschlag mit einbringen.
Das Programm musste so schnell wie möglich fertig werden... Danach habe ich ja dann genug Zeit, es zu verbessern.

[Felix Riesterer]

Lieber Steffen187,

ich habe den Eindruck, dass gefühlte 90% Deines JavaScript-Codes zusammenkopiert und ausprobiert, aber nur zu gefühlten 10% auch wirklich verstanden sind.

Wenn Du wissen willst, was Du tust, dann kannst Du das lernen.

mit JavaScript mehrere div-Container ein- und ausblenden zu lassen.

Der verlinkte Artikel gibt Dir das notwendige Hintergrundwissen, um dieses Ziel zu erreichen.

Mit JavaScript habe ich leider noch sehr wenig Erfahrung!

Dann ist der Artikel sicherlich genau das Richtige für Dich. Viel Erfolg! Und bei Fragen ist das Forum ja auch noch da...

Liebe Grüße,

Felix Riesterer.

[Steffen187]

Hallo Felix Riesterer,
vielen Dank für deine Antwort!
Ich werde mir die Beschreibung auf jeden Fall anschauen. Habe nur gerade wenig Zeit.

Viele Grüße Steffen