Javascript-Problem – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Javascript-Problem Thu, 28 Dec 17 23:29:11 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710884#m1710884 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710884#m1710884 <p>Hallo, ich habe mich lange Zeit nicht mit DOM-Manipulationen befasst und komme im Moment nicht weiter. Ich hoffe, mir kann jemand helfen.</p> <p>In einer Seite, die mit Php generiert wird, soll clientseitig einiges verändert werden. Es geht um eine Liste <ul> mit vielen <li>, die teilweise wiederum <ul> enthalten.</p> <p>Jedes <li> ist nach folgendem Schema aufgebaut: <li>, 1 bis 5 Bilder mit class="ex_bild", genau 1 Bild mit class="listicon", ein kurzer Text</p> <p>Dann gibt es 2 Möglichkeiten. Entweder endet das <li> mit </li>, oder es folgt ein Zeilenumbruch im Quellcode (also nicht in der Browserausgabe - kein <br>) und es folgt eine <ul>, die wieder mindestens 1 <li> enthält, das nach diesem Schema aufgebaut ist. Nach dieser <ul> flogt dann wieder ein Zeilenumbruch im Quellcode und dann das </li>.</p> <p>Ein Beispiel:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_5.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listicon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text 1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_1.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_2.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listicon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_1.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_2.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listicon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_1.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_3.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listicon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_4.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_5.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listicon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_6.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_1.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_2.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listicon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_6.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_1.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_2.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listicon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text 7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_6.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_1.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ex_bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bild_2.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listicon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text 8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>(Ich hoffe, der Quellcode sieht im Beitrag nicht so aus wie die Vorschau, sondern so, wie laut Beschreibung aussehen sollte.)</p> <p>Folgende Veränderungen sollen durch das Script erreicht werden: In jedem <li>, das eine <ul> enthält, sollen alle Bilder und der Text in > <a href="javascript:ordnerlink('o1')"></a> eingeschlossen werden, wobei die 1 von 'o1' durch eine fortlaufende Nummer ersetzt werden soll. Und das enthaltene <ul> soll zu <ul id="o1"> erweitert werden.</p> Javascript-Problem Thu, 28 Dec 17 23:42:31 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710885#m1710885 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710885#m1710885 <p>@@Friedel</p> <blockquote> <p>Ich hoffe, der Quellcode sieht im Beitrag nicht so aus wie die Vorschau</p> </blockquote> <p>Doch, das sah er. Ich hab das mal gefixt.</p> <p>Block-Quellcode braucht eine Leerzeile drüber und drunter.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Javascript-Problem Thu, 28 Dec 17 23:47:48 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710886#m1710886 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710886#m1710886 <p>@@Friedel</p> <blockquote> <p>sollen alle Bilder und der Text in > <a href="javascript:ordnerlink('o1')"></a> eingeschlossen werden</p> </blockquote> <p>Was tut die Funktion <code class="language-js"><span class="token function">ordnerlink</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>?</p> <p><code class="language-html bad"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:…<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> ist i.A. ein sicheres Zeichen dafür, dass das <code>a</code>-Element falsch ist und stattdessen ein <code>button</code> verwendet werden sollte.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Javascript-Problem Fri, 29 Dec 17 02:12:01 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710889#m1710889 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710889#m1710889 <p>Hallo Friedel!</p> <p>Deine Beschreibung macht einige Vorgaben ohne die zu erklären. Ich rate dir mal zu erklären was du am Ende bauen möchtest. Ansonsten verzetteln wir uns schnell.</p> <p>Ich vermute du willst eine aufklappbare Ordnerstruktur bauen, nicht wahr? Dazu sind viele Lösungen denkbar, die in Javascript mglw. einfacher umzusetzen sind. Kommt z.B. jQuery in Frage?</p> <p>Oder kannst du nicht das PHP Script ändern sodass es für JS freundlicheres HTML ausspruckt? Warum muss JS Bilder und Text in ein Element einschließen? Geht das nicht mit einem Tag im HTML Template? Fragen über Fragen ;-D</p> <blockquote> <p>In jedem <li>, das eine <ul> enthält</p> </blockquote> <p>Also mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementsByTagName" rel="nofollow noopener noreferrer">getElementsByTagName</a> oder <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/querySelectorAll" rel="nofollow noopener noreferrer">querySelectorAll</a> findest du diese Elemente.</p> <p>Mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/parentNode" rel="nofollow noopener noreferrer">parentNode</a>, <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/ParentNode/children" rel="nofollow noopener noreferrer">children</a>, <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/childNodes" rel="nofollow noopener noreferrer">childNodes</a>, <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/firstChild" rel="nofollow noopener noreferrer">firstChild</a>, <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/ParentNode/firstElementChild" rel="nofollow noopener noreferrer">firstElementChild</a> u.s.w. kannst du dich im DOM bewegen und nahe Elemente finden.</p> <p>querySelector und querySelectorAll gibts auch an einzelnen Elementen. Du kannst Z.B. erst mit document.querySelectorAll("LI") alle LI finden. Dann bei jedem LI mit li.querySelector('UL') prüfen ob sie eine UL enthalten.</p> <p>Es gibt zwar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" rel="nofollow noopener noreferrer">:has</a> für diesen Fall aber das unterstützen noch nicht viele (kein??) Browser.</p> <p>Wie gesagt sind versch. Lösungen möglich die aber am Ende des Tages alle die Standard DOM Methoden verwenden.</p> <blockquote> <p>sollen alle Bilder und der Text in > <a href="javascript:ordnerlink('o1')"></a> eingeschlossen werden,</p> </blockquote> <p>Mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/createElement" rel="nofollow noopener noreferrer">document.createElement</a> kannst du Elemente erzeugen. Mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener" rel="nofollow noopener noreferrer">addEventListener</a> kannst du ihnen Event-Handler verpassen. Das ist besser als href="javascript:".</p> <p>Mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/appendChild" rel="nofollow noopener noreferrer">appendChild</a> kannst du schon vorhandene DOM Nodes ans neue Element hängen und damit verschieben. Und am Ende das neue Element an der alten Stelle (dem LI?) wieder ins DOM hängen.</p> <p>Die bestehenden Nodes wären soweit ich dich verstehe die IMG Elemente und Textnodes danach. Die findest du in den <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/childNodes" rel="nofollow noopener noreferrer">childNodes</a> des LIs. Die kannst du mit einer <a href="https://wiki.selfhtml.org/wiki/JavaScript/Schleife" rel="nofollow noopener noreferrer">for Schleife</a> durchlaufen. Das UL ignorierst du dabei (<a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/tagName" rel="nofollow noopener noreferrer">tagName</a> == "UL").</p> <blockquote> <p>wobei die 1 von 'o1' durch eine fortlaufende Nummer ersetzt werden soll. Und das enthaltene <ul> soll zu <ul id="o1"> erweitert werden.</p> </blockquote> <p>Eine fortlaufende Nummer bekommst du wenn du mit einer for Schleife durch den ElementArray läufst.</p> <p>Du willst wohl eine Verknüpfung zwischen A und UL über die ID erzeugen. Mir dünkt das ist nicht vonnöten! ;-D In einem Eventhandler beim A kannst du das zugehörige UL auch ohne ID finden. Es ist ausgehend vom <a href="http://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target" rel="nofollow noopener noreferrer">event.target</a> wahrsch. das <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/nextSibling" rel="nofollow noopener noreferrer">nextSibling</a>.</p> <p>Gruß Peter</p> Javascript-Problem Fri, 29 Dec 17 01:00:14 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710887#m1710887 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710887#m1710887 <p>Danke. Das mit den Leerzeilen wird im Wiki zwar erwähnt, wird dann aber mit einem Beispiel ohne Leerzeilen illustriert. Ich glaube, das sollte ich morgen ändern.</p> Javascript-Problem Fri, 29 Dec 17 01:23:45 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710888#m1710888 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710888#m1710888 <p>Stimmt, da könnte man wirklich einen Button nehmen. Alle anderen <li>, die keine <ul> enthalten, bekommen an der Stelle einen Link nach dem Schema <code><a href="./Pfad/Seite.php"><img src="Bild_x.gif" alt="" class="ex_bild"><img src="Bild_y.gif" alt="" class="listicon">Text</a></code>. Diese Links werden aber nicht durch ein Javascript erzeugt, sondern im Php generiert.</p> <p>Die Funktion ordnerlink() sieht so aus:</p> <pre><code class="block language-html">function ordnerlink(a) { if (document.getElementById(a).className=="zu") { document.getElementById(a).className="offen"; } else { document.getElementById(a).className="zu"; }; }; </code></pre> <p>Es spricht nichts dagegen, hier einen Button zu nehmen. Allerdings ändert das nichts an meinem Problem. Wenn ich es schaffe, die Links zu erzeugen, schaffe ich das wohl auch mit den Buttons (und umgekehrt).</p> Javascript-Problem Fri, 29 Dec 17 06:58:51 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710892#m1710892 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710892#m1710892 <p>Hallo Friedel,</p> <blockquote> <p>Danke. Das mit den Leerzeilen wird im Wiki zwar erwähnt, wird dann aber mit einem Beispiel ohne Leerzeilen illustriert. Ich glaube, das sollte ich morgen ändern.</p> </blockquote> <p>☑️ done.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> Javascript-Problem Fri, 29 Dec 17 07:35:23 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710895#m1710895 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710895#m1710895 <p>@@Friedel</p> <blockquote> <p>Stimmt, da könnte man wirklich einen Button nehmen. Alle anderen <li>, die keine <ul> enthalten, bekommen an der Stelle einen Link nach dem Schema <code><a href="./Pfad/Seite.php"><img src="Bild_x.gif" alt="" class="ex_bild"><img src="Bild_y.gif" alt="" class="listicon">Text</a></code>. Diese Links werden aber nicht durch ein Javascript erzeugt, sondern im Php generiert.</p> </blockquote> <p>Wenn du schon serverseitig die Unterscheidung triffst, warum lässt du dann nicht auch die Buttons per PHP generieren?</p> <blockquote> <p>Die Funktion ordnerlink() sieht so aus:</p> </blockquote> <blockquote> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">ordnerlink</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">.</span>className<span class="token operator">==</span><span class="token string">"zu"</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>a<span class="token punctuation">)</span><span class="token punctuation">.</span>className<span class="token operator">=</span><span class="token string">"offen"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">.</span>className<span class="token operator">=</span><span class="token string">"zu"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Es ist i.A. keine gute Idee, eine Klasse per <code class="language-js">className</code> zu setzen oder zu entfernen; eine andere möglicherweise vorhandene Klasse wird damit mit überschrieben.</p> <p>Dafür nimmt man besser die Methoden der <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList" rel="nofollow noopener noreferrer"><code class="language-js">classList</code>-Eigenschaft</a>: <code class="language-js"><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>, <code class="language-js"><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> – und kucke mal – da gibt’s auch <code class="language-js"><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>. Da mit sähe deine Funktion so aus:</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">ordnerlink</span><span class="token punctuation">(</span><span class="token parameter">a</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>a<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">class</span><span class="token punctuation">(</span><span class="token string">'offen'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>d.h. eigentlich brauchst du den Einzeiler gar nicht extra in einer Funktion zu kapseln.</p> <p>Eine Klasse „zu“ brauchst du auch nicht; die Abwesenheit der Klasse „offen“ gibt den Zustand „zu“ an. (Oder andersrum: die Abwesenheit der Klasse „zu“ gibt den Zustand „offen“ an; dann brauchst du keine Klasse „offen“.)</p> <p>Doch eine Klasse „offen“ (bzw. „zu“) brauchst du auch nicht – der Zustand sollte nämlich schon <em>beim Button</em> vermerkt sein: in dessen <code>aria-expanded</code>-Attribut, siehe <em lang="en">Inclusive components</em>: <a href="https://inclusive-components.design/toggle-button/" lang="en" rel="noopener noreferrer">Toggle Buttons</a>; s.a. <a href="https://inclusive-components.design/menus-menu-buttons/" lang="en" rel="noopener noreferrer">Menus & Menu Buttons</a>.</p> <p>Die Listen blendet man über den Geschwisterselektor aus:</p> <pre><code class="block language-css"><span class="token selector">button[aria-expanded="false"] + ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token punctuation">}</span> </code></pre> <p>So in der Art ist es auch bei diesem <a href="https://codepen.io/gunnarbittersmann/pen/NvKBjp" rel="noopener noreferrer">resonsiven Menü</a> auf schmalen Viewports zu sehen.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Javascript-Problem Fri, 29 Dec 17 06:58:41 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710891#m1710891 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710891#m1710891 <p>Ich habe vor einigen Minuten eine umfangreiche Antwort geschrieben, die offensichtlich nicht gespeichert wurde. Ich schreibe das nicht alles nochmal.</p> <blockquote> <p>Warum muss JS Bilder und Text in ein Element einschließen? Geht das nicht mit einem Tag im HTML Template? Fragen über Fragen ;-D</p> </blockquote> <p>Sinnvoll sind diese Fragen aber nicht.</p> <blockquote> <p>querySelector und querySelectorAll gibts auch an einzelnen Elementen. Du kannst Z.B. erst mit document.querySelectorAll("LI") alle LI finden. Dann bei jedem LI mit li.querySelector('UL') prüfen ob sie eine UL enthalten.</p> </blockquote> <p>Ja, das würde wohl gehen. Ich habe das mit <code>document.getElementsByTagName('ul')</code> gemacht. Außer <code>document.getElementsByTagName('ul')[0]</code> sind das genau die gesuchten <code><ul></code>. — Und gerade habe ich einen Fehler in meinem Script gefunden… Das behebe ich erst mal. — Jedenfalls ist das zu bearbeitende <code><li></code> das parentNode dazu.</p> <blockquote> <p>Mit document.createElement kannst du Elemente erzeugen.… Mit appendChild kannst du schon vorhandene DOM Nodes ans neue Element hängen und damit verschieben. Und am Ende das neue Element an der alten Stelle (dem LI?) wieder ins DOM hängen.</p> </blockquote> <p>Ja, genau da liegt mein Problem. Das habe ich bisher nicht so hin bekommen, wie ich es will. In dem Punkt ist deine Erklärung einfacher, als die in selfhtml. Mal sehen, ob ich damit klar komme.</p> <blockquote> <p>Mit addEventListener kannst du ihnen Event-Handler verpassen. Das ist besser als href="javascript:".</p> </blockquote> <p>Gunnar Bittersmann hat mich schon überzeugt, dass <code><a href="javascript:…"></code> hier nicht das Mittel dar Wahl ist.</p> <blockquote> <p>Du willst wohl eine Verknüpfung zwischen A und UL über die ID erzeugen. Mir dünkt das ist nicht vonnöten! ;-D In einem Eventhandler beim A kannst du das zugehörige UL auch ohne ID finden. Es ist ausgehend vom event.target wahrsch. das nextSibling.</p> </blockquote> <p>Diese Id brauche ich auch noch für andere Funktionen. Ich denke, dass das hier das Mittel der Wahl ist. Aber auch ohne diese anderen Funktionen ist die Zuweisung der CSS-Klassen auf diese Weise in der ordnerlink() imho sinnvoll. Natürlich würde es aber, wie fast immer, auch anders gehen.</p> <p>Aber draußen wird es (schon wieder) hell. Ich sollte mal ins Bett gehen.</p> <p>Du kannst dir ja mal <a href="http://www.friedels-home.de/" rel="nofollow noopener noreferrer">http://www.friedels-home.de/</a> ansehen. Die Navigation habe ich vor etwa 18 Jahren geschrieben. Damals war Php mit immensen Kosten verbunden, die Browser haben Html4 noch nicht standardkonform unterstützt, CSS konnte man kaum nutzen… Netscape Navigator 4 und Opera 3 haben einem das Leben wirklich schwer gemacht. Bis etwa 2006 habe ich die Site noch fleißig gewartet. Aber jetzt ist es Zeit, das ganze neu zu machen. Der ganze Java-Schrott kommt weg, die Scripte müssen größtenteils neu geschrieben werden, der Namibia-Teil kommt auf eine extra-Site usw. Und da ich mit das rechte Sprunggelenk und links einen Zeh gebrochen habe, habe ich jetzt etwas Zeit für sowas.</p> Javascript-Problem Fri, 29 Dec 17 10:43:14 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710918#m1710918 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710918#m1710918 <p>Hallo,</p> <blockquote> <p>Ich sollte mal ins Bett gehen.</p> </blockquote> <p>tststs, frohe Weihnachten!</p> <blockquote> <p>Und da ich mit das rechte Sprunggelenk und links einen Zeh gebrochen habe, habe ich jetzt etwas Zeit für sowas.</p> </blockquote> <p>Gute Besserung!</p> <p>Gruß<br> Kalk</p> Javascript-Problem Fri, 29 Dec 17 11:12:04 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710921#m1710921 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710921#m1710921 <p>@@Gunnar Bittersmann</p> <blockquote> <p>Doch eine Klasse „offen“ (bzw. „zu“) brauchst du auch nicht – der Zustand sollte nämlich schon <em>beim Button</em> vermerkt sein: in dessen <code>aria-expanded</code>-Attribut</p> </blockquote> <p>Und wenn die Zustände „offen“ und „zu“ doch direkt bei dem jeweiligen <code>ul</code>-Element angegeben werden sollen, braucht man trotzdem keine Klassen – das geht mit dem <a href="https://w3c.github.io/html/editing.html#the-hidden-attribute" rel="nofollow noopener noreferrer"><code>hidden</code>-Attribut</a>, das gesetzt bzw. nicht gesetzt wird.</p> <blockquote> <p>siehe <em lang="en">Inclusive components</em>: <a href="https://inclusive-components.design/toggle-button/" lang="en" rel="noopener noreferrer">Toggle Buttons</a></p> </blockquote> <p>Oops, darin kommt <code>aria-expanded</code> gar nicht vor.</p> <blockquote> <p>s.a. <a href="https://inclusive-components.design/menus-menu-buttons/" lang="en" rel="noopener noreferrer">Menus & Menu Buttons</a>.</p> </blockquote> <p>Da aber.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Javascript-Problem Fri, 29 Dec 17 22:17:04 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710965#m1710965 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710965#m1710965 <blockquote> <p>Wenn du schon serverseitig die Unterscheidung triffst, warum lässt du dann nicht auch die Buttons per PHP generieren?</p> </blockquote> <p>Das würde die Sache wirklich sehr viel einfacher machen. Tatsächlich habe ich mehrfach erwogen, das zu machen. Aber das wäre ein fauler Kompromiss bzw. eine Notlösung. Mit Php generiere ich eine semantisch korrekte Seite. Sie enthält alle notwendigen Funktionen. Diese Seite wird von Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern und Javasript-Verweigerern auch so gebraucht. Mit Javascript ergänze ich noch einige Funktionen für mehr Komfort. Buttons, die nur in Komfort-Variante einen Zweck haben, sollten auch nur dort existieren.</p> <blockquote> <p>Es ist i.A. keine gute Idee, eine Klasse per className zu setzen oder zu entfernen; eine andere möglicherweise vorhandene Klasse wird damit mit überschrieben.</p> </blockquote> <p>Das ist auch Sinn der Sache. Es gibt 4 mögliche Zustände: kein class-Attribut, class="offen", class="zu" und class="hi". Beim Anklicken des Buttons bzw. Links soll folgendes passieren: Wenn es vorher class="zu" war, soll es danach class="offen" sein. In allen anderen Fällen soll es danach class="zu" sein. Außerdem möchte ich Sachen, die nur in manchen Browsern funktionieren, nach Möglichkeit nicht verwenden. Im Internet Explorer funktioniert das laut <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList</a> erst ab Version 10.</p> <p>Das aria-expanded-Attribut kannte ich bisher nicht. Und in selfhtml steht dazu auch wenig brauchbares. Die von dir verlinkte Seite habe ich gleich wieder zu gemacht. Wenn mich mein Pc-Lautsprecher ungefragt anbrüllt, nachdem ich eine Seite öffne, mache ich sie wieder zu und besuche sie nicht wieder. Außerdem lerne ich neue Sachen sehr viel leichter, wenn ich sie auf Deutsch erklärt bekomme. Auch das hidden-Attribut kenne ich nicht, aber laut <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/hidden" rel="nofollow noopener noreferrer">https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/hidden</a> funktioniert es erst ab IE11. Dort habe ich zwar einiges darüber gelesen, wie es funktioniert (wenn es funktioniert), aber nicht was daran besser sein soll, als display:none;. Jedenfalls habe ich nicht vor, Workarrounds für die weit verbreiteten Browser ie7 bis ie10 zu bauen.</p> Javascript-Problem Sat, 30 Dec 17 07:27:52 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710974#m1710974 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710974#m1710974 <p>Hallo Friedel,</p> <blockquote> <p>Jedenfalls habe ich nicht vor, Workarrounds für die weit verbreiteten Browser ie7 bis ie10 zu bauen.</p> </blockquote> <p>In Deutschland ist neben dem edge lediglich der IE11 relevant. <a href="https://clicky.com/marketshare/de/web-browsers/internet-explorer/" rel="nofollow noopener noreferrer">https://clicky.com/marketshare/de/web-browsers/internet-explorer/</a>, <a href="https://clicky.com/marketshare/de/web-browsers/microsoft-edge/" rel="nofollow noopener noreferrer">https://clicky.com/marketshare/de/web-browsers/microsoft-edge/</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> Javascript-Problem Sat, 30 Dec 17 07:51:00 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710975#m1710975 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1710975#m1710975 <p>@@Friedel</p> <blockquote> <blockquote> <p>Wenn du schon serverseitig die Unterscheidung triffst, warum lässt du dann nicht auch die Buttons per PHP generieren? Das würde die Sache wirklich sehr viel einfacher machen. Tatsächlich habe ich mehrfach erwogen, das zu machen. Aber das wäre ein fauler Kompromiss bzw. eine Notlösung. Mit Php generiere ich eine semantisch korrekte Seite. Sie enthält alle notwendigen Funktionen.</p> </blockquote> </blockquote> <p>Die Grundlage für <em lang="en">progressive enhancement</em>. \o/</p> <blockquote> <p>Diese Seite wird von Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern und Javasript-Verweigerern auch so gebraucht.</p> </blockquote> <p>Da wirfst du ein bisschen viel in einen Topf. Bei Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern wird JavaScript durchaus ausgeführt. Und „das Problem sind nicht die Leute, die bewusst JavaScript in ihrem Browser deaktivieren. Wenngleich das auch beachtet werden sollte, das ist beileibe nicht die Hauptursache für JavaScript-Fehler.“ (<a href="https://forum.selfhtml.org/self/2017/dec/1/formular-per-js-absenden/1709493#m1709493" rel="noopener noreferrer">wie Jeremy Keith sagte</a>)</p> <blockquote> <p>Mit Javascript ergänze ich noch einige Funktionen für mehr Komfort. Buttons, die nur in Komfort-Variante einen Zweck haben, sollten auch nur dort existieren.</p> </blockquote> <p>Das ist völlig richtig. Du kannst das aber auch einfacher haben, indem du all diesen Buttons, die ohne JavaScript keine Funktion haben, im HTML ein <code>disabled</code>-Attribut mitgibst, welches du mit JavaScript entfernst.</p> <p>Dann sind das zwar auch wenn JavaScript nicht ausgeführt wird <code>button</code>-Elemente, aber ich denke, das ist auch gut so. Es sollen ja Buttons sein – und das darf sich durchaus im HTML widerspiegeln.</p> <p><em>Für den Nutzer</em> verhalten sich <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span></code> ohne JavaScript nicht wie Buttons: sie sind keine interaktiven Elemente, sie sind nicht in der Tab-Reihenfolge bei Tastaturbedienung. Alles gut also.</p> <p>Wenn du aber immer noch aufwendigere DOM-Umbauten in Erwägung ziehen solltest, dann würde ich den Inhalt der mit JavaScript zu generierenden Buttons in ein <code>span</code> (oder ein <em lang="en">custom element</em> wie <code>x-button</code>) tun und dieses dann komplett in den Button hängen. <a href="https://codepen.io/gunnarbittersmann/pen/xpddYq" rel="noopener noreferrer">Beispiel.</a></p> <p>Wenn’s auch in Uralt-Browsern funktionieren soll, implementierst du das eben mit <code class="language-js"><span class="token keyword">function</span></code> statt <code class="language-js"><span class="token operator">=></span></code> und <code class="language-js"><span class="token keyword">var</span></code> statt <code class="language-js"><span class="token keyword">let</span></code>. Und wenn’s auch in Steinzeit-Browsern funktionieren soll, dann mit <code class="language-js"><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> und <code class="language-js"><span class="token keyword">for</span></code>-Schleife.</p> <blockquote> <p>Außerdem möchte ich Sachen, die nur in manchen Browsern funktionieren, nach Möglichkeit nicht verwenden. Im Internet Explorer funktioniert das laut <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList</a> erst ab Version 10.</p> </blockquote> <p>Aber Steinzeit-Browser, echt jetzt? Ich darf dich an deine Worte erinnern: „Sie [die Seite] enthält alle notwendigen Funktionen.“ Die Seite funktioniert also auch in IE < 10. Der halbe Nutzer, der noch mit einem IE < 10 dagerkommt, hat dieselbe UX wie andere Nutzer, bei denen JavaScript nicht ausgeführt wird. <em lang="en">So what?</em></p> <blockquote> <p>Jedenfalls habe ich nicht vor, Workarrounds für die weit verbreiteten Browser ie7 bis ie10 zu bauen.</p> </blockquote> <p>Sollst du auch nicht. Die Seite funktioniert ja. <a href="https://forum.selfhtml.org/self/2015/sep/19/technische-fragen-zu-einer-seite-die-nur-aus-einer-seite-besteht/1650342#m1650342" rel="noopener noreferrer">Nochmal Jeremry Keith</a>: „Es ist ein verbreiteter Irrglaube, dass <em lang="en">progressive enhancement</em> heißt, seine Zeit in alte Browser zu stecken – das Gegenteil ist der Fall. Die Grundfunktionalität zu erstellen dauert nicht allzu lange. Wenn man das getan hat, kann man seine Zeit damit verbringen, mit den neusten und großartigsten Browsertechnologien zu experimentieren; sicher in dem Wissen, dass selbst wenn diese noch nicht weitgehend unterstützt werden, man den Fallback ja bereits hat.“</p> <blockquote> <p>Auch das hidden-Attribut kenne ich nicht, aber laut <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/hidden" rel="nofollow noopener noreferrer">https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/hidden</a> funktioniert es erst ab IE11.</p> </blockquote> <p><code class="language-css"><span class="token selector">[hidden]</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token important">!important</span> <span class="token punctuation">}</span></code> ins Stylesheet geschrieben – und schon funktioniert’s auch in IE < 11.</p> <blockquote> <p>was daran [am hidden-Attribut] besser sein soll, als display:none;.</p> </blockquote> <p><code>display</code> ist eine <em>Darstellungs</em>-Angabe; <code>hidden</code> ist eine <em>funktionale</em> Angabe. <em>Ob</em> (nicht wie) etwas dargestellt werden soll, sollte durchaus im HTML/DOM stehen – als Attribut des betreffenden Elements.</p> <p>Außerdem will man womöglich für nicht angezeigte Elemente den Platz freihalten. Kleiner Eintrag ins Stylesheet: <code class="language-css"><span class="token selector">[hidden]</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">visibility</span><span class="token punctuation">:</span> hidden <span class="token punctuation">}</span></code>.</p> <p>Und außerdem will man sich nicht den Kopf zerbrechen, auf welchen Wert man <code>display</code> setzen muss, um ein verstecktes Element wieder anzuzeigen. <a href="https://forum.selfhtml.org/self/2017/nov/28/wechsel-von-display-none-nach-display-block-zerstoert-tabellen-layout/1709354#m1709354" rel="noopener noreferrer">Beispiel</a> (unten).</p> <blockquote> <p>Das aria-expanded-Attribut kannte ich bisher nicht. Und in selfhtml steht dazu auch wenig brauchbares. Die von dir verlinkte Seite habe ich gleich wieder zu gemacht. Wenn mich mein Pc-Lautsprecher ungefragt anbrüllt, nachdem ich eine Seite öffne, mache ich sie wieder zu und besuche sie nicht wieder.</p> </blockquote> <p>?? Mich brüllt bei <a href="https://inclusive-components.design/menus-menu-buttons/" lang="en" rel="noopener noreferrer">Menus & Menu Buttons</a> nichts an.</p> <blockquote> <p>Außerdem lerne ich neue Sachen sehr viel leichter, wenn ich sie auf Deutsch erklärt bekomme.</p> </blockquote> <p>Es wäre sicher eine lohnende Aufgabe, die ganzen Artikel von <em lang="en">Inclusive components</em> ins Deutsche zu übersetzen.</p> <blockquote> <p>Das ist auch Sinn der Sache. Es gibt 4 mögliche Zustände: kein class-Attribut, class="offen", class="zu" und class="hi". Beim Anklicken des Buttons bzw. Links soll folgendes passieren: Wenn es vorher class="zu" war, soll es danach class="offen" sein. In allen anderen Fällen soll es danach class="zu" sein.</p> </blockquote> <p>Den Sinn habe ich nicht verstanden. <code>class="hi"</code> taucht im Weiteren nicht auf. Und für „offen“ und „zu“ sollte ein Flag reichen – eben das <code>aria-expanded</code>-Attribut. (Oder zusätzlich noch ein <code>hidden</code>-Attribut am betreffenden Element; das macht dann aber zusätzliche Arbeit.)</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Javascript-Problem Sun, 31 Dec 17 14:07:08 Z https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1711057#m1711057 https://forum.selfhtml.org/self/2017/dec/29/javascript-problem/1711057#m1711057 <p>Hallo,</p> <blockquote> <blockquote> <p>Diese Seite wird von Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern und Javasript-Verweigerern auch so gebraucht. Da wirfst du ein bisschen viel in einen Topf. Bei Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern wird JavaScript durchaus ausgeführt. Und „das Problem sind nicht die Leute, die bewusst JavaScript in ihrem Browser deaktivieren. Wenngleich das auch beachtet werden sollte, das ist beileibe nicht die Hauptursache für JavaScript-Fehler.“</p> </blockquote> </blockquote> <p>Ich habe nicht vor, mehr als 2 Töpfe zu füllen. Das ist nicht "ein bisschen viel", sondern nur eine unvollständige Auflistung. Wenn einzelne User in dieser Gruppe genannt werden, und trotzdem auf dem andern Topf was wollen und auch vertragen, soll es mir recht sein. Und dass das nicht die Hauptursache <s>für</s> von JavaScript-Fehlern ist, weiß ich aus Erfahrung. Das ist aber die Ursache, die ich nicht verhindern kann und deshalb immer berücksichtigen muss.</p> <blockquote> <p>Du kannst das aber auch einfacher haben, indem du all diesen Buttons, die ohne JavaScript keine Funktion haben, im HTML ein disabled-Attribut mitgibst, welches du mit JavaScript entfernst</p> </blockquote> <p>Auf die Idee hätte ich auch schon kommen können. Danke. Das mach ich.</p> <blockquote> <p>Aber Steinzeit-Browser, echt jetzt?</p> </blockquote> <p>Ich dachte, ich hätte das mit den Browsern schon beschrieben. Aber das war offensichtlich wo anders. Hier finde ich es nicht. Die marktführenden Sps-Programmier-Softwares (Simatic Step7, WinCC flexilbe, TIA Portal) benötigen in der aktuellen Version Winwows7. Deshalb haben die meisten Programmierer Firmenrechner mit diesem System. Die anderen arbeiten meist in Firmen, die Anlagen betreiben, die noch mit Simatic Step5 programmiert wurden. Diese Programmierer müssen auf ihrem Rechner daher WinXP haben. Darauf läuft dann auch Simatic Step7 und WinCC flexilbe, allerdings nicht TIA Portal. Wenn diese Leute ein Browserupdate wollen, müssen sie sich an den für sie zuständigen Admin wenden, der natürlich zu einer ganz anderen Abteilung gehört. IT hat schließlich nichts mit Anlagenprogrammierung, Anlagenwartung o.ä. zu tun. Damit der seinen Dienst abrechnen kann, braucht er also vom Vorgesetzten des Programmierers einen Auftrag… Mein Vorgesetzten hat mich bei der Gelegenheit gefragt, welches Problem es denn mit dem alten Browser gibt und wozu ich den brauche. Wir hatten damals viel Stress und sind trotz Überstunden und Samstagsarbeit mit der Arbeit nicht nachgekommen. Ich habe daher erklärt, dass ich mich während der Arbeit langweile und im Internet surfen will… Viele Leute aus meiner Berufsgruppe und auch aus vielen anderen benutzen auf ihren Arbeitsrechnern (oft nicht ganz freiwillig) den Browser, der mit dem Betriebssystem installiert wurde. Bei Win7 kann man unter verschiedenen Browsern wählen. Der neuste davon ist der IE8, der auch auf meinem Arbeitsrechner ist. Diese Browser werden wohl noch mindestens so lange benutzt werden, wie Siemens den Markt für SPS-Progammierung beherrscht.</p> <blockquote> <p>Den Sinn habe ich nicht verstanden. class="hi" taucht im Weiteren nicht auf. Und für „offen“ und „zu“ sollte ein Flag reichen – eben das aria-expanded-Attribut.</p> </blockquote> <p>Diese 4 Möglichkeiten mit 3 Klassen gibt es aber und sie werden auch gebraucht. Aber das habe ich nicht beschrieben, weil es nicht zu diesem Problem gehört.</p> <p>Ich danke dir. Ich denke, ich komme jetzt erst mal selbst weiter.</p>