tag:forum.selfhtml.org,2005:/self Hilfe bei JavaScript – SELFHTML-Forum 2017-06-15T19:40:25Z https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696359#m1696359 Boris Bär 2017-06-12T22:23:45Z 2017-06-12T22:23:45Z Hilfe bei JavaScript <p>Hallo liebe Community!</p> <p>Ich bin ein absoluter Einsteiger in JavaScript und ich bin eigentlich erstaunt, dass ich überhaupt so weit gekommen bin mit meinem Projekt. Es geht um folgendes, ich habe eine Art interaktives Buch für The Elder Scrolls Online geschrieben bzw. bin ich gerade dabei das Layout dafür zu erstellen.</p> <p>Hier ist ein Beispiel zu finden: http://www.brsbaer.de/bibliothek/vvardenfell/flugblatt-des-paktes/</p> <p>Ich habe es geschafft, dass man die Seiten umblättern kann, stehe jetzt allerdings vor zwei kniffligen Problemen.</p> <ol> <li> <p>Bei jeder Seite muss individuell eingetragen werden, nach wievielen Seiten Schluss ist. In diesem Fall nach Seite 3. Ich würde gerne den Pfeil zum Weiterblättern dann komplett verschwinden lassen und durch einen ausgegrauten ersetzen, der nicht mehr anklickbar ist.</p> </li> <li> <p>Die Seitenzählung. Ich möchte einfach nur die Seite anzeigen lassen, auf der man sich gerade befindet, aber durch document.write(page_number) sieht man zwar die Nummer, allerdings schaltet sie nicht um, da kein richtiger "Trigger" da ist. Ich denke da müsste sich was mit dem event-tag von JavaScript machen lassen, aber ich kenne mich leider da gar nicht aus und meine Experimente sind bisher gescheitert.</p> </li> </ol> <p>Ich wäre für jede Hilfe sehr dankbar!</p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696361#m1696361 1unitedpower 2017-06-12T22:40:15Z 2017-06-13T07:02:31Z Hilfe bei JavaScript <p>Gar nicht schlecht für den Anfang </p> <p>Du könntest als nächstes, die Stelle:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>page_number<span class="token punctuation">)</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>durch folgendes HTML ersetzen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>pageNumber<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> </code></pre> <p>Und dann in deiner <code>if</code>/<code>else</code>-Verzweigung das <code><span></code>-Element mit der aktuellen Seitenanzahl aktualisieren:</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#pageNumber'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> page_number<span class="token punctuation">;</span> </code></pre> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696388#m1696388 Boris Bär 2017-06-13T07:38:53Z 2017-06-13T09:23:01Z Hilfe bei JavaScript <p>Wow, super! Das hat das Problem mit der Seitenzahl gelöst! Vielen Dank!</p> <p>Jetzt gilt es nur noch herauszufinden, wie ich das mit der letzten Seite umsetze.</p> <p>Habe folgendes probiert, klappt aber irgendwie nicht:</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"input#next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pageNumber<span class="token operator">>=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#next_page-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token boolean">false</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> <p>Weiß jemand Rat?</p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696392#m1696392 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-06-13T08:08:32Z 2017-06-13T09:22:58Z Hilfe bei JavaScript <p>Hallo Boris Bär,</p> <blockquote> <p>Habe folgendes probiert, klappt aber irgendwie nicht:</p> </blockquote> <p>Du könntest ein paar Fehler beseitigen: <a href="https://validator.nu/?doc=http%3A%2F%2Fwww.brsbaer.de%2Fbibliothek%2Fvvardenfell%2Fflugblatt-des-paktes%2F" rel="noopener noreferrer">https://validator.nu/?doc=http%3A%2F%2Fwww.brsbaer.de%2Fbibliothek%2Fvvardenfell%2Fflugblatt-des-paktes%2F</a></p> <blockquote> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"input#next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pageNumber<span class="token operator">>=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#next_page-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token boolean">false</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>IDs müssen dokumentweit eindeutig sein. Die Selektoren sind also überspezifiziert. <code>#next_page</code> reicht.</p> <p>Warum mischst du JavaScript mit JQuery?</p> <p>Was ist, wenn es mehr als 2 Seiten gibt?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696399#m1696399 Boris Bär 2017-06-13T08:40:23Z 2017-06-13T09:22:52Z Hilfe bei JavaScript <p>Danke Matthias, habe jetzt das input bei #next_page und #previous_page ausgelassen.</p> <p>Wie gesagt bin ich eigentlich überhaupt nicht bewandert jenseits von etwas HTML und CSS. Ich versuche, immer mehr dazu zu lernen, aber hauptsächlich ist es Learning by Doing. Mit JQuery bzw. JavaScript habe ich praktisch gestern erst angefangen.</p> <p>Mit Validierungsprozessen kenne ich mich kaum aus, ich werde mir die Ergebnisse mal ganz genau anschauen und versuche dann, die Fehler zu beheben! Hoffentlich klappt es.</p> <p>Wo mische ich JQuery und JavaScript? Meine Vermutung: $("#next_page").click(function() ist JQuery und document.addEventListener("DOMContentLoaded", function() ist JavaScript?</p> <p>Wenn ich zum Beispiel ersteres auch durch addEventListener erstetze, habe ich dann reines JavaScript? Was müsste ich denn dann hier ändern: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> ?</p> <p>Die gute Nachricht ist: Ich habe es tatsächlich hingekriegt, dass auf der Website alles so funktioniert wie es soll! Ich habe das Script oben in der HTML-Datei platziert, deshalb hat es nicht geklappt. Jetzt füge ich jeder Seite ein kleines Script am Ende hinzu, das die "Vorherige-Seite"- und "Nächste-Seite"-Inputs reguliert.</p> <p>Sieht dann folgendermaßen aus und kann dann je nach Anzahl der Seiten umgeschrieben werden:</p> <pre><code class="block language-html"><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><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pageNumber<span class="token operator">==</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#previous_page-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pageNumber<span class="token operator">>=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#next_page-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</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><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">"previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pageNumber<span class="token operator">==</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#previous_page-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pageNumber<span class="token operator">==</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#next_page-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</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><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696406#m1696406 Boris Bär 2017-06-13T11:46:49Z 2017-06-13T11:48:10Z Hilfe bei JavaScript <p>Ich habe den Code nochmal umgeschrieben, damit er etwas sauberer ist.</p> <p>JavaScript und JQuery zu vermischen scheints Tragisches zu sein wie ich recherchiert habe. Vor allem wegen der FadeIn-Funktion kann ich nicht darauf verzichen.</p> <p>In der Index-HTML stehen die Variablen und die allgemeine Funktion zum Umblättern.</p> <p>Achtung: Das Script sollte ganz am Ende der Seite stehen, unter dem </body>-Tag.</p> <pre><code>var pageNumber = 1; var previousPage = document.getElementById("previous_page"); var nextPage = document.getElementById("next_page"); previousPage.addEventListener("click", function(){ if ( pageNumber == 1 ) { return false; } else if ( pageNumber == 2 ) { $("input#previous_page").hide(); $("img#previous_page-disabled").show(); $("#text_page_02").hide(); $("#text_page_01").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 3) { $("#text_page_03").hide(); $("#text_page_02").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 4) { $("#text_page_04").hide(); $("#text_page_03").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 5) { $("#text_page_05").hide(); $("#text_page_04").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 6) { $("#text_page_06").hide(); $("#text_page_05").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 7) { $("#text_page_07").hide(); $("#text_page_06").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 8) { $("#text_page_08").hide(); $("#text_page_07").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 9) { $("#text_page_09").hide(); $("#text_page_08").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 10) { $("#text_page_10").hide(); $("#text_page_09").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } }); nextPage.addEventListener("click", function(){ if ( pageNumber == 1 ) { $("input#previous_page").show(); $("img#previous_page-disabled").hide(); $("#text_page_01").hide(); $("#text_page_02").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 2 ) { $("#text_page_02").hide(); $("#text_page_03").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 3 ) { $("#text_page_03").hide(); $("#text_page_04").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 4 ) { $("#text_page_04").hide(); $("#text_page_05").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 5 ) { $("#text_page_05").hide(); $("#text_page_06").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 6 ) { $("#text_page_06").hide(); $("#text_page_07").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 7 ) { $("#text_page_07").hide(); $("#text_page_08").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 8 ) { $("#text_page_08").hide(); $("#text_page_09").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 9 ) { $("#text_page_09").hide(); $("#text_page_10").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 10 ) { $("#text_page_10").hide(); $("#text_page_11").fadeIn(600); pageNumber++; document.querySelector('#pageNumber').textContent = pageNumber; } }); document.addEventListener("DOMContentLoaded", function(){ if ( pageNumber == 1 ) { $("#previous_page").hide(); $("#previous_page-disabled").show(); } else { return false; } }); </code></pre> <p>Ich habe jetzt elf Text-Seiten eingestellt. Natürlich bläht sich das Script mit jeder Seite auf, aber für meine Zwecke benötige ich eigentlich nie mehr als zehn Text-Seiten. Es gibt bestimmt noch eine Möglichkeit, diesen Teil des Codes dynamisch zu machen, damit man nicht für jede Text-Seite einen if-Eintrag benötigt, aber leider ist mir nicht bekannt, wie das geht.</p> <p>Der EventListener mit der DOMContentLoaded-Bedingung dient dazu, den linken Pfeil immer auszublenden, sobald die Seite geladen wurde.</p> <p>Da die maximale Seitenzahl ja bei jedem Text variiert, füge ich bei jeder Seite noch diesen kleinen Code-Abschnitt ebenfalls am Ende der Seite ein.</p> <p>Aber wieder Achtung: Wenn beide Code-Abschnitte sich in demselben HTML-Dokument befinden, dann sollte der kleine Abschnitt vor dem großen stehen.</p> <pre><code>document.getElementById("next_page").addEventListener("click", function(){ if ( pageNumber >= 2) { $("input#next_page").hide(); $("img#next_page-disabled").show(); } else { return false; } }); document.getElementById("previous_page").addEventListener("click", function(){ if ( pageNumber == 3 ) { $("input#next_page").show(); $("img#next_page-disabled").hide(); } else { return false; } }); </code></pre> <p>Das war’s auch schon! Ich dachte, ich teile meine Lösung mal, falls es jemanden interessiert.</p> <p>Herzlichen Dank nochmal an Euch beide für die Hilfe!</p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696407#m1696407 Rolf b 2017-06-13T12:11:59Z 2017-06-13T12:13:19Z Hilfe bei JavaScript <p>Hallo Boris Bär,</p> <p>kann es sein, dass Du beim Basteln doppelten Code produziert hast? Ich finde zwei Stellen, die Click-Handler für next_page und previous_page installieren.</p> <p>Du solltest deinen Script-Block zunächst einmal kapseln, um den globalen Namensraum freizuhalten. Das gilt mittlerweile als schlechter Stil. Zum Beispiel bietet JQuery die Möglichkeit, einen sogenannten Ready-Handler zu setzen - der wird ausgeführt sobald das HTML der Seite geladen ist und das DOM erzeugt wurde. Das geht so:</p> <pre><code class="block language-js">$<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// dein Code</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Du kannst in dieser Ready-Function nun ebenso Event-Handler installieren. UND du kannst Variablen erzeugen, die nur innerhalb dieser Funktion bekannt sind. Wenn Du darin außerdem noch Event-Handler erzeugst, entsteht eine sogenannte Closure, d.h. die Eventhandler-Funktion merkt sich den Laufzeit-Kontext der übergeordneten Ready-Function und hält deine Variable damit am Leben.</p> <p>Für das Verständnis des folgenden Codes diese Hinweise:</p> <ul> <li>Da Du ohnehin schon deine Seiten mit der Klasse letter-text versehen hast, kannst Du relativ leicht deine Seiten zählen (length Eigentschaft des matched set)</li> <li>Wenn Du schon jQuery nimmst, solltest Du es auch als Event-Registrar verwenden.</li> <li>Du kannst deine Seiten mit jQuery adressieren. Das ist nicht unbedingt schnell, aber da Du nur zwei anfasst, ist das kein Problem.</li> <li>Wenn man Code schreibt, in dem sich viele Blöcke sehr ähnlich sehen, schreit das normalerweise "FUNCTION!".</li> </ul> <p>Was jetzt folgt, habe ich im Forum runtergetippt (während Du deine eigene Lösung gepostet hast) und nicht live getestet. Mag also ein paar Dibfeler enthalten. Viel Glück :)</p> <pre><code class="block language-js">$<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Aktuelle Seite ist erstmal unbekannt</span> <span class="token keyword">var</span> pageNumber <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">// jQuery matched set für alle Seiten bilden und speichern</span> <span class="token keyword">var</span> $pages <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".letter-text"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token function-variable function">changePage</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">newPage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// newPage nicht im Bereich -> nichts tun</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>newPage <span class="token operator"><</span> <span class="token number">1</span> <span class="token operator">||</span> newPage <span class="token operator">></span> $pages<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">// Seite wechseln </span> <span class="token keyword">if</span> <span class="token punctuation">(</span>pageNumber <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> $pages<span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span>pageNumber<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $pages<span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span>newPage<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fadeIn</span><span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span> pageNumber <span class="token operator">=</span> newPage<span class="token punctuation">;</span> <span class="token comment">// Navigationselemente updaten</span> <span class="token function">controlNavigation</span><span class="token punctuation">(</span><span class="token string">"previous_page"</span><span class="token punctuation">,</span> pageNumber <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">controlNavigation</span><span class="token punctuation">(</span><span class="token string">"next_page"</span><span class="token punctuation">,</span> pageNumber <span class="token operator"><</span> $pages<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token function-variable function">controlNavigation</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> show</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>show<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#"</span><span class="token operator">+</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#"</span><span class="token operator">+</span>id<span class="token operator">+</span><span class="token string">"-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#"</span><span class="token operator">+</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#"</span><span class="token operator">+</span>id<span class="token operator">+</span><span class="token string">"-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</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><span class="token punctuation">;</span> <span class="token comment">// Eventhandler registrieren</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">changePage</span><span class="token punctuation">(</span>pageNumber<span class="token operator">+</span><span class="token number">1</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> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">changePage</span><span class="token punctuation">(</span>pageNumber<span class="token operator">-</span><span class="token number">1</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> <span class="token comment">// Seite 1 aktivieren</span> <span class="token function">changePage</span><span class="token punctuation">(</span><span class="token number">1</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> <p>Ich glaube, mehr Code als das hier brauchst Du nicht.</p> <p><em>Rolf</em></p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696592#m1696592 Camping_RIDER janosch.zoller@gmx.de http://www.campingrider.de 2017-06-15T10:06:32Z 2017-06-15T10:06:32Z Hilfe bei JavaScript <p>Aloha ;)</p> <blockquote> <p>Ich habe jetzt elf Text-Seiten eingestellt. Natürlich bläht sich das Script mit jeder Seite auf, aber für meine Zwecke benötige ich eigentlich nie mehr als zehn Text-Seiten. Es gibt bestimmt noch eine Möglichkeit, diesen Teil des Codes dynamisch zu machen, damit man nicht für jede Text-Seite einen if-Eintrag benötigt, aber leider ist mir nicht bekannt, wie das geht.</p> </blockquote> <p>Ganz einfach: überall wo in deinem Code zigmal hintereinander das gleiche passiert mit nur marginalen Unterschieden (z.B. in der id) kannst du optimieren. Beispielsweise:</p> <blockquote> <p>var pageNumber = 1;</p> <p>var previousPage = document.getElementById("previous_page");</p> <p>var nextPage = document.getElementById("next_page");</p> <p>previousPage.addEventListener("click", function(){</p> <pre><code> if ( pageNumber == 1 ) { return false; } else if ( pageNumber == 2 ) { $("input#previous_page").hide(); $("img#previous_page-disabled").show(); $("#text_page_02").hide(); $("#text_page_01").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 3) { $("#text_page_03").hide(); $("#text_page_02").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 4) { $("#text_page_04").hide(); $("#text_page_03").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 5) { $("#text_page_05").hide(); $("#text_page_04").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 6) { $("#text_page_06").hide(); $("#text_page_05").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 7) { $("#text_page_07").hide(); $("#text_page_06").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 8) { $("#text_page_08").hide(); $("#text_page_07").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 9) { $("#text_page_09").hide(); $("#text_page_08").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } else if ( pageNumber == 10) { $("#text_page_10").hide(); $("#text_page_09").fadeIn(600); pageNumber--; document.querySelector('#pageNumber').textContent = pageNumber; } </code></pre> <p>});</p> </blockquote> <p>wird zu:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> pageNumber <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">var</span> previousPage <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">"previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> nextPage <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">"next_page"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> lastPage <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token comment">// das möchtest du vielleicht auch irgendwann dann dynamisch ermitteln</span> previousPage<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// spezielle Aktion - bleibt einzeln:</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> pageNumber <span class="token operator">==</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// spezielle Aktion - bleibt einzeln:</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> pageNumber <span class="token operator">==</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#previous_page-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#text_page_02"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#text_page_01"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fadeIn</span><span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span> pageNumber<span class="token operator">--</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#pageNumber'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> pageNumber<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// ab hier passiert immer das Gleiche - zusammenfassen:</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> pageNumber <span class="token operator">>=</span> <span class="token number">3</span> <span class="token operator">&&</span> pageNumber <span class="token operator"><=</span> lastPage<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#text_page_"</span><span class="token operator">+</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span>pageNumber<span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token operator">?</span><span class="token string">"0"</span><span class="token operator">+</span>pageNumber<span class="token operator">:</span>pageNumber<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#text_page_"</span><span class="token operator">+</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span>pageNumber<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token operator">?</span><span class="token string">"0"</span><span class="token operator">+</span><span class="token punctuation">(</span>pageNumber<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token punctuation">(</span>pageNumber<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fadeIn</span><span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span> pageNumber<span class="token operator">--</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#pageNumber'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> pageNumber<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> <p>Der Block</p> <pre><code class="block language-javascript"><span class="token punctuation">(</span><span class="token punctuation">(</span>pageNumber<span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token operator">?</span><span class="token string">"0"</span><span class="token operator">+</span>pageNumber<span class="token operator">:</span>pageNumber<span class="token punctuation">)</span> </code></pre> <p>tut nichts anderes als entweder die pageNumber liefern oder, falls sie kleiner als 10 ist, die pageNumber mit führender Null liefern.</p> <p>Ich würde dir allerdings hier wärmstens empfehlen, das Code Design zu ändern und statt <code>#text_page_01</code>, ..., <code>#text_page_09</code>, <code>#text_page_10</code>, ... ein <code>#text_page_1</code>, <code>#text_page_2</code>, ... <code>#text_page_9</code>, <code>#text_page_10</code>, ... zu verwenden. Die einzelne führende Null bei Zahlen unter 10 bedeutet nur Zusatzaufwand und schlechte Robustheit (was, wenn du das mal wo verwenden willst, wo es mehr als 99 Seiten gibt?). Wenn du das änderst wird dein Code noch einfacher. Zusätzlich kann man sogar einen Teil der Aktionen bei pageNumber == 2 mit in die Zusammenfassung nehmen:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> pageNumber <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">var</span> previousPage <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">"previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> nextPage <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">"next_page"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> lastPage <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token comment">// das möchtest du vielleicht auch irgendwann dann dynamisch ermitteln</span> previousPage<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// ganz spezielle Aktion - bleibt auf jeden Fall einzeln:</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> pageNumber <span class="token operator">==</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// ab hier passiert immer das Gleiche - zusammenfassen:</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> pageNumber <span class="token operator">>=</span> <span class="token number">2</span> <span class="token operator">&&</span> pageNumber <span class="token operator"><=</span> lastPage<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Spezialaktion für pageNumber == 2</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>pageNumber <span class="token operator">==</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input#previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img#previous_page-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#text_page_"</span><span class="token operator">+</span>pageNumber<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#text_page_"</span><span class="token operator">+</span><span class="token punctuation">(</span>pageNumber<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fadeIn</span><span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span> pageNumber<span class="token operator">--</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#pageNumber'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> pageNumber<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> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696423#m1696423 borisbaer 2017-06-13T16:42:44Z 2017-06-13T16:45:36Z Hilfe bei JavaScript <p>Hallo Rolf,</p> <blockquote> <p>kann es sein, dass Du beim Basteln doppelten Code produziert hast? Ich finde zwei Stellen, die Click-Handler für next_page und previous_page installieren.</p> </blockquote> <p>Ja, ich habe zwei Click-Handler benutzt, den einen für das normale Umblättern, den anderen, um festzulegen, bis zu welcher Seite geblättert werden kann.</p> <blockquote> <p>$.ready(function()</p> </blockquote> <blockquote> <p>{ // dein Code</p> </blockquote> <blockquote> <p>});</p> </blockquote> <p>Wenn ich mein Script damit kapsle, dann funktioniert plötzlich gar nichts mehr, keine Ahnung warum.</p> <p>Für deine Anmerkungen in der Mitte fehlt mir leider einfach das grundsätzliche Verständnis für JavaScript. Das habe ich leider nur halb verstanden, tut mir leid.</p> <p>Ich habe meinen Code durch deinen probeweise ausgetauscht, aber leider tut sich da dann gar nichts.</p> <p>Ergibt für mich eigentlich Sinn und ich verstehe nicht, wieso es nicht funktioniert, aber leider ist es so. Hast du eine Idee woran es liegen könnte? Tippfehler habe ich keine gefunden.</p> <p>Ich speise es am Ende der Seite, gleich nach dem </body>-Tag ein, dann folgt …</p> <pre><code class="block language-javascript"><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"https://code.jquery.com/jquery-3.2.1.min.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token comment">// dein obiges Script</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>Mehr habe ich nicht getan, sonst befindet sich auch kein anderes Script auf der Seite.</p> <p>Vielen Dank und beste Grüße Boris</p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696425#m1696425 Rolf b 2017-06-13T17:34:24Z 2017-06-14T08:42:47Z Hilfe bei JavaScript <p>Ja sorry, ich sag ja: schnell zusammen getippt.</p> <p class="bad">Das hier war leider Müll:</p> <pre><code class="block language-js">$<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// dein Code</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p class="good">Richtig gewesen wäre <code>$().ready...</code>, aber nimm bitte das hier:</p> <pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// dein Code</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Grund: Die <a href="http://api.jquery.com/ready/" rel="nofollow noopener noreferrer">jquery-Doku</a> sagt, dass .ready() und noch etliche weitere Varianten ab jQuery 3.0 als missbilligt gelten. Empfohlen ist nur noch das, was in der grünen Box steht. Die Kollegen bauen Altlasten ab :)</p> <p>Der Rest müsste aber funktionieren; hab's jetzt schnell mal zusammen mit deinen DIVs in ein Fiddle kopiert und es hat geklappt.</p> <p>Zwei Click-Handler brauchst Du meiner Meinung nach nicht, das kann alles einer lösen.</p> <p>Dein Markup und die controlNavigation Funktion könnte übrigens einfacher werden, wenn Du das HTML etwas änderst - aber mein PC hier macht gerade einen unstoppbaren Countdown zum Neustart, das muss ich ein andermal schreiben.</p> <p><em>Rolf</em></p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696430#m1696430 Rolf b 2017-06-13T20:48:08Z 2017-06-14T10:23:55Z Hilfe bei JavaScript <p>So, ich habe mal was gebastelt und deine Navigations-Elemente auf CSS umgestellt. Guckst Du hier:</p> <p><a href="https://jsfiddle.net/Rolf_b/9cndgm3r/1/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/9cndgm3r/1/</a></p> <p>Das Nebeneinanderstellen von Buttons und Text habe ich per Flexbox gemacht, statt mit position und float, das kannst Du aber halten wie Du willst </p> <p>Guck's Dir einfach mal an.</p> <p>Wenn Du die Sache mit der Closure nicht verstanden hast - keine Panik, das haben viele nicht. Es ist aber eine essenzielle Eigenschaft von Javascript - oder allgemein von funktionalen Programmierkonzepten, und eigentlich gar nicht schwer. Wenn Du Dir meine Haupt-Funktion anschaust: Die definiert Variablen pageNumber und $pages, sowie eine Funktion changePage. Innerhalb von changePage wird auf pageNumber und $pages zugegriffen. Dann wird changePage als Event-Handler registriert und DANN ENDET DER READY-HANDLER. In einer Programmiersprache ohne Closures wäre jetzt der Teufel los, weil es die Variablen nicht mehr gibt. Entweder gäbe es eine Fehlermeldung, oder das Programm würde bösartig in verlassenem und möglicherweise anderweit belegtem Speicher herumstochern. JavaScript ist anders. JavaScript bemerkt den Zugriff auf die Variable aus ihrer Umgebung, legt da ein Körbchen drumherum (die Closure) und hängt das Körbchen an die changePage Funktion. Auf diese Weise kann changePage mit Variablen eines längst verlassenen Aufruf-Kontextes weiterarbeiten und braucht keinerlei globale Variablen.</p> <p>Den Rest meiner Hinweise habe ich im Codebeispiel bereits umgesetzt.</p> <p><em>Rolf</em></p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696433#m1696433 borisbaer 2017-06-13T20:56:50Z 2017-06-13T21:03:05Z Hilfe bei JavaScript <p>Mensch! Jetzt funktioniert alles tadellos!</p> <p>Vielen, vielen Dank, Rolf! Du hast mir sehr geholfen.</p> <blockquote> <p>Wenn Du die Sache mit der Closure nicht verstanden hast - keine Panik, das haben viele nicht. Es ist aber eine essenzielle Eigenschaft von Javascript - oder allgemein von funktionalen Programmierkonzepten, und eigentlich gar nicht schwer. Wenn Du Dir meine Haupt-Funktion anschaust: Die definiert Variablen pageNumber und $pages, sowie eine Funktion changePage. Innerhalb von changePage wird auf pageNumber und $pages zugegriffen. Dann wird changePage als Event-Handler registriert und DANN ENDET DER READY-HANDLER. In einer Programmiersprache ohne Closures wäre jetzt der Teufel los, weil es die Variablen nicht mehr gibt. Entweder gäbe es eine Fehlermeldung, oder das Programm würde bösartig in verlassenem und möglicherweise anderweit belegtem Speicher herumstochern. JavaScript ist anders. JavaScript bemerkt den Zugriff auf die Variable aus ihrer Umgebung, legt da ein Körbchen drumherum (die Closure) und hängt das Körbchen an die changePage Funktion. Auf diese Weise kann changePage mit Variablen eines längst verlassenen Aufruf-Kontextes weiterarbeiten und braucht keinerlei globale Variablen.</p> </blockquote> <p>Ah, ja okay, so etwas in der Art hatte ich mir schon gedacht. Danke, dass du es nochmal erklärt hast! </p> <p>Das Klick-Event habe ich noch ergänzt mit dem Code von 1unitedpower, damit auch die Seitenzählung unten funktioniert.</p> <pre><code class="block language-javascript"> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#next_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">changePage</span><span class="token punctuation">(</span>pageNumber<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#pageNumber'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> pageNumber<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#previous_page"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">changePage</span><span class="token punctuation">(</span>pageNumber<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#pageNumber'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> pageNumber<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Problem gelöst! Auf zum nächsten! Vielen Dank für die Mühe! </p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696435#m1696435 borisbaer 2017-06-13T22:31:12Z 2017-06-14T08:42:35Z Hilfe bei JavaScript <p>So Rolf, habe jetzt alles nach deinem Vorbild umgesetzt und es ist einfach genial! Es ist sehr elegant und funktioniert wirklich ausgezeichnet! Tausend Dank!!! </p> <p>Kann man sich hier live anschauen: <a href="http://www.brsbaer.de/bibliothek/vvardenfell/flugblatt-des-paktes-herzlichen-glueckwunsch/" rel="nofollow noopener noreferrer">http://www.brsbaer.de/bibliothek/vvardenfell/flugblatt-des-paktes-herzlichen-glueckwunsch/</a></p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696510#m1696510 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-14T10:29:29Z 2017-06-14T10:29:29Z Hilfe bei JavaScript <p>@@Rolf b</p> <blockquote> <p>Guckst Du hier:</p> <p><a href="https://jsfiddle.net/Rolf_b/9cndgm3r/1/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/9cndgm3r/1/</a></p> </blockquote> <p>Die fehlende Verlinkung hab ich mal für dich berichtigt.</p> <p>Dann guck ich mal:</p> <p><code class="language-html bad"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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 punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></p> <p><strong>Aua!</strong> Sowas sollte in keinem Beispielcode stehen!</p> <p>Gib den Buttons bitte unbedingt noch eine Beschriftung!</p> <p><code class="language-html good"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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 punctuation">></span></span>vorige Seite<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code> und <code class="language-html good"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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 punctuation">></span></span>nächste Seite<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></p> <p>Die Beschriftung kannst du <a href="http://a11yproject.com/posts/how-to-hide-content/" rel="nofollow noopener noreferrer">visuell verstecken</a>, sie muss aber vorhanden sein.</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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696633#m1696633 Henry 2017-06-15T15:20:45Z 2017-06-15T15:20:45Z Hilfe bei JavaScript <p>Hallo Boris,</p> <blockquote> <p>Problem gelöst! Auf zum nächsten! Vielen Dank für die Mühe!</p> </blockquote> <p>*nur zur Info Ich weiß nicht ob deine Seite jetzt eine Testseite ist oder schon das endgültige Layout. Daher für dich mal sicherheitshalber einen Screenshot wie es im IE11 aussieht.</p> <p><a href="/images/690d1bae-0354-4994-ac9f-36098e1877b5.jpg" rel="noopener noreferrer"><img src="/images/690d1bae-0354-4994-ac9f-36098e1877b5.jpg?size=medium" alt="Boris" title="Boris" loading="lazy"></a></p> <p>Gruss<br> Henry</p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696514#m1696514 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-14T10:35:43Z 2017-06-14T10:35:43Z Hilfe bei JavaScript <p>@@borisbaer</p> <blockquote> <p>So Rolf, habe jetzt alles nach deinem Vorbild umgesetzt und es ist einfach genial!</p> </blockquote> <p>Nein, von Genialität ist das noch ein Stück weit entfernt. Aber ein machbares Stück:</p> <blockquote> <p>Es ist sehr elegant und funktioniert wirklich ausgezeichnet!</p> </blockquote> <p>Außer dass es <strong>nicht</strong> funktioniert.</p> <p>Zum einen haben die Buttons <a href="https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696510#m1696510" rel="noopener noreferrer">keine Beschriftung</a></p> <p>Zum anderen ist bei Tastaturnavigation nicht erkennbar, wenn ein Button den Fokus hat. Ändere die Farbe nicht nur bei <code>:hover</code>, sondern auch bei <code>:focus</code>!</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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696529#m1696529 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-06-14T13:33:05Z 2017-06-14T13:34:11Z Hilfe bei JavaScript <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Die Beschriftung kannst du <a href="http://a11yproject.com/posts/how-to-hide-content/" rel="nofollow noopener noreferrer">visuell verstecken</a></p> </blockquote> <p>Wobei ich das als Hilfestellung problematisch finde:</p> <pre><code class="block language-css"><span class="token selector">.visually-hidden</span> <span class="token punctuation">{</span> <span class="token comment">/*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px 1px 1px 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* IE6, IE7 */</span> <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1px <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1px <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button</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> <span class="token punctuation">}</span> </code></pre> <ul> <li>die vielen importants sollten nicht notwendig sein</li> <li><code>display: none;</code> versteckt auch vor Screenreadern</li> <li>warum muss ein übergeordnetes Element (welches?) visuell versteckt werden?</li> <li><code>body</code> kann auch deutlich kleiner als der Viewport werden.</li> </ul> <p>Ich muss gestehen, dass ich den Sinn so nicht verstehe.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696536#m1696536 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-14T14:30:52Z 2017-06-14T14:30:52Z Hilfe bei JavaScript <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>Die Beschriftung kannst du <a href="http://a11yproject.com/posts/how-to-hide-content/" rel="nofollow noopener noreferrer">visuell verstecken</a></p> </blockquote> <p>Wobei ich das als Hilfestellung problematisch finde:</p> <pre><code class="block language-css"><span class="token selector">.visually-hidden</span> <span class="token punctuation">{</span> <span class="token comment">/*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px 1px 1px 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* IE6, IE7 */</span> <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1px <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1px <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button</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> <span class="token punctuation">}</span> </code></pre> <ul> <li>die vielen importants sollten nicht notwendig sein</li> </ul> </blockquote> <p>Doch, sind sie.</p> <p>Beispiel: <code class="language-htlm"><foo class="bar visually-hidden"></code> mit <code class="language-css"><span class="token selector">foo.bar</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative <span class="token punctuation">}</span></code> Die Regel für einen spezifischeren Selektor soll ja überschrieben werden.</p> <p>Vermutlich wurde <code>!important</code> bei <code>clip</code> und <code>overflow</code> vergessen.</p> <blockquote> <ul> <li><code>display: none;</code> versteckt auch vor Screenreadern</li> </ul> </blockquote> <p>Soll auch. <em lang="en">“The idea is to rely on the pseudo-class :hover to remove all focusable elements in the hidden container from the tabbing sequence.”</em> (unter <a href="http://web.archive.org/web/20160616144545/https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html" lang="en" rel="nofollow noopener noreferrer">Tabbing Navigation</a>)</p> <blockquote> <ul> <li>warum muss ein übergeordnetes Element (welches?) visuell versteckt werden?</li> </ul> </blockquote> <p>Was meinst du damit?</p> <blockquote> <ul> <li><code>body</code> kann auch deutlich kleiner als der Viewport werden.</li> </ul> </blockquote> <p>Hm, ja. Das sollte wohl besser <code class="language-css"><span class="token property">html</span><span class="token punctuation">:</span>hover</code> heißen.</p> <blockquote> <p>Ich muss gestehen, dass ich den Sinn so nicht verstehe.</p> </blockquote> <p><a href="https://twitter.com/g16n/status/845880911799443456" rel="nofollow noopener noreferrer">Da war ich auch mal.</a></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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696544#m1696544 Boris Bär 2017-06-14T15:01:48Z 2017-06-14T15:01:48Z Hilfe bei JavaScript <p>Danke für die Hinweise, Gunnar!</p> <p>Reicht es, wenn ich in der CSS-Datei folgenden Code hinzufüge?</p> <pre><code class="block language-css"><span class="token selector">#next_page button:focus</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'images/library/next_page-hover.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#previous_page button:focus</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'images/library/previous_page-hover.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Den Buttons habe ich Text beigefügt, soll ich den Text einfach durch span style=display:hidden oder so verstecken? Gibt es eine elegantere Methode?</p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696555#m1696555 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-06-14T17:23:07Z 2017-06-14T17:23:07Z Hilfe bei JavaScript <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <ul> <li>die vielen importants sollten nicht notwendig sein</li> </ul> </blockquote> <p>Doch, sind sie.</p> <p>Beispiel: <code class="language-htlm"><foo class="bar visually-hidden"></code> mit <code class="language-css"><span class="token selector">foo.bar</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative <span class="token punctuation">}</span></code> Die Regel für einen spezifischeren Selektor soll ja überschrieben werden.</p> <p>Vermutlich wurde <code>!important</code> bei <code>clip</code> und <code>overflow</code> vergessen.</p> </blockquote> <p>Nun ja, wir wollen ja kein weltweit gültiges Stylesheet schreiben, aber ok. </p> <blockquote> <blockquote> <ul> <li><code>display: none;</code> versteckt auch vor Screenreadern</li> </ul> </blockquote> <p>Soll auch. <em lang="en">“The idea is to rely on the pseudo-class :hover to remove all focusable elements in the hidden container from the tabbing sequence.”</em> (unter <a href="http://web.archive.org/web/20160616144545/https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html" lang="en" rel="nofollow noopener noreferrer">Tabbing Navigation</a>)</p> <blockquote> <ul> <li>warum muss ein übergeordnetes Element (welches?) visuell versteckt werden?</li> </ul> </blockquote> <p>Was meinst du damit?</p> </blockquote> <p>Der Selektor heißt (verkürzt) <code>.visually-hidden button</code>. Warum sollte ich, wenn ich einen Button verstecken möchte, diesen in ein Element packen, das visuell versteckt ist?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696549#m1696549 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-14T15:35:03Z 2017-06-14T15:35:03Z Hilfe bei JavaScript <p>@@Boris Bär</p> <blockquote> <p>Reicht es, wenn ich in der CSS-Datei folgenden Code hinzufüge?</p> <pre><code class="block language-css"><span class="token selector">#next_page button:focus</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'images/library/next_page-hover.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#previous_page button:focus</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'images/library/previous_page-hover.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>DRY! <em lang="en">(Don’t repeat yourself!)</em></p> <p>DU hast schon entsprechende Regeln für den <code>:hover</code>-Status. In diesen die Selektoren für <code>:focus</code> hinzufügen (wenn denn dasselbe passieren sool):</p> <pre><code class="block language-css"><span class="token selector">#next_page button:hover, #next_page button:focus</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'images/library/next_page-hover.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#previous_page button:hover, #previous_page button:focus</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'images/library/previous_page-hover.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Den Buttons habe ich Text beigefügt, soll ich den Text einfach durch span style=display:hidden oder so verstecken?</p> </blockquote> <p>Nein. Damit würdest du den Text auch vor denen verstecken, die ihn nötig haben – Screenreader.</p> <blockquote> <p>Gibt es eine elegantere Methode?</p> </blockquote> <p>Die Beschriftung in ein <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>visually-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> packen und den gezeigten CSS-Code für die Klasse <code>visually-hidden</code> übernehmen. ☞ <a href="https://codepen.io/gunnarbittersmann/pen/zzKRjB" rel="noopener noreferrer">CodePen</a></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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696562#m1696562 Rolf b 2017-06-14T18:11:19Z 2017-06-14T18:11:19Z Hilfe bei JavaScript <p>Oha, hab's grad nochmal aufgerufen, scheinbar bastelst Du gerade arg herum </p> <p>Ich hatte nicht den Anspruch, eine rundum perfekten Vorlage zu liefern. Mein Fokus war die Verbesserung des Javascript-Teils.</p> <p>Mit dem Button-Text bin ich mir noch uneins. Es gibt zwei Szenarien, wo der Text relevant ist: Screen-Reader, und ein fehlerhaft übertragenes Bild. Für Fall 2 wäre visually-hidden nicht passend.</p> <p>Eine schöne Lösung dafür will mir gerade nicht einfallen. Oder gilt Fall 2 als irrelevant?</p> <p><em>Rolf</em></p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696608#m1696608 Boris Bär 2017-06-15T11:36:11Z 2017-06-15T11:36:11Z Hilfe bei JavaScript <p>Habe alles so umgesetzt! Vielen Dank für die Hilfe! </p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696557#m1696557 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-14T17:29:12Z 2017-06-14T17:29:12Z Hilfe bei JavaScript <p>@@Matthias Apsel</p> <blockquote> <p>Der Selektor heißt (verkürzt) <code>.visually-hidden button</code>. Warum sollte ich, wenn ich einen Button verstecken möchte, diesen in ein Element packen, das visuell versteckt ist?</p> </blockquote> <p>Nein, andersrum. Du willst einen Button (Link etc.) nicht anzeigen/ausgeben/in der Tab-Reihenfolge haben, der sich in einem visuell versteckten Element befindet.</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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696577#m1696577 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-06-15T07:47:32Z 2017-06-15T07:48:04Z Hilfe bei JavaScript <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <blockquote> <p><code class="language-css"><span class="token selector">html:hover .visually-hidden button</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span></code></p> </blockquote> </blockquote> </blockquote> <blockquote> <p>Nein, andersrum. Du willst einen Button (Link etc.) nicht anzeigen/ausgeben/in der Tab-Reihenfolge haben, der sich in einem visuell versteckten Element befindet.</p> </blockquote> <ul> <li>Man kann auch durch die (visuell sichtbaren) Elemente tabben ohne dass sich der Mauszeiger über dem Dokument befinden muss.</li> <li>Aktuelle Browser scheinen das nicht zu benötigen. (FF, Chr, IE11, Edge; Win10)</li> </ul> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696582#m1696582 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-15T08:23:59Z 2017-06-15T08:32:10Z Hilfe bei JavaScript <p>@@Rolf b</p> <blockquote> <p>Oha, hab's grad nochmal aufgerufen, scheinbar bastelst Du gerade arg herum </p> </blockquote> <p>?? Mit „du“ meinst du Boris?</p> <blockquote> <p>Ich hatte nicht den Anspruch, eine rundum perfekten Vorlage zu liefern. Mein Fokus war die Verbesserung des Javascript-Teils.</p> </blockquote> <p>Das JavaScript kann noch so gut sein – wenn das zugrundeliegende HTML zu Unbenutzbarkeit führt, dann taugt das Beispiel nichts.</p> <blockquote> <p>Mit dem Button-Text bin ich mir noch uneins. Es gibt zwei Szenarien, wo der Text relevant ist: Screen-Reader, und ein fehlerhaft übertragenes Bild. Für Fall 2 wäre visually-hidden nicht passend. […] Oder gilt Fall 2 als irrelevant?</p> </blockquote> <p>Gut, dass du den Fall erwähnst.</p> <blockquote> <p>Eine schöne Lösung dafür will mir gerade nicht einfallen.</p> </blockquote> <p>Sowas in der Art? (<a href="https://codepen.io/gunnarbittersmann/pen/rwWNxW" rel="noopener noreferrer">CodePen</a>)</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vorige Seite<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>…<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 punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>oder</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>…<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">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<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>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>visually-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>vorige Seite<span class="token tag"><span class="token tag"><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>button</span><span class="token punctuation">></span></span> </code></pre> <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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696581#m1696581 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-15T08:10:17Z 2017-06-15T08:10:17Z Hilfe bei JavaScript <p>@@Matthias Apsel</p> <blockquote> <ul> <li>Man kann auch durch die (visuell sichtbaren) Elemente tabben ohne dass sich der Mauszeiger über dem Dokument befinden muss.</li> </ul> </blockquote> <p>Hier geht’s darum, dass man nicht durch die visuell nicht sichtbaren tabben soll.</p> <blockquote> <ul> <li>Aktuelle Browser scheinen das nicht zu benötigen. (FF, Chr, IE11, Edge; Win10)</li> </ul> </blockquote> <p><a href="https://twitter.com/A11YProject/status/848965839231516672" rel="nofollow noopener noreferrer">Das schrub @A11YProject ja:</a> <em lang="en">“It's a <strong>very old</strong> hack, but that bit is for <strong>sighted</strong> users.”</em></p> <p>Die Regel richtet keinen Schaden an. Aber wenn der Hack nur für Browser nötig ist, die langst niemand™ mehr benutzt, dann kann das weg.</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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696588#m1696588 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-06-15T09:23:56Z 2017-06-15T09:23:56Z Hilfe bei JavaScript <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <ul> <li>Man kann auch durch die (visuell sichtbaren) Elemente tabben ohne dass sich der Mauszeiger über dem Dokument befinden muss.</li> </ul> </blockquote> <p>Hier geht’s darum, dass man nicht durch die visuell nicht sichtbaren tabben soll.</p> </blockquote> <p>Ja schon klar.</p> <p>Aber man kann auch tabben ohne das <code>:hover</code> greift.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696590#m1696590 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-15T09:44:19Z 2017-06-15T09:44:19Z Hilfe bei JavaScript <p>@@Gunnar Bittersmann</p> <blockquote> <p>Sowas in der Art? (<a href="https://codepen.io/gunnarbittersmann/pen/rwWNxW" rel="noopener noreferrer">CodePen</a>)</p> </blockquote> <p>Hm, <a href="https://twitter.com/yatil/status/875283961865482242" rel="nofollow noopener noreferrer">Eric Eggert meint:</a> „Das ist eine komplizierte Lösung für ein Nicht-Problem, IMHO.“</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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696623#m1696623 Rolf b 2017-06-15T13:51:02Z 2017-06-15T13:52:14Z Hilfe bei JavaScript <p>Ja, mit dem Basteln meinte ich Boris. Und - wow, du hast Dich ja richtig reingehängt.</p> <p>Eric hat natürlich recht - das wird eher selten passieren. Ich finde deine Idee mit img und Unicode-Symbol im alt aber recht charmant und nicht unnötig kompliziert.</p> <p><em>Rolf</em></p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696629#m1696629 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-15T14:16:36Z 2017-06-15T14:16:36Z Hilfe bei JavaScript <p>@@Rolf b</p> <blockquote> <p>Eric hat natürlich recht - das wird eher selten passieren.</p> </blockquote> <p>Wenn ein Entwickler „das wird eher selten passieren“ sagt, ist das ein sicheres Indiz für einen Bug im System.</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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696632#m1696632 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-15T14:38:05Z 2017-06-15T14:38:05Z Hilfe bei JavaScript <p>@@Rolf b</p> <blockquote> <p>Eric hat natürlich recht - das wird eher selten passieren.</p> </blockquote> <p>Womit Eric sicher recht hat, ist <a href="https://twitter.com/yatil/status/875360078903349248" rel="nofollow noopener noreferrer">SVG zu verwenden.</a></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> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696636#m1696636 Rolf b 2017-06-15T19:26:47Z 2017-06-15T19:26:47Z Hilfe bei JavaScript <p>Nö. In dieser Allgemeinheit kann ich das nicht stehen lassen, das geht mir gegen die Entwickler-Ehre </p> <p>"System" ist hier etwas größer, wir reden ja von dem Szenario, dass ein Bild nicht beim Client ankommt. Da beginnt das System auf der Festplatte des Servers und endet im Brauser des Empfängers. Dazwischen liegen viele viele Hops, und ob von denen einer Haps macht, kann ich als Entwickler nicht beeinflussen.</p> <p><em>Rolf</em></p> https://forum.selfhtml.org/self/2017/jun/13/hilfe-bei-javascript/1696637#m1696637 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-06-15T19:40:25Z 2017-06-15T19:40:25Z Hilfe bei JavaScript <p>@@Rolf b</p> <blockquote> <p>Nö. In dieser Allgemeinheit kann ich das nicht stehen lassen, das geht mir gegen die Entwickler-Ehre </p> <p>"System" ist hier etwas größer, wir reden ja von dem Szenario, dass ein Bild nicht beim Client ankommt. Da beginnt das System auf der Festplatte des Servers und endet im Brauser des Empfängers. Dazwischen liegen viele viele Hops, und ob von denen einer Haps macht, kann ich als Entwickler nicht beeinflussen.</p> </blockquote> <p>Ähm, genau darum geht es doch hier: nicht zu sagen „das ist so unwahrscheinlich, dass einer Haps macht, das wird schon nicht passieren“, sondern genau darauf vorbereitet zu sein und das System so zu entwickeln, dass es auch dann noch funktioniert, wenn doch mal einer Haps macht.</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>