Flackern beim Verstecken über onload()
dedlfix
Flackern beim Verstecken über onload()
dedlfix
Guten Morgen!
Javscript sollte ja möglichst so eingesetzt werden, dass eine Bedienbarkeit auch ohne es gewährleistet ist.
So dachte ich mir ein Formular, das zwar notwendig ist, aber nicht immer sichtbar sein muss, mit Javascript auszublenden.
<script type="text/javascript">
function init() {
document.getElementById('showForm').style.display = 'block';
document.getElementById('form').style.display = 'none';
}
function showhide() {
document.getElementById('showForm').style.display = 'none';
document.getElementById('form').style.display = 'block';
}
</script>
<body onload="init()">
<!-- hier steht eine Tabelle zum Anzeigen von Datensätzen, aber die tut nichts zur Sache -->
<p id="showForm" style="display:none" onclick="showhide()">Neuen Datensatz hinzufügen</p>
<form id="form" style="display:block" ...>
...
</form>
(Mal abgesehen von "showhide", da mir kein besserer Name für diese Funktion einfiel:)
Beim Laden der Seite wird das Formular angezeigt, der Absatz hingegen nicht. Das bleibt auch so, wenn Javascript nicht aktiviert ist. Steht Javascript zur Verfügung greift onload im <body> und versteckt das Formular und zeigt den Absatz an. (Der Benutzer kann nun, falls er einen neuen Datensatz hinzufügen möchte, mit onclick auf den Absatz das Formular wieder einblenden.)
Jedoch ist beim Laden der Seite für kurze Zeit das Formular zu sehen, bevor das onload zuschlägt und es versteckt. Dieses kurzzeitige Aufflackern möchte ich nun vermeiden, habe aber keine Idee, wie es anzustellen wäre, oder ob es eine andere/bessere Lösungsmöglichkeit gibt. Habt ihr eine?
dedlfix
-
Hi,
Jedoch ist beim Laden der Seite für kurze Zeit das Formular zu sehen, bevor das onload zuschlägt und es versteckt.
onload ist ein ziemlich spät feuerndes Event, welches Dich zudem gar nicht interessiert. Das Event, welches Du suchst, ist "onparagraphandformexist", welches zu einem sehr interessanten Zeitpunkt feuert: Nämlich dann, wenn der Absatz und das Formular existieren. Leider gibt es keinen Event-Handler dafür; aber der Zeitpunkt lässt sich anhand des Codes trotzdem sehr genau abpassen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Cheatah,
onload ist ein ziemlich spät feuerndes Event, welches Dich zudem gar nicht interessiert. Das Event, welches Du suchst, ist "onparagraphandformexist", welches zu einem sehr interessanten Zeitpunkt feuert: Nämlich dann, wenn der Absatz und das Formular existieren. Leider gibt es keinen Event-Handler dafür; aber der Zeitpunkt lässt sich anhand des Codes trotzdem sehr genau abpassen.
Mit anderen Worten: Ein <script type="text/javascript">init();</script> hinter das </form> ...
und das Auge ist zu träge, um dann noch ein Flackern wahrzunehmen.Das sieht aus wie eine akzeptable Lösung.
Danke, dedlfix
-
Hi,
Mit anderen Worten: Ein <script type="text/javascript">init();</script> hinter das </form> ...
und das Auge ist zu träge, um dann noch ein Flackern wahrzunehmen.Das sieht aus wie eine akzeptable Lösung.
eine andere wäre, über Javascript ein style-Element mit der gewünschten Regel einzufügen oder ein vorhandenes mit der für Javascript unerwünschten Regel auszublenden und dann natürlich auf die unschönen inline-Styles zu verzichten.
freundliche Grüße
Ingo-
Ingo,
eine andere [Lösung] wäre, über Javascript ein style-Element mit der gewünschten Regel einzufügen oder ein vorhandenes mit der für Javascript unerwünschten Regel auszublenden und dann natürlich auf die unschönen inline-Styles zu verzichten.
Diese Idee gefällt mir auch sehr gut, nur bei der Umsetzung scheint mir etwas Wissen zu fehlen.
Bekannt ist mir die document.styleSheets-Collection von JScript, die man bearbeiten könnte. Doch das ist JScript und kein brwoserübergreifendes Javascript. Da fällt mir nur document.write(ln) ein, was ich aber persönlich als unschön empfinde. Meintest du das so oder kennst du eine elegantere Methode?
dedlfix
-
Hi,
Da fällt mir nur document.write(ln) ein, was ich aber persönlich als unschön empfinde. Meintest du das so oder kennst du eine elegantere Methode?
Ja, das meinte ich bei der ersten Lösung. Die zweite wäre z.B.:
document.getElementsByTagName("style")[0].disabled = true;freundliche Grüße
Ingo-
Hallo,
und im head mit Javascript und document.write einen Verweis auf eine weitere externe CSS-Datei zu schreiben in der dann die erstmal nicht gewünschten Element auf display: none zu setzten?
Liebe Grüße,
Bernd
-
Hi,
und im head mit Javascript und document.write einen Verweis auf eine weitere externe CSS-Datei zu schreiben in der dann die erstmal nicht gewünschten Element auf display: none zu setzten?
warum so umständlich? Entweder ein Style-Element mit den paar Regeln über document.write reinschreiben oder eben ein vorher normal notiertes Style-Element mit den gegenteiligen Regeln ausblenden. Schau mal http://www.1ngo.de/web/css-layout.html - da wird beim Laden bzw. bei der Auswahl ausgeblendet.
freundliche Grüße
Ingo-
Hi,
vorher normal notiertes Style-Element mit den gegenteiligen Regeln ausblenden. Schau mal http://www.1ngo.de/web/css-layout.html - da wird beim Laden bzw. bei der Auswahl ausgeblendet.
Ich müßte jetzt nachschauen, aber AFAIR wird gerade die disabled-Eigenschaft von einigen Browsern nicht oder falsch unterstützt (AFAIR Safari und vielleicht auch Konqueror sowie noch ein weniger bedeutender Mac-Browser - ICE-Browser?).
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
vorher normal notiertes Style-Element mit den gegenteiligen Regeln ausblenden. Schau mal http://www.1ngo.de/web/css-layout.html - da wird beim Laden bzw. bei der Auswahl ausgeblendet.
Ich müßte jetzt nachschauen,
Das wäre nett, weil's mich interessieren würde.
aber AFAIR wird gerade die disabled-Eigenschaft von einigen Browsern nicht oder falsch unterstützt (AFAIR Safari und vielleicht auch Konqueror sowie noch ein weniger bedeutender Mac-Browser - ICE-Browser?).
Wenn ich mich recht erinnere, hatte bei meinen Windows-Browsern damals nur der Opera 7.0 oder 7.11 Probleme damit gehabt, aber die nächste Version dann nicht mehr.
freundliche Grüße
Ingo-
Hi,
Ich müßte jetzt nachschauen,
Das wäre nett, weil's mich interessieren würde.http://www.quirksmode.org/dom/w3c_css.html
Untetrstützung: disabled -> minimal
http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets
Entwarnung: Der Fehler bezieht sich wohl nur auf Alternate-Styles.
Aber trotzdem würde ich dir empfehlen, diese Seiten bezügl. der "Problemchen" die die Browser hier so bereiten mal, durchzuschauen. =;-) Mir war da noch ein weiteres disabled-Problem in Erinnerung ...
... vielleicht war's das aber auch, und es stand auf einer anderen Seite nur genauer, und ich hab's nur mit dem "Alternate" verrafft ... =%-)
aber AFAIR wird gerade die disabled-Eigenschaft von einigen Browsern nicht oder falsch unterstützt (AFAIR Safari und vielleicht auch Konqueror sowie noch ein weniger bedeutender Mac-Browser - ICE-Browser?).
Wenn ich mich recht erinnere, hatte bei meinen Windows-Browsern damals nur der Opera 7.0 oder 7.11 Probleme damit gehabt, aber die nächste Version dann nicht mehr.Gerade mal getestet: Der Konqueror 3.5.2 hat zumindest keine Probleme mit disabled - sofern es sich um "normales" Stylesheet handelt, das man mit disabled deaktiviert/aktiviert. :-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
http://www.quirksmode.org/dom/w3c_css.html
Untetrstützung: disabled -> minimal
http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets
Entwarnung: Der Fehler bezieht sich wohl nur auf Alternate-Styles.
Danke für's raussuchen.
Aber trotzdem würde ich dir empfehlen, diese Seiten bezügl. der "Problemchen" die die Browser hier so bereiten mal, durchzuschauen. =;-) Mir war da noch ein weiteres disabled-Problem in Erinnerung ...
... vielleicht war's das aber auch, und es stand auf einer anderen Seite nur genauer, und ich hab's nur mit dem "Alternate" verrafft ... =%-)
Ja, über Probleme (auch anderer Art) mit alternativen CSS habe ich auch schon einiges gelesen.
Gerade mal getestet: Der Konqueror 3.5.2 hat zumindest keine Probleme mit disabled - sofern es sich um "normales" Stylesheet handelt, das man mit disabled deaktiviert/aktiviert. :-)
Ja fein. :-)
freundliche Grüße
Ingo-
Hi,
Ja, über Probleme (auch anderer Art) mit alternativen CSS habe ich auch schon einiges gelesen.
Sehr, sehr bedauerlich ... :-(
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
-
-
Danke Ingo,
wieder was gelernt.
liebe Grüße,
Bernd
-
-
-
Ingo,
document.getElementsByTagName("style")[0].disabled = true;
das sieht sehr schön aus. Etwas abgewandelt (und nicht mehr HTML 4.01-kompatibel, wegen der id-Attribute in den style-Elementen) sieht es nun so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><title>Test</title> <style type="text/css" id="withJs"> #showForm { display: block; } #form { display: none; } </style> <style type="text/css" id="withoutJs"> #showForm { display: none; } #form { display: block; } </style> <script type="text/javascript"> document.getElementById("withoutJs").disabled = true; function showhide() { document.getElementById('showForm').style.display = 'none'; document.getElementById('form').style.display = 'block'; } </script> </head> <body> <!-- hier steht eine Tabelle zum Anzeigen von Datensätzen, aber die tut nichts zur Sache --> <p id="showForm" onclick="showhide()">Neuen Datensatz hinzufügen</p> <form id="form" action=""> <p> <input type="text" name="foo" /> <input type="submit" /> </p> </form> </body></html>So werde ich es lassen.
Danke, dedlfix
-
Hi,
(und nicht mehr HTML 4.01-kompatibel, wegen der id-Attribute in den style-Elementen)
und warum? Wenn Du diese Elemente an den Anfang setzt, sind sie stets [0] und [1].
freundliche Grüße
Ingo-
echo $begrüßung;
(und nicht mehr HTML 4.01-kompatibel, wegen der id-Attribute in den style-Elementen)
und warum? Wenn Du diese Elemente an den Anfang setzt, sind sie stets [0] und [1].Das kann ich zwar in diesem Beispiel garantieren, aber nicht mehr in der eigentlichen Anwendung. Insofern ist mir ein eindeutiger Bezeichner lieber als eine relative Angabe.
echo "$verabschiedung $name";
-
Hi,
Das kann ich zwar in diesem Beispiel garantieren, aber nicht mehr in der eigentlichen Anwendung. Insofern ist mir ein eindeutiger Bezeichner lieber als eine relative Angabe.
nunja, da gäbe es dann noch die zwar unsinnige aber valide Mglichkeit, den Style-Elementen lang-Attribute zu geben und diese in einer Schleife abzufragen.
freundliche Grüße
Ingo-
echo $begrüßung;
Das kann ich zwar in diesem Beispiel garantieren, aber nicht mehr in der eigentlichen Anwendung. Insofern ist mir ein eindeutiger Bezeichner lieber als eine relative Angabe.
nunja, da gäbe es dann noch die zwar unsinnige aber valide Mglichkeit, den Style-Elementen lang-Attribute zu geben und diese in einer Schleife abzufragen.Ja, so ähnlich (mit title) probierte ich das anfangs auch, weil ich nur in der 4.01er DTD nachgeschlagen hatte und dort kein id fand. Für mich muss die Lösung auch nicht 4.01-kompatibel sein, ich wollte es nur für Mitleser und das Archiv nicht unerwähnt lassen.
echo "$verabschiedung $name";
-
Hi,
Ja, so ähnlich (mit title) probierte ich das anfangs auch,
wobei das einigen Browsern Probleme bereiten könnte.
Für mich muss die Lösung auch nicht 4.01-kompatibel sein
Na fein - dann verwende einfach XHTML und schon ist die id valide. ;-)
freundliche Grüße
Ingo
-
-
-
-
-
-
-
Hallo,
Bekannt ist mir die document.styleSheets-Collection von JScript, die man bearbeiten könnte. Doch das ist JScript und kein brwoserübergreifendes Javascript.
Doch, das ist es. Es funktioniert auch mit aktuellen Geckos und Opera unter Windows und Linux. Nur Konqueror (3.3.2) kennt zwar document.styleSheets und kann auch im Prinzip damit umgehen, liest z.B. die richtige .length aus, rendert aber nach Setzen von .disabled = true nicht neu. Das tut er aber auch nicht mit document.getElementsByTagName("style")[1].disabled = true;
viele Grüße
Axel
-
echo $begrüßung;
Bekannt ist mir die document.styleSheets-Collection von JScript, die man bearbeiten könnte. Doch das ist JScript und kein brwoserübergreifendes Javascript.
Doch, das ist es.Dann schwindelt das MSDN, denn das behauptet auf der verlinkten Seite doch glatt: "There is no public standard that applies to this collection."
Es funktioniert auch mit aktuellen Geckos und Opera unter Windows und Linux. Nur Konqueror (3.3.2) kennt zwar document.styleSheets und kann auch im Prinzip damit umgehen, liest z.B. die richtige .length aus, rendert aber nach Setzen von .disabled = true nicht neu. Das tut er aber auch nicht mit document.getElementsByTagName("style")[1].disabled = true;
Was zwar unschön aber nicht tragisch wäre, denn in dem Fall sollten die Vorkehrungen für Javascript-ausgeschaltete Browser greifen. (Konjunktiv, weil ich es nicht probiert habe.)
echo "$verabschiedung $name";
-
Hi,
Dann schwindelt das MSDN, denn das behauptet auf der verlinkten Seite doch glatt: "There is no public standard that applies to this collection."
Der Umgang mit den "styleSheets" wird leider von den Browsern unterschiedlich gehandhabt. Da muß man drumrum arbeiten -> Coding: CSS-Regeln (& Stylesheets) auslesen & ändern
Wenn man einen Style neu machen will, gibt es ebenfalls Probleme (IE: addRule / Non-IE: insertRule / Safari/Konqueror: theoretisch sowohl addRule wie auch insertRule, praktisch Bug - Workaround: createTextNode). Am einfachsten ist natürlich write(), sofern man den Style gleich zu Beginn erstellen will - und kein echtes XHTML vorliegt.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
echo $begrüßung;
Der Umgang mit den "styleSheets" wird leider von den Browsern unterschiedlich gehandhabt. Da muß man drumrum arbeiten -> Coding: CSS-Regeln (& Stylesheets) auslesen & ändern
Sehr interessant, doch etwas oversized für meinen Zweck. Nun weiß ich aber, wo ich Literatur finde, wenn ich mal umfangreichere Stylesheets-Änderungen vorhabe. Danke.
echo "$verabschiedung $name";
-
Hi,
Sehr interessant, doch etwas oversized für meinen Zweck.
Keine Frage - wenn man die Funktion sonst nicht braucht. =:-)
Nun weiß ich aber, wo ich Literatur finde, wenn ich mal umfangreichere Stylesheets-Änderungen vorhabe. Danke.
Yep: *Änderungen*. Das Problem *hierbei* ist allerdings, daß der "richtige" Weg (über die styleSheets-Collection), *neue* Regeln anzulegen, im Safari & Konqueror nicht funktioniert! :-( ("Böse, böse Bugs!" ;-))
Dafür habe ich aber auch eine Funktion (die ohne document.write() auskommt) und nachträglich auch in den "Problem-Browsern" eine Regel ergänzen kann: Coding: CSS-Stylesheets & -Regeln hinzufügen - ich habe sie mal gerade online gepackt. ;)
Aber wie gesagt: Wenn man ohnehin die Styles während des Ladens hinzufügen möchtem dann ist ein write() noch am einfachsten ... :)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hallo,
Das Problem *hierbei* ist allerdings, daß der "richtige" Weg (über die styleSheets-Collection), *neue* Regeln anzulegen, im Safari & Konqueror nicht funktioniert! :-( ("Böse, böse Bugs!" ;-))
Dafür habe ich aber auch eine Funktion (die ohne document.write() auskommt) und nachträglich auch in den "Problem-Browsern" eine Regel ergänzen kann: Coding: CSS-Stylesheets & -Regeln hinzufügen - ich habe sie mal gerade online gepackt. ;)
Siehe auch dieses Untersuchungsscript.
Mathias
-
Hi,
Siehe auch dieses Untersuchungsscript.
BTW: Ich vermute, createStyleSheet existiert ab IE 5.0?! Bei MSDN steht das leider nicht. :-/
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi Ingrid ;-),
createStyleSheet existiert ab IE 5.0?!
Existiert ab IE 4. ;)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
-
-
-
-
Hi,
rendert aber nach Setzen von .disabled = true nicht neu. Das tut er aber auch nicht mit document.getElementsByTagName("style")[1].disabled = true;
muß er doch auch gar nicht - wenn diese Anweisung im head steht und ausgeführt wird, bevor er mit dem Rendern angefangen hat.
freundliche Grüße
Ingo-
Hallo,
rendert aber nach Setzen von .disabled = true nicht neu. Das tut er aber auch nicht mit document.getElementsByTagName("style")[1].disabled = true;
muß er doch auch gar nicht - wenn diese Anweisung im head steht und ausgeführt wird, bevor er mit dem Rendern angefangen hat.Nein, das beeindruckt ihn wieder zu sehr ;-). Dann kennt er zwar auch schon document.styleSheets, document.styleSheets.length ist aber noch 0, weswegen natürlich auch wieder kein disabled gesetzt wird.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> body {background-color:red;} * {color:blue;} </style> <style type="text/css"> body {background-color:green;} * {color:yellow;} </style> <script type="text/javascript"> <!-- window.onload = function() { if (document.styleSheets) { alert(document.styleSheets.length); document.styleSheets[2].disabled = true; document.getElementsByTagName("style")[1].disabled = true; alert(document.styleSheets[2].disabled); } }; //--> </script> </head> <body> <p>Test</p> </body> </html>So kennt der Konqueror die korrekte document.styleSheets.length mit 3. Er setzt auch disabled auf true, das document.styleSheets[2] bleibt aber trotzdem aktiv.
Macht man das nicht window.onload, sondern sofort, dann ist für den Konqueror document.styleSheets.length gleich 0.
viele Grüße
Axel
-
Hi,
rendert aber nach Setzen von .disabled = true nicht neu. Das tut er aber auch nicht mit document.getElementsByTagName("style")[1].disabled = true;
muß er doch auch gar nicht - wenn diese Anweisung im head steht und ausgeführt wird, bevor er mit dem Rendern angefangen hat.
Nein, das beeindruckt ihn wieder zu sehr ;-). Dann kennt er zwar auch schon document.styleSheets, document.styleSheets.length ist aber noch 0, weswegen natürlich auch wieder kein disabled gesetzt wird.macht doch aber nichts bei document.getElementsByTagName("style")[1].disabled = true; (?).
freundliche Grüße
Ingo-
Hallo,
macht doch aber nichts bei document.getElementsByTagName("style")[1].disabled = true; (?).
Richtig, der Fehler tritt aber trotzdem auf. Das StyleSheet wird im Konqueror nicht unwirksam. In meinem Beispiel bleibt der BODY-Hintergrund grün und die Schrift gelb. Nichtsdestotrotz ist aber document.getElementsByTagName("style").length im Konqueror gleich 2. Der Fehler liegt also offensichtlich nur woanders. Das Setzten von StyleSheet.disabled = true juckt den Konqueror einfach nicht.
viele Grüße
Axel
-
-
-
-
-
-
-
-