"Kollaps" von span wenn Blank geschrieben - Browserfehler oder sinnvoll?
mathefritz
- html
- javascript
<html>
<head>
</head>
<body>
abc = <span id='t'>d</span>nach dem span<br>
<script>
d = document.getElementById('t');
function MakeDblank(){
t.innerText = ' ';
alert(">"+t.innerText+"<");
}
function MakeDdagn() {
t.innerText = 'd';
alert(">"+t.innerText+"<");
}
</script>
<p><a href="javascript:MakeDblank();">d zu Blank machen"</a>
</p>
<p><a href="javascript:MakeDdagn();">d wider d"</a>
</p>
</body>
</html>
gut finde ich das Verhalten nicht, daß der Textinhalt des <span>, wenn er mit Space überschrieben wird, plötzlich leer ist - es sei denn, wird benutzt. Im konkreten Anwendungsfall sollte der span Timergesteuert abwechselnd '?' und ' ' enthalten - wenn vorher '?' dann ' ', wenn Vorher ' ' dann '?' - ging natürlich nicht, habe dann '.' statt ' ' verwendet. Den Fehler zu finden war recht lästig.
Hallo mathefritz,
gut finde ich das Verhalten nicht, daß der Textinhalt des <span>, wenn er mit Space überschrieben wird, plötzlich leer ist - es sei denn, wird benutzt.
Das white-space-Verhalten lässt sich mit CSS steuern.
Bis demnächst
Matthias
Danke, funktioniert ( style='white-space:pre' im span ) .
Tach!
Danke, funktioniert ( style='white-space:pre' im span ) .
Das ist aber vielleicht nicht ganz was du willst, denn Whitespace und Buchstaben können unterschiedliche Breiten haben und dann ändert sich die Größe des span-Elements hin und her. Mach lieber was mit einer fest vorgegebenen Größe.
dedlfix.
Danke, funktioniert ( style='white-space:pre' im span ) .
Das ist aber vielleicht nicht ganz was du willst, denn Whitespace und Buchstaben können unterschiedliche Breiten haben und dann ändert sich die Größe des span-Elements hin und her. Mach lieber was mit einer fest vorgegebenen Größe.
dedlfix.
Danke, ist mir auch schon aufgefallen, sollte wohl zwischen visibility: hidden und visible
umschalten ok - aber als "leer" angzeigt wird es dann im hidden-zustand trotzdem.
Tach!
Danke, ist mir auch schon aufgefallen, sollte wohl zwischen visibility: hidden und visible
umschalten ok - aber als "leer" angzeigt wird es dann im hidden-zustand trotzdem.
Ja, hidden umzuschalten ist wohl eh besser als ständig den Inhalt zu ändern.
dedlfix.
@@mathefritz
Danke, ist mir auch schon aufgefallen, sollte wohl zwischen visibility: hidden und visible
umschalten ok - aber als "leer" angzeigt wird es dann im hidden-zustand trotzdem.
Du meinst, dass der Platz dafür freigehalten wird?
Wenn du da nicht willst, verwende display: none
.
LLAP 🖖
@@mathefritz
Den Fehler zu finden war recht lästig.
Ich sehe sofort einen. Zumal der auch gleich doppelt auftritt:
<p><a href="javascript:MakeDblank();">d zu Blank machen"</a> </p> <p><a href="javascript:MakeDdagn();">d wider d"</a> </p>
a
-Elemente zum Auslösen von Aktionen sind falsch; das sollten button
s sein. Und das Pseudoprotokoll javascript
ist auch Mumpitz.
<p><button onclick="MakeDblank();">d zu Blank machen"</button>
</p>
<p><button onclick="MakeDdagn();">d wider d"</button>
</p>
Natürlich kann man die Buttons so stylen, dass sie wie Links aussehen, wenn man das will. Aber sollte man das wollen?
Und natürlich sollten die Eventhandler nicht im Markup stehen (onclick
), sondern per JavaScript registriert werden (addEventListener()
).
LLAP 🖖
Danke;
schon gut, Gunnar,
das war nur eine schnell hingeworfene Demo;
inzwischen
bin ich zu der Lösung gekommen, das "Blinken" nicht durch Austausch der Textes zu bewirken,
sondern
durch wechchel zwische color='white' und 'red';
(allgemeiner sollte das unsichtbar machen natürlich durch färben mit der Hintergrundbarbe erfolgen)
Hallo und guten Tag,
inzwischen
bin ich zu der Lösung gekommen, das "Blinken" nicht durch Austausch der Textes zu bewirken,
sondern
durch wechchel zwische color='white' und 'red'; (allgemeiner sollte das unsichtbar machen natürlich durch färben mit der Hintergrundbarbe erfolgen)
Und wenn Du nun einen ganz anderen Weg gehst und ein animated GIF (o. ä.) benutzt? Das blinkt dann "von alleine"...
Grüße
TS
Danke TS
inzwischen
... Lösung gekommen, das "Blinken" ...,
sondern
durch wechchel zwische color='white' und 'red' ...;Und wenn Du nun einen ganz anderen Weg gehst und ein animated GIF (o. ä.) benutzt? Das blinkt dann "von alleine"... ...
Grüße
TS
Danke, keine schlechte Idee, aber wie sähe das z.B. für den Exponenten in 2<sup>?</sup> aus - und dürfte doch recht Aufwendig sein; habe bisher keine Ahnung wie das geht.
Hallo und guten Tag,
Und wenn Du nun einen ganz anderen Weg gehst und ein animated GIF (o. ä.) benutzt? Das blinkt dann "von alleine"...
Danke, keine schlechte Idee, aber wie sähe das z.B. für den Exponenten in 2<sup>?</sup> aus - und dürfte doch recht Aufwendig sein; habe bisher keine Ahnung wie das geht.
Zunächst mal ist das <img> ein Inline-Element. Das müsste man also auch hochstellen können. Skalieren kann man es auch. Das ist alles CSS.
Und die Erzeugung eines Ani-GIFs geht auch online.
Grüße
TS
Und die Erzeugung eines Ani-GIFs geht auch online.
also diese Seite hat mich nicht klüger gemacht - und es geht mir ja wirklich nur um rote kursive blinkende Fragezeichen; sie sind "Eingabeaufforderungen", und wenn eine akzeptiere Eingabe erfolgt ist ersetzt diese das Fragezeichen - woran der Timerhandler erkennt daß - an dieser Stelle - das Blinken zu enden hat.
Hallo mathefritz,
Und wenn Du nun einen ganz anderen Weg gehst und ein animated GIF (o. ä.) benutzt? Das blinkt dann "von alleine"...
Danke, keine schlechte Idee,
Ich denke schon, dass es eine schlechte Idee ist, für einzelne Zeichen animierte Grafiken zu verwenden, nur weil das Zeichen seine Farbe ändern soll. Animation existiert.
Bis demnächst
Matthias
Hallo und guten Tag Matthias,
Ich denke schon, dass es eine schlechte Idee ist, für einzelne Zeichen animierte Grafiken zu verwenden, nur weil das Zeichen seine Farbe ändern soll. Animation existiert.
Auf den Tipp hatte ich eigentlich schon von Gunnar gewartet ;-P
Hat bei mir noch nie richtig funktioniert :-(
Grüße
TS
Hallo TS,
Animation existiert.
Hat bei mir noch nie richtig funktioniert :-(
Sollte inzwischen aber. Wobei sich nicht alles animieren lässt. Mehrere Animationen lassen sich mit Komma voneinander trennen, sodass sich auch komplexe Geschichten animieren lassen. Was fehlt, ist allerdings die Möglichkeit auf Events zu reagieren.
Bis demnächst
Matthias
Servus!
Animation existiert.
Hat bei mir noch nie richtig funktioniert :-(
Sollte inzwischen aber. Wobei sich nicht alles animieren lässt. Mehrere Animationen lassen sich mit Komma voneinander trennen, sodass sich auch komplexe Geschichten animieren lassen. Was fehlt, ist allerdings die Möglichkeit auf Events zu reagieren.
Doch! Die Events animationend, ...iteration und ...start reagieren auf CSS-Animationen, benötigen aber natürlich JavaScript.
Bis demnächst
Matthias
Herzliche Grüße
Matthias Scharwies
Hallo Matthias Scharwies,
Was fehlt, ist allerdings die Möglichkeit auf Events zu reagieren.
Doch! Die Events animationend, ...iteration und ...start reagieren auf CSS-Animationen, benötigen aber natürlich JavaScript.
Einfach mehrere Animationen nacheinander auszuführen, geht auch ohne JavaScript. Gemeint ist zum Beispiel eine Animation zu beenden, wenn ein bestimmtes Element geklickt wurde. Da muss ich mindestens mit JS eine Klasse setzen oder entfernen und ich weiß grad nicht, was passiert wenn
Läuft die Animation zu Ende oder nicht?
Bis demnächst
Matthias
Servus!
Hallo Matthias Scharwies,
Was fehlt, ist allerdings die Möglichkeit auf Events zu reagieren.
Doch! Die Events animationend, ...iteration und ...start reagieren auf CSS-Animationen, benötigen aber natürlich JavaScript.
Einfach mehrere Animationen nacheinander auszuführen, geht auch ohne JavaScript. Gemeint ist zum Beispiel eine Animation zu beenden, wenn ein bestimmtes Element geklickt wurde. Da muss ich mindestens mit JS eine Klasse setzen oder entfernen und ich weiß grad nicht, was passiert wenn
- Element der Klasse foo soll insgesamt 42s animiert sein
- Nach 17s wird dem Element während die Animation läuft die Klasse foo entfernt
Läuft die Animation zu Ende oder nicht?
Bei so einem Fall würde ich die Web Animation API mit Animation.cancel() und polyfill verwenden.
Tutorial kommt im Dezember.
Herzliche Grüße
Matthias Scharwies
@@TS
Animation existiert.
Auf den Tipp hatte ich eigentlich schon von Gunnar gewartet ;-P
Ich kann ja nicht ständig auf euch aufpassen. Ihr werdet doch auch mal ohne mich klarkommen, oder?
LLAP 🖖
Ich denke schon, dass es eine schlechte Idee ist, für einzelne Zeichen animierte Grafiken zu verwenden, nur weil das Zeichen seine Farbe ändern soll. Animation existiert.
Bis demnächst
Matthias
Hallo Matthias, das dort angegebene Beispiel Kreis,animiert bleibt bei mir, ff47 unter SuSE 13.1, unbewegt.
Servus!
Ich denke schon, dass es eine schlechte Idee ist, für einzelne Zeichen animierte Grafiken zu verwenden, nur weil das Zeichen seine Farbe ändern soll. Animation existiert.
Bis demnächst
MatthiasHallo Matthias, das dort angegebene Beispiel Kreis,animiert
Matthias Apsel hat auf CSS-Animation verlinkt.
bleibt bei mir, ff47 unter SuSE 13.1, unbewegt.
Dein Beispiel ist von Element.animate() , das erst ab FF48 funktioniert. Es existieren aber polyfills.
Herzliche Grüße
Matthias Scharwies
@@mathefritz
bleibt bei mir, ff47 unter SuSE 13.1, unbewegt.
Irrelevant. Wir sind bei 49.
LLAP 🖖
Hi,
bleibt bei mir, ff47 unter SuSE 13.1, unbewegt.
Irrelevant. Wir sind bei 49.
interessant - ich war Anfang der Woche noch bei meinen Eltern, es gab ein paar Fragen am PC, und da meldete der FF plötzlich, dass ein Update auf Version 47 verfügbar sei (unter Windows 7). Hab ich dann gleich mal installieren lassen. Und T-Bird wollte eine geschätzte halbe Stunde später auf Version 45 aktualisieren. Auch okay.
Ciao,
Martin
@@TS
Und wenn Du nun einen ganz anderen Weg gehst und ein animated GIF (o. ä.) benutzt? Das blinkt dann "von alleine"...
Wo war die Rede davon, dass es von alleine blinken soll? Zum Sichtbar-/Unsichtbarmachen sind doch die zwei Buttons da.
Aber wenn’s denn blinken soll:
Anstelle eines oder ein paar Zeichen (wenige Byte) ein animiertes GIF? Selbst wenn das nicht besonders groß ist, bedeutet das einen zusätzlichen HTTP-Request (wenn man’s nicht gerade als data-URL einbettet).
Und wenn man nicht dran denkt, das höchauflösend anzubieten, sieht es auf höchauflösenden Anzeigen blöd verwaschen aus.
Und man hat keine Gewähr, dass die Schriftart zu der sonst beim Nutzer verwendeten passt.
TL;DR: Nicht machen.
Also wenn’s denn blinken soll: text-decoration: blink
[CSS 2.2]
Und da das nerven könnte, setzen viele (alle?) Browser das inzwischen gar nicht[1] mehr um.
Und da die Browser das gar nicht mehr umstetzen, wurde das zu deprecated erklärt. [CSS Text Decoration 3]
Ich könnte natürlich sagen, wie man Nutzer trotzdem mit blinkendem Text nerven könnte, aber da war schon jemand anderes schneller.
LLAP 🖖
aus ein an der ↩︎
Hallo und guten Abend,
Aber wenn’s denn blinken soll:
Anstelle eines oder ein paar Zeichen (wenige Byte) ein animiertes GIF? Selbst wenn das nicht besonders groß ist, bedeutet das einen zusätzlichen HTTP-Request (wenn man’s nicht gerade als data-URL einbettet).
... der i.d.R. schon beim zweiten Mal aus dem Browser-Cache befriedigt wird.
[...] Wer etwas will, sucht Wege, wer etwas nicht wioll, sucht Gründe ;-P
Grüße
TS
@@TS
Wer etwas will, sucht Wege, wer etwas nicht wioll, sucht Gründe ;-P
Und vor der Entscheidung, ob man etwas will oder nicht, steht die Abwägung, ob das Gewollte denn überhaupt sinnvoll wäre.
Diese Abwägung kann man natürlich auch übergehen und gleich nach Wegen suchen … ist dann aber 💩 na geht so.
LLAP 🖖
@@mathefritz
inzwischen
bin ich zu der Lösung gekommen, das "Blinken" nicht durch Austausch der Textes zu bewirken,
sondern
durch wechchel zwische color='white' und 'red'; (allgemeiner sollte das unsichtbar machen natürlich durch färben mit der Hintergrundbarbe erfolgen)
Das wäre unsinnig. Bei einer Änderung der Hintergrundfarbe müsstest du auch die Schriftfarbe ändern – was dann gern vergessen wird. Sowas ist von vornherein zu vermeiden und ein single point of change anzustreben.
Das wäre mit visibility: hidden
gegeben - gestern wusstest du’s noch.
LLAP 🖖
@@mathefritz
... Lösung ... "Blinken" ... durch wechchel zwische color='white' und 'red';
Das wäre unsinnig. Bei einer Änderung der Hintergrundfarbe müsstest du auch die Schriftfarbe ändern – was dann gern vergessen wird. Sowas ist von vornherein zu vermeiden und ein single point of change anzustreben.
Das wäre mit
visibility: hidden
gegeben - gestern wusstest du’s noch.LLAP 🖖
na gut, dann muß eben für den Inhaltszugriff textContent verwendet werden, da innerText eine leere String ist, wenn visibility hidden ist, .
@@mathefritz
Das wäre mit
visibility: hidden
gegeben - gestern wusstest du’s noch.na gut, dann muß eben für den Inhaltszugriff textContent verwendet werden, da innerText eine leere String ist, wenn visibility hidden ist, .
?? Warum willst du den Inhalt ändern? Anstatt einfach nur die Sichtbarkeit?
Kannst du mal bitte verständlich beschreiben, was du vorhast?
LLAP 🖖
@@mathefritz
...> > na gut, dann muß eben für den Inhaltszugriff textContent verwendet werden, da innerText eine leere String ist, wenn visibility hidden ist, .
?? Warum willst du den Inhalt ändern? Anstatt einfach nur die Sichtbarkeit?
Kannst du mal bitte verständlich beschreiben, was du vorhast?
Danke für Dein Interesse; In der Funktion die das Blinken bewirkt wird der Inhalt nicht geändert, entscheidet aber, ob weitergeblinkt wird.
function fzBlnk(){ var ln = EqLns.lastChild,
t = ln.childNodes[ln.side].childNodes[ln.Node];
v = t.style;
if(t.textContent=='?'){ v.visibility
= (v.visibility == 'visible')?'hidden':'visible';
return
}
v.color = 'black';
v.visibility = 'visible';
switch(++ln.Node){ case 5:ln.side = 2; ln.Node = 0; /* auf die */
EqLnEqSgnBlck(); /* rechte seite */
return;
case 2:window.clearInterval(ln.Tmr); /* Potenzeingabe */
}
@@mathefritz
Danke für Dein Interesse;
Tendenz: nachlassend – bei deinen Nicht-Problembeschreibungen.
In der Funktion die das Blinken bewirkt
Häh?? Was für Blinken? Ich dachte, du wolltest die Sichtbarkeit von irgendwas mit zwei Buttons umschalten können?
wird der Inhalt nicht geändert, entscheidet aber, ob weitergeblinkt wird.
Dieser Satz mag grammatikalisch richtig sein, verständlich ist er aber nicht.
function fzBlnk(){ … }
Wozu JavaScript?
LLAP 🖖
In der Funktion die das Blinken bewirkt
Häh?? Was für Blinken? Ich dachte, du wolltest die Sichtbarkeit von irgendwas mit zwei Buttons umschalten können?
Ausgangspunkt war die Whitespacebehandlung durch den Browser
wird der Inhalt nicht geändert, entscheidet aber, ob weitergeblinkt wird.
Dieser Satz mag grammatikalisch richtig sein, verständlich ist er aber nicht.
das hoffte ich eigentlich mit dem Quellcode klar zu machen
function fzBlnk(){ … }
Wozu JavaScript?
was sonst ?
das ursprüngliche Problem betrachte ich für gelöst, vielleicht erhöht das folgende Dein Interesse.
Das ganze "Projekt" steht unter link und startet mit 2terAbschnittNeu.html . Um viel Klickerei zu ersparen im Debugger Vorlauf();Nachlauf(); kommandieren. Sollte mit
unmittelbar über der "Tastatur" enden;
nach den Klicks 2,4,2,4 auf die "Tastatur" wird es dann so
aussehen,
und
das AKTUELLE PROBLEM ist nun, daß ein nächster Klick "verschluckt" wird:
ein "Klick" auf "s" (rechteste oberste "Taste") sollte sofort, auf der rechten Seite, dem 2hoch4 folgend, angezeigt werden - erfolgt aber erst beim 2tenmal.
@@mathefritz
Ausgangspunkt war die Whitespacebehandlung durch den Browser
Ausgangspunkt sollte das zu lösende Problem sein. Du hüllst deins in Schweigen.
das hoffte ich eigentlich mit dem Quellcode klar zu machen
Ausgangspunkt sollte das zu lösende Problem sein, nicht der Versuch einer Lösung.
Wozu JavaScript? was sonst ?
Das hängt vom zu lösenden Problem ab. Du hüllst deins in Schweigen.
Das ganze "Projekt" steht unter …
Und die Problembeschreibung steht wo?
LLAP 🖖
...
Das ganze "Projekt" steht unter …
Und die Problembeschreibung steht wo?
die Problembeschreibung steht im lezten Absatz des letzten Postings, Eigenzitat:
das AKTUELLE PROBLEM ist nun, daß ein nächster Klick "verschluckt" wird: ein "Klick" auf "s" (rechteste oberste "Taste") sollte sofort, auf der rechten Seite, dem 2hoch4 folgend, angezeigt werden - erfolgt aber erst beim 2tenmal.
hat sich erledigt; mit Aufruf Ziel(x) falls Node == 2, in Endspurt.js, klappt es.
function Endspurt(x){var h = EqLns.lastChild,
ln = h.childNodes[h.side], b =[3,0][h.side >> 1];
with(ln){
function BsHchEx(b0,Ex) {
if(h.Node == b){childNodes[b].innerText = b0;return; /* Basis */
}
if(childNodes[b].
innerText == Ex){childNodes[b+1].innerText = b0; return; /* Exp */
}
DspHptHnt('?<sup>?</sup> muß 16 ergeben');
}
if(h.Node != 2){
switch(x) {
case mS2: BsHchEx(2,4); return;
case mS4: BsHchEx(4,2); return;
default: PwrErr(); return;
}/* switch */
}/*Node != 2 */ h.s = h.k = h.a = h.M = h.b = h.c = h.n = 0;
function Ziel(u){
function abc(Prp,Min,pNod){ if(h.k < Min){ KlmmrErst(); return false;}
if(h[Prp]){ DspHptHnt("nur 1 <i>"+Prp+"</i>"); return false;}
childNodes[pNod].src = mSms[u]; h[Prp]++; return true;
}
switch (u) {
case mSs : if( h.s < 1 ) { childNodes[2].src = mSms[u]; h.s++;break; }
if( h.s > h.k) { KlmmrErst(); return;}
if( h.s > 3 ) { DspHptHnt('nur 4mal <i>s</i>'); return;}
childNodes[ KlmmrLst[h.s-1][0]+1
] .src = mSms[u]; h.s++;
break;
case mSMns: if( h.M > h.k) { KlmmrErst(); return;}
if( h.M > 2 ) { DspHptHnt('nur 3 Minuszeichen');return;}
childNodes[ KlmmrLst[h.M ][0]+2
] .src = mSms[u]; h.M++;
break;
case mSa : if( !abc('a',1,7) ) return; break;
case mSb : if( !abc('b',2,13) ) return; break;
case mSc : if( !abc('c',3,19) ) return; break;
case mSKa : if( h.k > 2 ) { DspHptHnt('nur 3mal <i>()</i>'); return;}
with(childNodes[ KlmmrLst[h.k][0] ]){src = mSms[mSKa];
className = '';
}
with(childNodes[ KlmmrLst[h.k][1] ]){src = mSms[mSKz];
className = '';
}h.k++;
}/*switch*/ /* fertig nach 4mal s, 3mal '(', 3mal '-', a,b,c */
/* also nach 13 Klicks */
if(++h.n < 13) return; /* gezählt in h.n */
DspHptHnt('Ziel verlassen');
}/*Ziel*/ Verteiler = Ziel; Ziel(x);
} /* with */
}/* Endspurt */