Ankerlink scrollt nach oben – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Ankerlink scrollt nach oben Wed, 03 Jan 18 23:30:11 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711272#m1711272 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711272#m1711272 <p>Hallo Forum</p> <p>Ich habe ein DIV als Hauptanzeigefenster:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main_view<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>01-Bild.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>281<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>Grosses-Bild-01<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>div</span><span class="token punctuation">></span></span> </code></pre> <p>Und darunter verschiedene Bildchen in dieser Art und Weise:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main_view'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span> <span class="token string">'<img src=\'02-Bild.jpg\' width=\'500\' height=\'281\' alt=\'Grosses-Bild-02\' /><br /><br />'</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>KleinesBildchen-02.jpg<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>a</span><span class="token punctuation">></span></span> </code></pre> <p>Das funktioniert auch alles. Bei Klick auf den Link "KleinesBildchen-02.jpg" wird das Grosse Bild im Haupt-DIV ersetzt. Nur wird nach dem Ersetzen des Bildes im Haupt-DIV die Web-Seite ganz nach oben gescrollt.</p> <p>Bei einem grossen Bildschirm kein Problem, aber bei Mobil-Devices mit entsprechendem kleinen Bildschirm, muss der Client nach jedem Klick auf das Vorschaubildchen wieder herunter scrollen.</p> <p>Kann der Anker "#" anders gesetzt werden? Oder muss ich die Scrollposition der Webseite auslesen, in einem Cookie speichern und nach dem Bildwechsel an den Ursprungsort zurück scrollen?</p> <p>CU TooLate</p> Ankerlink scrollt nach oben Thu, 04 Jan 18 10:25:14 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711298#m1711298 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711298#m1711298 <p>Hallo Forumsleser</p> <p>Habe eine Seite weiter den Thread von "Thirteen37" gefunden. Demnach wird bei einem Link die Seite stets neu geladen. Also kann es nicht verhindert werden.</p> <p>Gut, dann suche ich mal nach einer Möglichkeit, die Scrollposition auszulesen (eventuell ist dass ja mit JS realisierbar.</p> <p>Tschüss TooLate</p> Ankerlink scrollt nach oben Thu, 04 Jan 18 10:46:34 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711300#m1711300 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711300#m1711300 <p>@@TooLate</p> <p><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> ist ein Link zum Seitenanfang. Wenn kein Link zum Seitenanfang gemeint ist, dann ist <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> falsch.</p> <p><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> ist meist ein Zeichen dafür, dass das <code>a</code>-Element falsch ist, weil gar kein Link zu einer anderen Stelle auf der Seite bzw. zu einer anderen Ressource gesetzt werden soll. Deshalb muss in diesen Fällen nicht <code>a</code>, sondern <code>button</code> verwendet werden.</p> <p>Bei dir liegt der Fall anders: du willst eine andere Ressource verlinken – nämlich das Bild:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>02-Bild.jpg<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>KleinesBildchen-02.jpg<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>Bild 2<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>a</span><span class="token punctuation">></span></span> </code></pre> <p>Und schon funtioniert die Anzeige des großen Bildes auch ohne JavaScript. Allerdings nicht im dafür vorgesehenen Bereich auf der Seite. Dieses Feature packen wir obendrauf – <em lang="en"><strong>progressive enhancement</strong></em>.</p> <p>Die Vorschaubilder kommen in eine Liste:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gallery-items<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>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>01-Bild.jpg<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>KleinesBildchen-01.jpg<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>Bild 1<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>02-Bild.jpg<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>KleinesBildchen-02.jpg<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>Bild 2<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Bullets und Abstände weg mit CSS:</p> <pre><code class="block language-css"><span class="token selector">#gallery-items</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#gallery-items li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>(oder Flexbox verwenden)</p> <p>Für alle <code>a</code>-Elemente dieser Liste werden nun die Eventhandler registriert – aber nicht inline mit <code>onclick</code>-Attributen im HTML, sondern im Script:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#gallery-items a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">aElement</span> <span class="token operator">=></span> <span class="token punctuation">{</span> aElement<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 parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// … und großes Bild anzeigen</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> </code></pre> <p><code class="language-js">event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> unterdrückt die Standardaktion, d.h. das Aufrufen des Links. Anstelle von <code class="language-js"><span class="token comment">// … und großes Bild anzeigen</span></code> kommt natürlich noch der Code, der das große Bild auf der Seite austauscht.</p> <p>Wenn das auch in Browsern laufen soll, die noch keine Pfeilfuntionen kennen, kann man dafür auch schreiben:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#gallery-items a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">aElement</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> aElement<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 parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// … und großes Bild anzeigen</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> </code></pre> <p>Wenn das auch in Browsern laufen soll, die <code class="language-js"><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> und <code class="language-js"><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> noch nicht kennen … – vergiss es. Auch diese Browser werden ja unterstützt. Das große Bild wird eben ohne JavaScript angezeigt – <em lang="en">progressive enhancement</em>.</p> <p>Damit kein Fehler geworfen wird, das Ganze in eine <em lang="en"><strong>feature detection</strong></em> gepackt:</p> <pre><code class="block language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>querySelectorAll <span class="token operator">&&</span> <span class="token class-name">NodeList</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>forEach <span class="token operator">&&</span> <span class="token class-name">EventTarget</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#gallery-items a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">aElement</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> aElement<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 parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// … und großes Bild anzeigen</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> </code></pre> <p>Eventhandler für jedes <code>a</code>-Element zu registrieren wäre eine Möglichkeit, aber nicht die beste. Besser ist es, <em>einen</em> Eventhandler für ein übergeordnetes Element (die Liste „gallery-items“ bietet sich an) zu registrieren und darin abzufragen, ob der Click durch ein <code>a</code>-Element ausgelöst wurde – <em lang="en"><strong>event delegation</strong></em>.</p> <p>Dazu ändern wir <code class="language-js">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#gallery-items a'</span><span class="token punctuation">)</span></code> in <code class="language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#gallery-items'</span><span class="token punctuation">)</span></code>:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#gallery-items'</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 parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'A'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// … und großes Bild anzeigen</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>bzw. mit <code class="language-js"><span class="token keyword">function</span></code> und <em lang="en">feature detection</em>:</p> <pre><code class="block language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>querySelector <span class="token operator">&&</span> <span class="token class-name">EventTarget</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>addEventListener<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">'#gallery-items'</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 parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'A'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// … und großes Bild anzeigen</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>wobei <code class="language-js"><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> und <code class="language-js">addEventListener</code> ab IE 9 unterstützt werden, man sich die <em lang="en">feature detection</em> also hier vielleicht auch schenken kann.</p> <hr> <p>Jetzt fehlt „nur noch“ der Code für „… und großes Bild anzeigen“.</p> <p>Du hattest mit <code class="language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main_view'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span> <span class="token string">'<img src=\'02-Bild.jpg\' width=\'500\' height=\'281\' alt=\'Grosses-Bild-02\' /><br /><br />'</span></code> zum einen immer wieder erneut das Element „main_view“ im DOM gesucht, zum anderen immer wieder ein neues Bild ins „main_view“ gehängt – beides ungünstig.</p> <p>Ersteres vermeidest du, indem du einmalig das Element im DOM suchst und die Referenz darauf in einer Variablen speicherst – und zwar außerhalb des Eventhandlers:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> mainViewElement <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">'main_view'</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">'#gallery-items'</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 parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'A'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// … in mainViewElement großes Bild anzeigen</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>oder auch hier mit <code class="language-js"><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> mainViewElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#main_view'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Für ältere Browser mit <code class="language-js"><span class="token keyword">var</span></code> statt <code class="language-js"><span class="token keyword">const</span></code>:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> mainViewElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#main_view'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Zweiteres vermeidest du, indem du nicht immer wieder ein neues <code>img</code>-Element reintust, sondern beim <em>bestehenden</em> einfach den Wert des <code>src</code>-Attributs änderst.</p> <p>Dann sollte das <code>img</code>-Element keine Breiten- und Höhenangaben haben:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main-view<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>01-Bild.jpg<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>Bild 1<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>div</span><span class="token punctuation">></span></span> </code></pre> <p>(Aus dem <code>_</code>, der aus verschiedenen Gründen ungünstig ist, hab ich mal ein <code>-</code> gemacht.)</p> <p>Damit die Bilder in den Container passen, kommt ins Stylesheet sowas wie:</p> <pre><code class="block language-css"><span class="token selector">#main-view img</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">max-height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Nun brauchen wir gar nicht die Referenz auf „main_view“/„main-view“, sondern auf das <code>img</code>-Element darin:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> mainViewImgElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#main-view img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>bzw. mit <code class="language-js"><span class="token keyword">var</span></code>.</p> <p>Im Eventhandler übernimmst du für <code>src</code> den Wert aus <code>href</code> des jeweils geclickten Links:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> mainViewImgElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#main-view img'</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">'#gallery-items'</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 parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'A'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> mainViewImgElement<span class="token punctuation">.</span>src <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>href<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>Fehlt noch der Alternativtext. Den holen wir aus dem Vorschaubild:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> mainViewImgElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#main-view img'</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">'#gallery-items'</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 parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'A'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> mainViewImgElement<span class="token punctuation">.</span>src <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>href<span class="token punctuation">;</span> mainViewImgElement<span class="token punctuation">.</span>alt <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>alt<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>Bzw. für ältere Browser:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> mainViewImgElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#main-view img'</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">'#gallery-items'</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 parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'A'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> mainViewImgElement<span class="token punctuation">.</span>src <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>href<span class="token punctuation">;</span> mainViewImgElement<span class="token punctuation">.</span>alt <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>alt<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>Alles ungetestet.</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> Ankerlink scrollt nach oben Thu, 04 Jan 18 10:50:44 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711303#m1711303 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711303#m1711303 <p>Hallo,</p> <p>dein Problem ist der Link. Wenn du drauf klickst, wird die entsprechnde Seite geladen.</p> <p>Wenn es ein Link bleiben soll, dann verlinke das Bild für Besucher ohne Javascript und beende den Click-Handler mit return false bzw. unterdrücke die Defaultaktion: <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/preventDefault" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/preventDefault</a>. Bei der Gelegenheit solltest du dann auch die Eventhandler vom HTML trennen.</p> <p>Gruß<br> Jürgen</p> Ankerlink scrollt nach oben Thu, 04 Jan 18 11:03:02 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711304#m1711304 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711304#m1711304 <p>Hallo Forum</p> <p>Mit:</p> <pre><code class="block language-javascript"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span> <span class="token keyword">function</span> <span class="token function">getWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> de <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span> <span class="token keyword">var</span> myWidth <span class="token operator">=</span> window<span class="token punctuation">.</span>innerWidth <span class="token operator">||</span> self<span class="token punctuation">.</span>innerWidth <span class="token operator">||</span> <span class="token punctuation">(</span>de<span class="token operator">&&</span>de<span class="token punctuation">.</span>clientWidth<span class="token punctuation">)</span> <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span> <span class="token keyword">return</span> myWidth<span class="token punctuation">;</span> <span class="token punctuation">}</span> document<span class="token punctuation">.</span>getWidth<span class="token operator">=</span>getWidth<span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">getHeight</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> de <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span> <span class="token keyword">var</span> myHeight <span class="token operator">=</span> window<span class="token punctuation">.</span>innerHeight <span class="token operator">||</span> self<span class="token punctuation">.</span>innerHeight <span class="token operator">||</span> <span class="token punctuation">(</span>de<span class="token operator">&&</span>de<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span> <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span> <span class="token keyword">return</span> myHeight<span class="token punctuation">;</span> <span class="token punctuation">}</span> document<span class="token punctuation">.</span>getHeight<span class="token operator">=</span>getHeight<span class="token punctuation">;</span> </code></pre> <p>Kann ich die aktuelle Fenstergrösse auslesen. Das klappt.</p> <p>Mit:</p> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">getScrollXY</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> scrOfX <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> scrOfY <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token keyword">typeof</span><span class="token punctuation">(</span> window<span class="token punctuation">.</span>pageYOffset <span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'number'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//Netscape compliant</span> scrOfY <span class="token operator">=</span> window<span class="token punctuation">.</span>pageYOffset<span class="token punctuation">;</span> scrOfX <span class="token operator">=</span> window<span class="token punctuation">.</span>pageXOffset<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> document<span class="token punctuation">.</span>body <span class="token operator">&&</span> <span class="token punctuation">(</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollLeft <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//DOM compliant</span> scrOfY <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span> scrOfX <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollLeft<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> document<span class="token punctuation">.</span>documentElement <span class="token operator">&&</span> <span class="token punctuation">(</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollLeft <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//IE6 standards compliant mode</span> scrOfY <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span> scrOfX <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollLeft<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> scrOfX<span class="token punctuation">,</span> scrOfY <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>bekomme ich die gescrollten Werte.</p> <p>Aber wie rufe ich die Funktion getScrollXY() beim Seitenladen auf? Mein Ziel ist es, dass wenn der Client auf das Bildchen klickt (onclick), die:</p> <ul> <li>1.) Aktuelle (scroll)-Position ermittelt wird.</li> <li>2.) Diese als cookie im Browser gespeichert wird.</li> <li>3.) Die Seite neu geladen wird.</li> <li>4.) Das Cookie mit dem Scrollwert ausgelesen wird.</li> <li>5.) An die vorherige Position gescrollt wird.</li> </ul> <p>Ist das realisierbar?</p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Thu, 04 Jan 18 11:24:10 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711307#m1711307 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711307#m1711307 <p>Hi Gunnar Bittersmann</p> <p>Das ist viel Input!!!</p> <p>Ich teste das mal in Ruhe durch. Damit ich nicht alles haarklein Posten muss, hier mal ein Link auf die betreffende Seite:</p> <p><a href="http://www.crypto-code-tool.com/hardware.html" rel="nofollow noopener noreferrer">Schlechte-Bilder-Anzeige</a></p> <p>Für Testzwecke Seite scrollen und dann auf ein Vorschaubilchen klicken.</p> <p>Und die anderen Nachrichten werde ich auch beherzigen. Habe es erst jetzt gesehen.</p> <p>Viel Arbeit!!! OK. Bis später. Habe ja ne Menge Hausaufgaben von Gunnar bekommen…</p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Thu, 04 Jan 18 11:09:59 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711305#m1711305 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711305#m1711305 <p>Hallo</p> <blockquote> <p>Mit … Kann ich die aktuelle Fenstergrösse auslesen.</p> </blockquote> <p>… die in vielen Fällen nicht mit der Größe der Anzeigefläche für Webseiten übereinstimmen wird.</p> <blockquote> <p>Mein Ziel ist es, dass wenn der Client auf das Bildchen klickt (onclick), die:</p> <ol> <li>Aktuelle (scroll)-Position ermittelt wird.</li> <li>Diese als cookie im Browser gespeichert wird.</li> <li>Die Seite neu geladen wird.</li> <li>Das Cookie mit dem Scrollwert ausgelesen wird.</li> <li>An die vorherige Position gescrollt wird.</li> </ol> <p>Ist das realisierbar?</p> </blockquote> <p>Bestimmt ist es das. Mit der Lösung, die Gunnar <a href="https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711300#m1711300" rel="noopener noreferrer">dir darbietet</a>, ist es aber unnötig. Zumal dein Weg unnötig kompliziert ist.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> Ankerlink scrollt nach oben Thu, 04 Jan 18 11:10:11 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711306#m1711306 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711306#m1711306 <p>@@TooLate</p> <blockquote> <p>Mein Ziel ist es, dass wenn der Client auf das Bildchen klickt (onclick), die:</p> <ul> <li>1.) Aktuelle (scroll)-Position ermittelt wird.</li> <li>2.) Diese als cookie im Browser gespeichert wird.</li> <li>3.) Die Seite neu geladen wird.</li> <li>4.) Das Cookie mit dem Scrollwert ausgelesen wird.</li> <li>5.) An die vorherige Position gescrollt wird.</li> </ul> </blockquote> <p>Nein. Nein. Nein. Nein. Nein. Das ist nicht dein Ziel.</p> <blockquote> <p>Ist das realisierbar?</p> </blockquote> <p>Da das nicht sinnvoll ist, stellt sich die Frage nach der Realisierbarkeit gar nicht.</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> Ankerlink scrollt nach oben Thu, 04 Jan 18 12:35:06 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711309#m1711309 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711309#m1711309 <p>Nachtrag…</p> <p>Und natürlich ein dickes Dankeschön für die Tipps - vor allem an Gunnar, der sich richtig Arbeit gemacht hat - Danke!</p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Sat, 06 Jan 18 15:46:39 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711489#m1711489 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711489#m1711489 <p>Hallo Forum</p> <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> Ich bin gerade beim Testen deiner Vorschläge an dem Punkt deines Posts, wo es heisst:</p> <blockquote> <p>Für alle a-Elemente dieser Liste werden nun die Eventhandler registriert – aber nicht inline mit onclick-Attributen im HTML, sondern im Script:</p> </blockquote> <p>Diese beiden EventHandler. Wie ist das gemeint. Nehm ich den Oberen, oder den Unteren mit "functions", oder alle beide?</p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Sat, 06 Jan 18 16:10:34 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711490#m1711490 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711490#m1711490 <p>Hallo Forum</p> <p>Nachtrag: Vergiss die Frage. Wenn das auch in älteren Browser laufen soll natürlich die "Untere" Version.</p> <p>JS ist so anders, als Perl und Python. JavaScript ist und bleibt für mich abstrakter Code...</p> <p>Allerdings bin ich geneigt, das Thema hier ab zu brechen und eventuell doch über die Cookie-Lösung den Browser-Schirm wieder an die zuletzt ausgelesene Position zu scrollen. Mal ehrlich - wäre das nicht einfacher und auch Browser-Übergreifender? (Cookies kann jeder Browser und Scrollen auch)</p> <p>Ich habe mal einen Link, wo du bisherig gemachtes ersehen kannst:</p> <p><a href="http://www.crypto-code-tool.com/hardware-beta.html" rel="nofollow noopener noreferrer">Beta-Version</a></p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Sat, 06 Jan 18 16:45:21 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711491#m1711491 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711491#m1711491 <p>Hallo Forum</p> <p>Lösung des Problems wurde gefunden...</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main_view'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span> <span class="token string">'<img src=\'01-cct-box.jpg\' width=\'500\' height=\'281\' alt=\'Grosses-Bild-01\' /><br /><br />'</span> <span class="token punctuation">;</span><span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>small-01-cct-box.jpg<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>a</span><span class="token punctuation">></span></span> </code></pre> <p>...also ein schlichtes <strong>;return false;</strong> eingehängt - und gut ist.</p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Sat, 06 Jan 18 16:55:36 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711492#m1711492 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711492#m1711492 <p>Hallo TooLate,</p> <p>dein Link ist tot...</p> <p>Aber von deiner Turnübung mit Cookies und Javascript-induziertem Scrolling würde ich Dir abraten. Ein a Tag mit href='#' oder href='#blabla' löst keinen Roundtrip zum Server aus, der Browser positioniert die Anzeige lediglich so, dass die angegebene ID oben auf der Seite steht. Mit Cookies kommst Du deshalb vermutlich nicht so weiter, wie Du es Dir vorstellst.</p> <p>Was Du vermutlich willst, ist die Garantie, dass nach jeder Bildauswahl das große Bild sichtbar ist. Dafür könnte man <code><a href='#main_view' ...></code> einsetzen. Dann springt das Bildfenster aber auch dann jedesmal an den oberen Rand, wenn es gar nicht nötig ist.</p> <p>Eigentlich solltest Du den Vorschlag berücksichtigen, mit <code><button type='button'></code> zu arbeiten, und es dem User überlassen, ob er scrollt oder nicht. Ein Eventhandler auf dem Button, nach dem vom Gunnar beschriebenen Vorgehen, tauscht nur das Bild aus und verändert die Scrollposition der HTML Seite nicht. Dein Layout von "großem Bild" und "kleinen Bildern" ist nahezu quadratisch und sollte bei diesem Vorgehen auch auf einem Smartphone im Hochformat gut funktionieren. Im Querformat nicht unbedingt, aber dann hast Du entweder einen Desktop, ein Tablet oder der User hält sein Smartphone quer und rechnet damit, viel vertikal scrollen zu müssen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Ankerlink scrollt nach oben Sat, 06 Jan 18 18:06:19 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711497#m1711497 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711497#m1711497 <p>@@TooLate</p> <blockquote> <p><a href="http://www.crypto-code-tool.com/hardware-beta.html" rel="nofollow noopener noreferrer">Beta-Version</a></p> </blockquote> <p>Ein flüchtiger Blick in die Konsole im Entwicklerwerkzeug deines Browsers verrät dir:</p> <p><a href="/images/db1d8f00-fe10-4181-b21a-6347c697dc1c.png" rel="noopener noreferrer"><img src="/images/db1d8f00-fe10-4181-b21a-6347c697dc1c.png?size=medium" alt="TypeError: document.querySelector(...) is null [Weitere Informationen] hardware-beta.html:18:2" loading="lazy"></a></p> <p>Der Fehler tritt also in Zeile 18 auf:</p> <p><a href="/images/7f5c15a6-613e-4791-b465-31d67912da82.png" rel="noopener noreferrer"><img src="/images/7f5c15a6-613e-4791-b465-31d67912da82.png?size=medium" alt="document.querySelector('#gallery-items').addEventListener('click', function (event) {" loading="lazy"></a></p> <blockquote> <p>Gruss TooLate</p> </blockquote> <p>Du solltest dich <strong lang="en">TooEarly</strong> nennen – denn das ist, wann du das Script ausführst. Es steht im <code>head</code> der HTML-Datei, also lange bevor es das Element mit der ID „gallery-items“ überhaupt gibt. Deshalb wird kein solches Element gefunden und kein Eventhandler registriert. Was du siehst ist, dass der Fallback funktioniert, nämlich der Link auf das jeweilige große Bild, welches dann im Browserfenster angezeigt wird.</p> <p>BTW, <code class="language-html bad"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>JavaScript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> ist unsinnig (und war es schon immer). Verwende <code><script></code> in HTML. Dazu noch den DOCTYPE ändern auf <code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span></code>. Und auch gleich <a href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="nofollow noopener noreferrer">die Sprache angeben</a>: <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>.</p> <p>Du willst das Script erst ausführen, wenn das HTML (fast) vollständig geparst und das DOM aufgebaut ist. Zwei Möglichkeiten:</p> <ol> <li> <p>Du notierst das Script ganz unten im <code>body</code> – nach allem Seiteninhalt.</p> </li> <li> <p>Du registrierst einen <a href="https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded" rel="nofollow noopener noreferrer">Eventhandler <code>document.addEventListener('DOMContentLoaded', …)</code></a> und sorgst damit dafür, dass das Script erst ausgeführt wird, wenn es das Element „gallery-items“ im DOM gibt.</p> </li> </ol> <p><a href="/images/0a7648ff-624f-4106-a6fd-9d2f02554d9c.png" rel="noopener noreferrer"><img src="/images/0a7648ff-624f-4106-a6fd-9d2f02554d9c.png?size=medium" alt="im Quelltext: // … und großes Bild anzeigen" loading="lazy"></a></p> <p>Nee jetzt, oder?</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> Ankerlink scrollt nach oben Sat, 06 Jan 18 17:08:35 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711496#m1711496 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711496#m1711496 <p>@@TooLate</p> <blockquote> <p>Lösung des Problems wurde gefunden...</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main_view'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span> <span class="token string">'<img src=\'01-cct-box.jpg\' width=\'500\' height=\'281\' alt=\'Grosses-Bild-01\' /><br /><br />'</span> <span class="token punctuation">;</span><span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>small-01-cct-box.jpg<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>a</span><span class="token punctuation">></span></span> </code></pre> <p>...also ein schlichtes <strong>;return false;</strong> eingehängt - und gut ist.</p> </blockquote> <p>Dann habe ich wohl mal wieder Perlen vor die Säue geworfen. Schade eigentlich.</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> Ankerlink scrollt nach oben Sat, 06 Jan 18 17:02:50 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711494#m1711494 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711494#m1711494 <p>@@Rolf B</p> <blockquote> <p>Eigentlich solltest Du den Vorschlag berücksichtigen, mit <code><button type='button'></code> zu arbeiten</p> </blockquote> <p>Wer hatte einen solchen unterbreitet?</p> <p>Ich nicht. Der Vorschlag wäre hier nicht richtig.</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> Ankerlink scrollt nach oben Sat, 06 Jan 18 17:06:30 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711495#m1711495 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711495#m1711495 <p>Hi Rolf</p> <blockquote> <p>dein Link ist tot...</p> </blockquote> <p>Habe ihn als unvollständiges Beispiel wieder reaktiviert. Er stört auf dem Server nicht und darf eine Weile bleiben ☺️</p> <p>Zum restlichen Thema: Das "return false" arbeitet einwandfrei. Habe es gerade auch am i-Pad ausprobiert - läuft!</p> <p>Also das funktionierende Beispiel kann man unter... <a href="http://www.crypto-code-tool.com/hardware.html" rel="nofollow noopener noreferrer">diesem Link</a> ...ansehen</p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Sat, 06 Jan 18 20:37:36 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711504#m1711504 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711504#m1711504 <p>Guten Abend</p> <p>Vorab: Diese beta-Seite ist nicht auf dem neusten Stand. Ich werde mich gleich mal um diesen Spass kümmern - schließlich will ich am Ende sehen, ob diese ganze Eventhändler-Geschichte auch ohne ";return false;" funktioniert hätte !</p> <p>Habe erstmal die offiziellen Pages im W3C getestet und korrigiert - es waren nämlich ein paar Flüchtigkeitsfehler darin enthalten! Der Webauftritt zeigt im Validator jetzt - bis auf eine Stelle - alles in "Grün" an. Die will ich noch korrigieren. Es ist <a href="http://www.crypto-code-tool.com/bestellung.html" rel="nofollow noopener noreferrer">diese</a> Seite.</p> <p>Wenn man unten, am Seitenende auf W3C-HTML 4.01 klickt, sieht man den Fehler:</p> <pre><code class="block language-html">Line 326, Column 68: required attribute "ACTION" not specified. </code></pre> <p>Das mag daher kommen, weil der Code früher für eine Formularabsendung benötigt wurde. Da die aktuellen Seiten ohne serverseitige Scripts sind (kein cgi), findet auch keine Verarbeitung auf dem Server statt. Das Formular wird nur zum Drucken benötigt. Muss ich jetzt ein blindes "action" irgendwo verbauen, um den Fehler weg zu bekommen?</p> <p>Wäre nett, wenn wir das noch zuvor lösen könnten ☺️</p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Sat, 06 Jan 18 22:36:22 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711512#m1711512 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711512#m1711512 <p>@@TooLate</p> <blockquote> <p>schließlich will ich am Ende sehen, ob diese ganze Eventhändler-Geschichte auch ohne ";return false;" funktioniert hätte !</p> </blockquote> <p>Wie <a href="https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711303#m1711303" rel="noopener noreferrer">JürgenB schon sagte</a>, erfüllt <code>return false</code> dieselbe Funktion wie <code>Event.preventDefault()</code>. Letzteres hat den sprechenden Namen und man erkennt, wozu es dient. Ich würde deshalb immer <code>Event.preventDefault()</code> verwenden, nicht <code>return false</code>.</p> <blockquote> <p>Habe erstmal die offiziellen Pages im W3C getestet und korrigiert - es waren nämlich ein paar Flüchtigkeitsfehler darin enthalten! Der Webauftritt zeigt im Validator jetzt - bis auf eine Stelle - alles in "Grün" an. Die will ich noch korrigieren. Es ist <a href="http://www.crypto-code-tool.com/bestellung.html" rel="nofollow noopener noreferrer">diese</a> Seite.</p> <p>Wenn man unten, am Seitenende auf W3C-HTML 4.01 klickt, sieht man den Fehler:</p> <pre><code class="block language-html">Line 326, Column 68: required attribute "ACTION" not specified. </code></pre> </blockquote> <p>In HTML 4.01 verlangte das <code>form</code> ein <code>action</code>-Attribut; wenn das Formular an dieselbe Adresse geschickt werden sollte („Affenformular“): <code><form action=""></code>. Beachte die Verganheitsform! HTML 4.01 ist Vergangenheit.</p> <p>In HTML muss dass <code>action</code>-Attribut – wenn vorhanden – jetzt einen nicht-leeren URI als Wert haben; ansonsten muss man es weglassen.</p> <p>Du solltest <code><DOCTYPE html></code> verwenden.</p> <p>Dann zeigt dir der Validator auch noch <a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.crypto-code-tool.com%2Fbestellung.html" rel="nofollow noopener noreferrer">andere Fehler</a> – und das sind keine Flüchtigkeitsfehler.</p> <blockquote> <p>Das mag daher kommen, weil der Code früher für eine Formularabsendung benötigt wurde. Da die aktuellen Seiten ohne serverseitige Scripts sind (kein cgi), findet auch keine Verarbeitung auf dem Server statt. Das Formular wird nur zum Drucken benötigt. Muss ich jetzt ein blindes "action" irgendwo verbauen, um den Fehler weg zu bekommen?</p> </blockquote> <p>Wenn keine Daten übertragen werden sollen, wozu brauchst du dann ein Formular?</p> <p>Wozu braucht Gott ein Raumschiff?</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> Ankerlink scrollt nach oben Sat, 06 Jan 18 23:08:39 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711513#m1711513 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711513#m1711513 <p>Hi Gunnar</p> <p>Ich habe mal HTML 4.01 gelernt. Und kurz vor der Rente werde ich mich sicherlich nicht noch um orientieren. Die letzte Neuerung war "rounded-corners" mit "border-radius" - also was über neues CSS gestyled werden kann, bin ich bereit mir anzueignen. Mehr aber nicht! hehe…</p> <p>Im "original" W3C Validator haben die Seiten "Null" Fehler. Der komische "NU"-Validator hat für mich keine Relevanz. Ob jetzt obsolet oder nicht - ich bitte dich.</p> <p>Soll jetzt mein Nachbar, der Oldtimer sammelt, die Autos wegwerfen, weil die Motoren ineffizient und zu laut sind?</p> <p>Hier nochmal der Gegenbeweis - Damit Nachleser die Realität verifizieren können:</p> <p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.crypto-code-tool.com%2Fbestellung.html;accept=text%2Fhtml%2Capplication%2Fxhtml%2Bxml%2Capplication%2Fxml%3Bq%3D0.9%2C%2A%2F%2A%3Bq%3D0.8;accept-language=de%2Cen-US%3Bq%3D0.7%2Cen%3Bq%3D0.3" rel="nofollow noopener noreferrer">Null-Fehler-Link</a></p> <p>So, den Rest mit dem Handler Test versuche ich morgen - ist schon spät. Und nochmals vielen Dank an Dich für Deine ausführlichen Posts.</p> <p>Gruss TooLate</p> Ankerlink scrollt nach oben Sun, 07 Jan 18 00:17:13 Z https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711514#m1711514 https://forum.selfhtml.org/self/2018/jan/4/ankerlink-scrollt-nach-oben/1711514#m1711514 <p>@@TooLate</p> <blockquote> <p>Ich habe mal HTML 4.01 gelernt.</p> </blockquote> <p>Ich auch. Und XHTML 1.0. Und ich habe die Spezifikationen geliebt, weil sie einfach zu lesen waren – im Gegensatz zur jetzigen HTML-Spezifikation. Aber das ist <em>Vergangenheit.</em></p> <blockquote> <p>Soll jetzt mein Nachbar, der Oldtimer sammelt, die Autos wegwerfen, weil die Motoren ineffizient und zu laut sind?</p> </blockquote> <p>Nein, aber um von A nach B mit 150 über die Autobahn zu fahren, wird er wohl kaum einen seiner Oldtimer aus der Garage holen – weil die Motoren zu <em>wertvoll</em> sind!</p> <p>Dass mein Vergleich hinkt, liegt daran, dass er auf deinem Vergleich aufsetzte, der schon hinkte.</p> <p>Es geht auch nicht darum, was wegzuwerfen, sondern um Neues hinzuzufügen. HTML ist bewusst abwärtskompatibel gehalten – die allermeisten Dinge aus HTML 4.01 funktionieren nach wie vor.</p> <blockquote> <p>Hier nochmal der Gegenbeweis - Damit Nachleser die Realität verifizieren können:</p> <p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.crypto-code-tool.com%2Fbestellung.html;accept=text%2Fhtml%2Capplication%2Fxhtml%2Bxml%2Capplication%2Fxml%3Bq%3D0.9%2C%2A%2F%2A%3Bq%3D0.8;accept-language=de%2Cen-US%3Bq%3D0.7%2Cen%3Bq%3D0.3" rel="nofollow noopener noreferrer">Null-Fehler-Link</a></p> </blockquote> <p>Baust du deine Seiten für den Validator oder für Menschen? Wenn für Menschen, dann sollten <em>deren</em> Bedürfnisse zählen. Und die bedienst du mit neuem HTML viel besser als mit uraltem HTML 4.01. Bspw. Typen von Eingabefeldern:</p> <ul> <li> <p>für die Anzahl von Produkten, die in den Warenkorb gelegt werden sollen: <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code><br> Nutzer können mit den Pfeilen am Eingabefeld die Anzahl vergrößen/verringern ohne die Tastatur zu benutzen; Nutzer mit virtueller Tastatur (Mobilgeräte) bekommen eine numerische Tastatur präsentiert, wobei die Zahlentasten nicht so winzig sind wie die Tasten bei der alphanumerischen Tastatur.</p> </li> <li> <p>für E-Mail-Adressen: <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code><br> Nutzer mit virtueller Tastatur (Mobilgeräte) bekommen das @ auf die Tastatur, sodass es mit einem Click eingegeben werden kann.</p> </li> <li> <p>für Datumsangaben: <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code><br> Es wird ein Datepicker angeboten.</p> </li> </ul> <p>Es macht überhaupt keinen Sinn, von den Möglichkeiten, die Browser bieten, keinen Gebrauch zu machen.</p> <p>Wenn man HTML schreibt, sollte man das auch angeben: <code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span></code>. Der einzige Zweck der DOCTYPE-Angabe ist ja, Browser aus dem Quirks-Modus herauszuholen – und zwar möglichst in den Standard-Modus. <code class="language-html good"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span></code> tut dies; <code class="language-html bad"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span class="token string">"http://www.w3.org/TR/html4/loose.dtd"</span><span class="token punctuation">></span></span></code> tut das nicht.</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>