Hallo Wolfgang,

Zitat von Wolfgang im Beitrag #1

---

Frage 1:
Wie kann ich das "document.write" in "document.getElementById" umwandeln (<div id="{{yourid:id}}"></div>)? Geht das überhaupt?

---

Zitat von Wolfgang im Beitrag #1

---

Frage 2:
Ist das folgende Script in Ordnung, wenn es nur einmal überlaufend die Schrift wechselt?

---

.color-changer {
	color: #aa0000;
	font-size: 30px;
	font-family: 'Old English Text MT';
 
	/* Verhalten wie DIV */
	display: block;
	text-align: center;
}
.color-changer .colorized {
	color: #000000;
}
 
/* Beispiel für gezielte Anpassungen */
.color-changer:nth-of-type(2) {
	font-style: italic;
	font-size: large;
}
 

$(document).ready(function(){
	var speed   = 150;
	var runOnce = false;
 
	var colorChanger = $('.color-changer');
	$.each(colorChanger, function(index, node){
		var colorized   = $('<span><\/span>').addClass('colorized');
		var text        = $(node).text();
		$(node).prepend(colorized);
 
		var letters = 0;
		var timer = window.setInterval(function(){
			if (letters < text.length) {
				colorized.text(text.slice(0, ++letters));
				$(node)
					.html(text.slice(letters))
					.prepend(colorized)
				;
			}
			else {
				if (runOnce) {
					window.clearInterval(timer);
				}
				else {
					letters = 0;
					$(node).text(text);
				}
			}
		}, speed);
	});
});
 

<span class="color-changer">Der Treffpunkt für Hilfe, Tricks &amp; Tipps</span>
<br />
<span class="color-changer">Hier wird Ihnen geholfen …</span>
 

Hmm, kann das im Moment nicht begutachten, habe hier gerade nur Firefox und Chromium. Wahrscheinlich ist der IE11 zu lahm. Kann das aber so aktuell nicht beurteilen.

In Zeile 15-18 wird zuerst der hintere Teil vom Text und danach sofort der eingefärbte Anfang in die Seite gesetzt. Evtl. reicht es, wenn du den gesamten HTML-Code auf einmal in die Seite eingefügt bekommst, damit keine minimale Verzögerung entstehen kann.

Hallo Wolfgang,

habe das Skript inzwischen mit dem IE11 betrachtet und den Fehler behoben. Die Inhalte werden nun in einem temporären Knoten aufgebaut und danach komplett auf einmal in die Seite hineinkopiert. Ist vielleicht nicht mehr so elegant wie das direkte Einhängen von HTML-Knoten, aber nur so wird der gesamte Inhalt auch wirklich auf einen Schlag übernommen.

Viel Spaß damit!

Super!

Du hast dem span.color-changer die Eigenschaft white-space: nowrap; verpasst, dadurch wird der Text einfach über die nächste Zelle mit dem Lautsprecher weitergeschrieben.
Ist in etwa so, wie bei den pre-Tags, wenn ihr Text länger als das umgebende Element ist.


Das span.willkommen_text brauchst du glaube ich auch nicht. Die nötigen Eigenschaften zur Textformatierung kannst du auch im Selektor .color-changer hinterlegen, wenn du den originalen nicht zu stark abändern möchtest, schreibst du ihn einfach noch ein zweites mal mit den erweiterten Eigenschaften in die Seite rein. CSS erweitert und überschreibt bestehende Eigenschaften ja ggf. völlig automatisch.

Auf die absolute Positionierung kannst du auch verzichten, indem du statt dem span.willkommen_text eine weitere Tabellen-Zelle einfügst. Die erste enthält das Bild mit dem Laptop, die zweite den Color-Changer und die dritte den Lautsprecher. Da du ohnehin eine Tabelle da oben hast, kannst du dir somit die manuelle (und absolute) Positionierung ersparen. Dann richtet sich das alles völlig automatisch und passend aus.

Hallo Wolfgang,

so wie es aussieht, funktioniert das Verlinken an sich schon. Jedoch kommt es wohl auf das Intervall an, in welchem der Text umgefärbt wird. Je schneller die Umfärbung stattfindet, umso weniger Zeit bleibt für einen Klick. Ich vermute, dass während eines Umbau-Schrittes nicht auch noch die Events auf dem ColorChanger abgearbeitet werden können. Mit höher gesetztem Zeit-Intervall klappte auch der Klick bei mir öfter als vorher, da einfach mehr Zeit dafür bleibt.

Letztlich funktioniert bei mir der Klick sogar immer, nachdem der gesamte Text eingefärbt wurde, da zu diesem Zeitpunkt keine Berechnungen mehr für Änderungen durchgeführt werden müssen. Bei dir ist das etwas anders, da du bei dir nicht denselben Quellcode wie in Beitrag #6 eingebaut hast, sondern eine etwas abgeänderte Version. Bei der wird das Skript auch nach vollständiger Umfärbung des Textes immer noch permanent ausgeführt, auch wenn es optisch so aussieht, als würde es nichts mehr tun.

Eine Lösung wäre also, nochmal das korrekte Skript zu übernehmen und runOnce auf true zu setzen. Dann werden deine Klicks spätestens nach der kompletten Umfärbung korrekt registriert. Oder du entfernst die im Moment auftretenden Probleme im Ablauf deines aktuell eingebauten Skripts.


P. S.: Auf die Attribute onmouseover und onmouseout kannst du verzichten, wenn du stattdessen den Pseudo-Selektor :hover verwendest.

Hallo Wolfgang,

mein Skript habe ich nach außen hin abgeschottet geschrieben. Und da im inneren alle verwendeten Variablen auch neu erzeugt werden, denke ich eher nicht, dass sich irgendwelche Variablen stören.

Bei mir läuft der Farbwechsel übrigens auch sofort an. Kann aber schon darauf ankommen, wie schnell die Seite lädt. Es beginnt frühestens, wenn alle HTML-Elemente geladen wurden.

Ich kann leider auch keinen entsprechenden Beitrag mehr finden, ging ja glaube ich irgendwie um eine Navigationsleiste oder so.

So groß sieht das Skript nicht aus und erreichbar ist es auch. Könnte natürlich sein, dass der Server zu lange für eine Antwort braucht und dadurch verzögert. Du könntest es evtl. direkt in Script-Tags in dein Forum herüberkopieren, dann lädt es zusammen mit dem Rest der Seite mit.


EDIT: Im Kommentar sehe ich gerade den Hinweis jQuery v1.9.1+, möglicherweise ein Problem, weil in den Xobor-Foren noch jQuery 1.7.1 eingesetzt wird. Wenn also das Obige nicht wie gewünscht klappt, findest du evtl. noch eine leicht ältere Version der Bibliothek, welche zum jQuery im Forum passt.