Meldung für 1 sec zeigen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Meldung für 1 sec zeigen Mon, 31 Oct 11 21:16:44 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530653#m1530653 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530653#m1530653 <p>Hallo,</p> <p>ich möchte für ca. 1 sec eine Meldung zeigen, aber nicht die Verarbeitung anhalten mit alert().</p> <p>Kann man die alert- Fläche wieder verschwinden lassen, einen Klick of OK simulieren?</p> <p>Gruß, Manque</p> Meldung für 1 sec zeigen Mon, 31 Oct 11 21:27:35 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530664#m1530664 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530664#m1530664 <p>Hi,</p> <blockquote> <p>ich möchte für ca. 1 sec eine Meldung zeigen, aber nicht die Verarbeitung anhalten mit alert().</p> </blockquote> <p>schön, tu das. ;-)</p> <blockquote> <p>Kann man die alert- Fläche wieder verschwinden lassen, einen Klick of OK simulieren?</p> </blockquote> <p>Nein. Du kannst aber ein anderes Element absolut positionieren, so dass es den Rest der Seite überlagert, dieses Element per CSS ausblenden (mit display:none), und per Javascript kurzzeitig wieder einblenden.</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> Der Afrika-Forscher wird gefragt: "Stimmt es, dass man nicht von Löwen angefallen wird, wenn man eine Fackel trägt?" - "Kommt drauf an. Man muss die Fackel sehr schnell tragen."<br> Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( </div> Meldung für 1 sec zeigen Mon, 31 Oct 11 22:40:49 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530654#m1530654 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530654#m1530654 <p>Moin!</p> <p>"Der Martin" hat Dir schon das wichtigste beschrieben. Das noch offene Geheimnis liegt in der Methode <a href="http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=window.setTimeout" rel="nofollow noopener noreferrer">http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=window.setTimeout</a></p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meldung<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css">display_none<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>30%<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>30%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>30%<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>99<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#faa</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>KlickMich<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">MeldungAnzeigen</span><span class="token punctuation">(</span><span class="token string">'Danke sehr!'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">MeldungAnzeigen</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'Meldung'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>str<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'Meldung'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display<span class="token operator">=</span><span class="token string">"block"</span><span class="token punctuation">;</span> window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">"MeldungAusblenden()"</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">MeldungAusblenden</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'Meldung'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display<span class="token operator">=</span><span class="token string">"none"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></p> <p>MFFG (Mit freundlich- friedfertigem Grinsen)</p> <p>fastix</p> <div class="signature">-- <br> <a href="http://www.fastix.org/fastix-cms/" rel="nofollow noopener noreferrer">Des fastix kleines CMS</a> </div> Meldung für 1 sec zeigen Tue, 01 Nov 11 05:34:32 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530655#m1530655 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530655#m1530655 <p>Om nah hoo pez nyeetz, fastix®!</p> <p>ich darf dich auf einen Fehler und eine Ungeschicktheit hinweisen:</p> <blockquote> <p><code class="language-html"><div id="_m_eldung" </code></p> <pre><code class="block language-javascript"></code></pre> </blockquote> <p>document.getElementById('_M_eldung')</p> <blockquote> <p>document.getElementById('_M_eldung')</p> </blockquote> <blockquote> <p>function MeldungAusblenden() {<br>    document.getElementById('_M_eldung').style.display="none";<br> }</p> </blockquote> <pre><code class="block"> <insider>War das nicht vor langer Zeit bei dir schon mal so?</insider> Es ist sicherlich nicht günstig, das DOM per getElement... mehrmals zu durchsuchen. Besser ist es wohl eine Variable zu definieren `var Meldung = document.getElementById('meldung');`{:.language-javascript} Matthias -- 1/z ist kein Blatt Papier. ![](http://www.billiger-im-urlaub.de/kreis_sw.gif) </code></pre> Meldung für 1 sec zeigen Tue, 01 Nov 11 08:49:43 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530661#m1530661 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530661#m1530661 <p>Moin!</p> <blockquote> <p>Om nah hoo pez nyeetz, fastix®!</p> <p>ich darf dich auf einen Fehler und eine Ungeschicktheit hinweisen:</p> </blockquote> <p>Ok. Das groß/klein ist natürlich ein klassischer Typo und mein Fehler.</p> <blockquote> <p>Es ist sicherlich nicht günstig, das DOM per getElement... mehrmals zu durchsuchen.</p> </blockquote> <p>Aber wenn, dann machen wir das ganz richtig:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meldung<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css">display_none<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>30%<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>30%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>30%<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>99<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#faa<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>KlickMich<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">MeldungAnzeigen</span><span class="token punctuation">(</span><span class="token string">'Danke sehr!'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span> <span class="token comment"><!--Das Skript muss mit der Änderung aber unter dem HTML, jedenfalls nach dem div mit der ID 'meldung' notiert werden, weil die Ziele 1 sonst nur zu einer Fehlermeldung führt. --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-javascript"><span class="token keyword">var</span> oMeldung<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'meldung'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">MeldungAnzeigen</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> oMeldung<span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>str<span class="token punctuation">;</span> oMeldung<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display<span class="token operator">=</span><span class="token string">"block"</span><span class="token punctuation">;</span> window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">"MeldungAusblenden()"</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">MeldungAusblenden</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> oMeldung<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display<span class="token operator">=</span><span class="token string">"none"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></p> <p>Was macht Dich eigentlich so sicher, dass der Zugriff auf ein mit einer ID versehenes Element zu einem "Durchsuchen" führt? Ich würde eher denken der Zugriff erfolgt wahlfrei und geht demnach sehr schnell. Wissen können das natürlich nur die Autoren des jeweiligen Javascript-Interpreters.</p> <p>MFFG (Mit freundlich- friedfertigem Grinsen)</p> <p>fastix</p> <div class="signature">-- <br> <a href="http://www.fastix.org/fastix-cms/" rel="nofollow noopener noreferrer">Des fastix kleines CMS</a> </div> Meldung für 1 sec zeigen Tue, 01 Nov 11 08:54:12 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530656#m1530656 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530656#m1530656 <blockquote> <p>Es ist sicherlich nicht günstig, das DOM per getElement... mehrmals zu durchsuchen. Besser ist es wohl eine Variable zu definieren</p> <p><code class="language-javascript"><span class="token keyword">var</span> Meldung <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'meldung'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p> </blockquote> <p>Es ist noch ungünstiger, eine globale Variable dafür anzulegen. Im Übrigen <a href="http://dev.w3.org/html5/spec/browsers.html#named-access-on-the-window-object" rel="nofollow noopener noreferrer">existiert schon eine</a>, die heißt so, wie die ID des Elements lautet.</p> <p>Mathias</p> Meldung für 1 sec zeigen Tue, 01 Nov 11 08:56:08 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530659#m1530659 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530659#m1530659 <p>Om nah hoo pez nyeetz, molily!</p> <blockquote> <blockquote> <p><code class="language-javascript"><span class="token keyword">var</span> Meldung <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'meldung'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p> </blockquote> <p>Es ist noch ungünstiger, eine globale Variable dafür anzulegen. Im Übrigen <a href="http://dev.w3.org/html5/spec/browsers.html#named-access-on-the-window-object" rel="nofollow noopener noreferrer">existiert schon eine</a>, die heißt so, wie die ID des Elements lautet.</p> </blockquote> <p>mit welcher Browserunterstützung?</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> Meldung für 1 sec zeigen Tue, 01 Nov 11 09:04:34 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530657#m1530657 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530657#m1530657 <p>@@molily:</p> <p>nuqneH</p> <blockquote> <p>Im Übrigen <a href="http://dev.w3.org/html5/spec/browsers.html#named-access-on-the-window-object" rel="nofollow noopener noreferrer">existiert schon eine</a>, die heißt so, wie die ID des Elements lautet.</p> </blockquote> <p>Sollte der Microsoft-Kram Standard werden?</p> <p>“It is possible that this will change.” Hm.</p> <p>“Browser vendors are considering limiting this behaviour to quirks mode.” Aha.</p> <p>Qapla'</p> <div class="signature">-- <br> Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.<br> (Mark Twain) </div> Meldung für 1 sec zeigen Tue, 01 Nov 11 09:43:05 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530658#m1530658 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530658#m1530658 <blockquote> <p>Sollte der Microsoft-Kram Standard werden?</p> </blockquote> <p>Er sollte, weil er browserübergreifend implementiert ist, spezifiziert werden, ja.</p> <p>Mathias</p> Meldung für 1 sec zeigen Tue, 01 Nov 11 09:41:02 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530660#m1530660 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530660#m1530660 <blockquote> <p>Im Übrigen <a href="http://dev.w3.org/html5/spec/browsers.html#named-access-on-the-window-object" rel="nofollow noopener noreferrer">existiert schon eine</a>, die heißt so, wie die ID des Elements lautet.</p> <p>mit welcher Browserunterstützung?</p> </blockquote> <p>Alle großen aktuellen. Das ist, wie vieles in HTML5, nichts neues, sondern nur dem Verhalten des IEs nachgebaut, welches die anderen Browser übernommen haben.</p> <p>Firefox erlaubt, wie es die Spezifikation auch erlaubt, den Zugriff nur im Quirks-Modus und hat das Feature ein wenig versteckt. window.foo geht nicht, nur der direkte Zugriff über foo. Zudem wirft Firefox eine Deprecated-Warnung »Ein Element wurde im globalen Geltungsbereich per ID/Name referenziert. Verwenden Sie den W3C-Standard document.getElementById() stattdessen.« Konsequent ist das nicht, denn auch Firefox im Standard-Modus schleppt einige dieser Shortcuts mit z.B. bei Frames und Iframes, und bei <a href="http://dev.w3.org/html5/spec/dom.html#dom-document-getelementsbyname" rel="nofollow noopener noreferrer">document</a> sowieso.</p> <p>Dass dieses Verhalten existiert, heißt nicht unbedingt, dass man das nutzen sollte – es ist noch nicht browserübergreifend gleich implementiert und der Algorithmus macht ohnehin etwas anderes als ein einfaches, eindeutiges getElementById –, man sollte sich vor allem darüber im Klaren sein, dass bereits eine globale Variable mit einem Namen wie die ID des Elements existieren kann. Vor allem wenn man meint, eine weitere für denselben Zweck anlegen zu müssen. Insbesondere <code class="language-javascript"><span class="token keyword">var</span> meldung <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'meldung'</span><span class="token punctuation">)</span></code>, was im IE zu einer Exception führen kann.</p> <p>Mathias</p> Meldung für 1 sec zeigen Tue, 01 Nov 11 08:54:17 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530663#m1530663 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530663#m1530663 <p>Om nah hoo pez nyeetz, fastix®!</p> <blockquote> <p>Was macht Dich eigentlich so sicher, dass der Zugriff auf ein mit einer ID versehenes Element zu einem "Durchsuchen" führt? Ich würde eher denken der Zugriff erfolgt wahlfrei und geht demnach sehr schnell.</p> </blockquote> <p>Schreib doch mal ein Script und teste es aus ;-)</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> Meldung für 1 sec zeigen Tue, 01 Nov 11 09:03:09 Z https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530662#m1530662 https://forum.selfhtml.org/self/2011/oct/31/meldung-fuer-1-sec-zeigen/1530662#m1530662 <p>Hallo,</p> <blockquote> <p>Aber wenn, dann machen wir das ganz richtig:</p> </blockquote> <p>Besser wäre <a href="http://aktuell.de.selfhtml.org/weblog/javascript-einsatz#unobtrusive-javascript" rel="nofollow noopener noreferrer">Unobtrusive JavaScript</a> – also u.a. das <a href="http://molily.de/js/event-handling-grundlagen.html" rel="nofollow noopener noreferrer">Registrieren der Event-Handler mit JavaScript</a>.</p> <blockquote> <pre><code class="block language-javascript"></code></pre> </blockquote> <p>var oMeldung=document.getElementById('meldung');</p> <p>Wie gesagt, als globale Variable ist diese überflüssig, man sollte sie zumindest als lokale Variable z.B. in eine [link:http://molily.de/js/organisation-module.html#scope@title=Selbstausführende Funktion] kapseln. Oder man gruppiert die zwei Methoden und das Element mit einem [link:http://molily.de/js/organisation-module.html#object-literal@title=Object-Literal], dann wird nur eine globale window-Eigenschaft erzeugt. Beispiel:</p> <p>[code lang=javascript]var meldung = {<br>   init: function () {},<br>   element: function () {},<br>   zeige: function () {},<br>   verstecke: function () {}<br> };</p> <pre><code class="block"> Idealerweise startet man die Initialisierung [beim load-Ereignis oder DOM-ready](http://molily.de/js/event-handling-onload.html). Siehe auch <http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/> >    window.setTimeout("MeldungAusblenden()", 1000); Das Übergeben eines Strings ist unnötig, man kann auch direkt die Funktion übergeben, wie an allen Stellen in JavaScript, wo man Funktionen als Callbacks oder Handler einsetzt. `window.setTimeout(MeldungAusblenden, 1000);`{:.language-javascript} bzw. in obigem Beispiel `window.setTimeout(meldung.verstecke, 1000);`{:.language-javascript} Mathias </code></pre>