#1 Text-Effekte von Wolfgang 20.07.2014 23:05

avatar

Hallo Florian,
Jürgen hat bei mir ein interessantes Script mit einem Text-Effekt gepostet.
Hier wird ein Text mit eine anderen Farbe überlaufend angezeigt.
Ich habe es soweit umgestellt, dass über "var" die Schrift formatiert werden kann.

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<script language="javascript" type="text/javascript">
var yourtext="Der Treffpunkt für Hilfe, Tricks & Tipps";
var messLength=yourtext.length;
var face_text="Old English Text MT";
var size_text="30px";
var align_text="center";
var initcolor="#aa0000";
var yourcolor="#000000";
var speed=150;
var i;
var j=0;
 
document.write("<div style='color:"+initcolor+";font-family:"+face_text+";font-size:"+size_text+";text-align:"+align_text+";'>");
for (i=0;i<messLength;i++){
document.write("<span id='yourid"+i+"'>"+yourtext.charAt(i)+"</span>");
}
document.write("</div>");
 
function colorit(){
var idd="yourid"+j;
if (j<messLength){
document.getElementById(idd).style.color=yourcolor;j++
}
else {
j=0;
for (i=0;i<messLength;i++){
var newidd="yourid"+i;
document.getElementById(newidd).style.color=initcolor;
}
}
}
 
function doit(){
timer=setInterval("colorit()",speed)
}
window.onload=doit;
</script>
 




Frage 2:

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<script language="javascript" type="text/javascript">
var yourtext="Der Treffpunkt für Hilfe, Tricks & Tipps";
var messLength=yourtext.length;
var face_text="Old English Text MT";
var size_text="30px";
var align_text="center";
var initcolor="#aa0000";
var yourcolor="#000000";
var speed=150;
var i;
var j=0;
 
document.write("<div style='color:"+initcolor+";font-family:"+face_text+";font-size:"+size_text+";text-align:"+align_text+";'>");
for (i=0;i<messLength;i++){
document.write("<span id='yourid"+i+"'>"+yourtext.charAt(i)+"</span>");
}
document.write("</div>");
 
function colorit(){
var idd="yourid"+j;
if (j<messLength){
document.getElementById(idd).style.color=yourcolor;j++
}
}
 
function doit(){
timer=setInterval("colorit()",speed)
}
window.onload=doit;
</script>
 







Danke schon mal im Voraus

Gruß
Wolfgang

#2 RE: Text-Effekte von florian-zier 21.07.2014 23:25

avatar

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?

Ja das geht, bisher ist mir zumindest noch nichts untergekommen, das nicht ohne document.write hätte umgeschrieben werden können. Um es zu ersetzen, muss das Skript auf bereits vorhandenen HTML-Tags arbeiten oder neue erzeugen und in die Seite einhängen. Mit {{yourid:id}} wird es erstmal nicht funktionieren, da du nach Auslieferung der HTML-Seite keine Template-Sprache zur Verfügung hast (diese Syntax würde glaube ich auch mit dem Xobor-Template nicht funktionieren).


Zitat von Wolfgang im Beitrag #1
Frage 2:
Ist das folgende Script in Ordnung, wenn es nur einmal überlaufend die Schrift wechselt?

Es funktioniert zumindest schonmal. Schöner wäre es noch, wenn der ständige Aufruf von colorit() noch mit window.clearInterval(timer); noch beendet werden würde. Aktuell wird es nach wie vor aufgerufen, auch wenn es dann letztlich nichts mehr am Text ändert. Die Variablen könnten auch noch Probleme mit anderen Skripts verursachen, welche die gleichen Namen verwenden.





Ich habe jetzt mal eine funktional identisches Skript zusammengebastelt. Dabei werden Style, Skript und HTML getrennt. Du kannst es also auf verschiedene Dateien auftrennen oder zumindest CSS und Skript zwischen die Head-Tags packen. Der gewünschte Text schreibst du dann einfach dorthin, wo du ihn haben möchtest. Du solltest dabei nur beachten, dass du ihn in ein HTML-Tag mit der CSS-Klasse color-changer packst. Darin wird dann ein SPAN mit der Klasse colorized generiert, dem du in CSS eine passende Farbe verpassen kannst.

Du kannst jetzt also beliebig oft auf der Seite diesen Effekt verwenden. Die Aufruf-Geschwindigkeit lässt sich nach wie vor über die Variable speed einstellen, mit runOnce kannst du dafür sorgen, dass der Text nur einmalig eingefärbt wird.


Nachfolgend dann gleich die verschiedenen Einzel-Teile. Im Anhang findest du auch nochmal eine Beispiel-Datei. Ich habe darin einfach mal SPAN-Tags für den Text verwendet, da diese sich auch innerhalb einer Zeile verwenden lassen würden. Falls sie wie ein DIV die komplette Breite einnehmen sollen, kannst du ihre display-Eigenschaft aber auch einfach auf block setzen, entsprechende Stelle ist im CSS kommentiert. Falls nur einige sich wie ein DIV verhalten sollen, kannst du die entsprechende Eigenschaft auch nur gezielt auf einige SPANs anwenden. Du kannst dich dabei an meinen gezielten Anpassungen orientieren, welche sich nur auf ein bestimmtes SPAN auswirken. Bei häufigerer Verwendung des Effekts solltest du evtl. über den Einsatz weiterer Klassen oder IDs nachdenken, statt den Pseudo-Selektor :nth-of-type zu verwenden (nur zu Demo-Zwecken und um den HTML-Code kurz zu halten).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.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;
}
 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
$(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);
});
});
 


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

#3 RE: Text-Effekte von Wolfgang 23.07.2014 18:58

avatar

Hallo Florian,
besten Dank für das Script!
Da im Forum eh jQuery genutzt wird, finde ich es eine super Idee.

Aber!
Der IE 11 macht mal wieder Schwierigkeiten.
Die Schrift läuft nach links heraus. Ganz kurz kann man eine Farbveränderung sehen.
In Opera, FF, Google Chrom läuft das Script bestens!

Lässt sich da noch was machen?



Gruß
Wolfgang

#4 RE: Text-Effekte von florian-zier 23.07.2014 19:11

avatar

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.

#5 RE: Text-Effekte von Wolfgang 25.07.2014 14:25

avatar

Hallo Florian,
hat alles nicht geholfen.
Interessanter Weise wird der erste Buchstaben eingefärbt und dann läuft der Text komplett nach links raus!?

#6 RE: Text-Effekte von florian-zier 28.07.2014 17:12

avatar

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!

#7 RE: Text-Effekte von Wolfgang 29.07.2014 00:07

avatar

Wow!!!
Läuft jetzt bestens, in allen Browsern!!!

Besten Dank



Viele Grüße
Wolfgang

#8 RE: Text-Effekte von florian-zier 31.07.2014 21:53

avatar

Super!

#9 RE: Text-Effekte von Wolfgang 01.12.2014 23:23

avatar

Hallo Florian.
habe da ein kleines Problem.
Wenn ich das Fenster soweit minimiere, dass der Text und der Online-Radio-Button zusammen kommen (siehe Bild), hätte ich gerne die Schrift im Hintergrund.
Mit z-index scheint es nicht zu funktionieren. Auch die User-Navigation (Business-Template) oben rechts, wird von der Schrift überdeckt. Wie bekomme ich das hin?
Kann man ins Script einen z-index verbauen?

1
2
 
<span class="color-changer" style="z-index:100;"......>{{html_title}}</span>
<img title="Online Radio - Ein Klick öffnet die Auswahl!" class="willkommen" style="z-index:111 !important;" ......
 






Gruß
Wolfgang

#10 RE: Text-Effekte von florian-zier 02.12.2014 18:40

avatar

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.

#11 RE: Text-Effekte von Wolfgang 11.12.2014 16:45

avatar

Hallo Florian,
besten Dank für die Tipps.
Normalerweise habe ich mit "z-index" die Probleme lösen können. Mein Forum habe ich sogar IE7 tauglich gemacht. Hier gab es ohne Ende Probleme mit z-index. Hier half auch ein jQuery-Script.
Ich habe die komplette Zeile mit "{{html_header==.......}}" umgeschrieben und in Tabellen-Zellen gepackt.
Jetzt verschwindet das Lautsprechersymbol beim Zusammenschieben des Browserfensters. Sieht besser aus, als wenn die Schrift vor oder dahinter dem Symbol erscheint.

#12 Colorchanger: Verlinkung funktioniert erst nach Doppelklick von Wolfgang 25.01.2015 16:13

avatar

Hallo Florian,
mir ist da etwas seltsames beim "Colorchanger" aufgefallen!

Ich wollte die Schrift des Colorchangers so eingerichtet, dass man mit einem Klick wieder auf die Startseite kommt.
Auch mit einem Klick auf den Hintergrund des Headers sollte man die Startseite erreichen!

Aber!
+ Mit dem Hintergrund funktioniert es!
+ Wechselt gerade die Schrift und klickt noch auf "Color 1", geht es.
- Ist der Farbwechsel der Schrift vollzogen funktioniert nur ein Doppelklick.

Läßt sich hier etwas machen, das man ganz normal mit einem Klick die Startseite erreicht?

1
 
<a onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';" href="/forum.php" class="color-changer">{{html_title}}</a>
 





Gruß
Wolfgang

#13 RE: Colorchanger: Verlinkung funktioniert erst nach Doppelklick von florian-zier 25.01.2015 19:07

avatar

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.

#14 RE: Colorchanger: Verlinkung funktioniert erst nach Doppelklick von Wolfgang 27.01.2015 01:23

avatar

Hallo Florian,
da habe ich mich wohl vertan. Besten Dank!

In meinem Forum habe ich ähnliche Variablen wie "Text", "Timer", ... verbaut, wie im Changer.
Können die sich gegenseitig stören?

Komischerweise läuft jetzt der Farbwechsel sehr spät an. Kann ich da etwas ändern oder liegt das am Laden aller Scripte?



Nachtrag: Nur auf meinem privaten Rechner (Win8.1), auf einem andern Rechner (Win 7) alles i.O.????




Bis dann
Wolfgang

#15 RE: Colorchanger: Verlinkung funktioniert erst nach Doppelklick von florian-zier 27.01.2015 20:56

avatar

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.

#16 RE: Colorchanger: Verlinkung funktioniert erst nach Doppelklick von Wolfgang 28.01.2015 18:08

avatar

Hallo Florian,
habe die Ursache gefunden.
Es liegt leider am verzögerten Aufklappen der Menüleiste.
Ich hatte gestern schon das Script entfernt.
Jetzt geht es wesentlich besser und schneller!

Es liegt wohl am zusätzlichen Laden von "jquery.hoverIntent.minified.js" . Habe das Script komplett herausgenommen (verträgt sich wohl nicht mehr mit meinen anderen Scripten).

Kann man ein verzögertes Aufklappen ohne "hoverIntent.js" realisieren?

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script
*
$('.menu_item').hoverIntent({
interval: 50,
timeout: 100,
over: function() {
*
*
 

 



PS: Ich finde in meinem Forum, in Deinem und auch nicht im Support Forum den Beitrag zum "Verzögerten Aufklappen"





Bis dann
Wolfgang

#17 RE: Colorchanger: Verlinkung funktioniert erst nach Doppelklick von florian-zier 03.02.2015 21:12

avatar

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.

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz