tag:forum.selfhtml.org,2005:/self Imagesslider mit einem Sprunganker verlinken – SELFHTML-Forum 2021-05-15T14:14:44Z https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787865?srt=yes#m1787865 frog 2021-04-28T15:13:40Z 2021-04-28T15:13:40Z Imagesslider mit einem Sprunganker verlinken <p>Hallo, liebe Leute!</p> <p>Ich hab mal wieder eine Frage, weil ich überhaupt nicht weiterkomme!! Für einen kleinen Tipp wäre ich echt Dankbar!</p> <p>Für meine Webseite habe ich zwei Slider in JS programmiert. Einer befindet sich auf der Startseite und zeigt Vorschaubilder in Form von Thumbnails. Der zweite Slider befindet sich auf einer weiteren Seite, auf der man dann die Bilder als Vollansicht im gesamten Browserfenster sehen kann, auf dieser Seite befindet sich klarerweise auch eine Navigationsleiste mit Kontaktdaten, Lebenslauf etc. Wenn ich nun auf das z.B. dritte Bild des Thumbnail-Sliders klicke, soll der User auf das dritte Bild des grossen Sliders auf der nächsten Seite gelangen, welcher durch einen Pfeil nach links und recht navigierbar ist.</p> <p>Jetzt hab ich die Thumbnails mit einer id verlinkt. Also z.B. "zweite_seite.html#one“ und dem goßen Image genau diese id verpasst. Das klappt auch, auf welches thumb ich auch klicke, ich komm genau auf die richtige Vollbildversion.</p> <p>Das Problem ist allerdings, dass ab dem zweiten Bild meine gesamte Navigationsleiste nicht mehr angezeigt wird und, wenn ich das Browserfenster grösser oder kleiner ziehe, skaliert sich nicht das einzelne Bild, so wie es sein sollte, sondern der gesamte Slider. Da verrutscht also alles. Also nur das erste Bild fügt sich ins Browserfenster richtig ein und auch die Nav erscheint!</p> <p>Ich habs auch mit ...</p> <pre><code class="block">document.anchors[0].one; </code></pre> <p>... und mit ...</p> <pre><code class="block language-javascript">window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash<span class="token operator">=</span><span class="token string">"one"</span><span class="token punctuation">;</span> </code></pre> <p>... versucht, hab aber das gleiche Problem wie oben beschrieben!</p> <p>Meine Frage ist, wie und wo kann ich den Sprunganker so integrieren, dass sich nicht nur das erste Vollbild-Image an das Browserfenster anpasst und meine NavLeiste erscheint, sondern dass das auch bei den restlichen so ist? Irgendwie schwant mir hier eine forEach oder for-Schleife. Ich bin aber jetzt komplett überfordert!!</p> <p>hier nun der HtmlCode für die Startseite:</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contentThumb<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumb<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>active2<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 punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>zweite_seite.html#one<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnail<span class="token punctuation">"</span></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>thumb01.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token 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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>zweite_seite.html#two<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnail<span class="token punctuation">"</span></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>thumb01.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token 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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>zweite_seite.html#three<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnail<span class="token punctuation">"</span></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>thumb01.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token 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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>zweite_seite.html#four<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnail<span class="token punctuation">"</span></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>thumb01.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token 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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>zweite_seite.html#five<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnail<span class="token punctuation">"</span></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>thumb01.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token 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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>zweite_seite.html#six<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnail<span class="token punctuation">"</span></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>thumb01.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token 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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>JS-Code für den Thumb-Slider der Startseite</p> <pre><code class="block language-javascript"> <span class="token keyword">var</span> leftArrow <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">'.oneLeft'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> rightArrow <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">'.oneRight'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> cont <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.thumb'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> thumbIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> leftArrow<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> thumbIndex <span class="token operator">=</span> <span class="token punctuation">(</span>thumbIndex <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">?</span> thumbIndex <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span> cont<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform <span class="token operator">=</span> <span class="token string">"translate("</span> <span class="token operator">+</span> <span class="token punctuation">(</span>thumbIndex<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token operator">-</span><span class="token number">127</span> <span class="token operator">+</span> <span class="token string">"px)"</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>thumbIndex <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span> leftArrow1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0"</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>thumbIndex <span class="token operator">>=</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span> rightArrow1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0.4"</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> rightArrow<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> thumbIndex <span class="token operator">=</span> <span class="token punctuation">(</span>thumbIndex <span class="token operator"><</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">?</span> thumbIndex <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">;</span> cont<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform <span class="token operator">=</span> <span class="token string">"translate("</span> <span class="token operator">+</span> <span class="token punctuation">(</span>thumbIndex<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token operator">-</span><span class="token number">127</span> <span class="token operator">+</span> <span class="token string">"px)"</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>thumbIndex <span class="token operator">>=</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">{</span> rightArrow1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0"</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>thumbIndex <span class="token operator">>=</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span> leftArrow1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0.4"</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>Html für die zweite Seite als Vollbild:</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>wrapper<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>picture_container<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carousel<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slider<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>section</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>one<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“sec“</span><span class="token punctuation">></span></span> <img src=„bild01.jpg" alt="" type="image/jpg"/><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>two<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“sec“</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>bild02.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><span class="token punctuation">"</span></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>image/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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>three<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“sec“</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>bild03.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><span class="token punctuation">"</span></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>image/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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>four<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“sec“</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>bild04.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><span class="token punctuation">"</span></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>image/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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>five<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“sec“</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>bild05.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><span class="token punctuation">"</span></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>image/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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>six<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“sec“</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>bild06.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><span class="token punctuation">"</span></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>image/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>section</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> //Navigationspfeile <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>controls<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pfeil links<span class="token punctuation">"</span></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>arrow-leftYellow.svg<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>img</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>pfeil rechts<span class="token punctuation">"</span></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>arrow-rightYellow.svg<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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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> Zur Sicherheit hier auch das CSS für den Slider der zweiten Seite ~~~ css #wrapper{ display:flex; margin:25px auto; } .picture_container{ width:100%; height:auto; z-index:-100; } .carousel{ display:flex; position:absolute; width:100%; } .slider{ display:flex; width:400%; height:100%; transition: all 0.6s; } .slider section { display:flex; justify-content:center; align-items:center; } .controls{ position:fixed; width:100%; heiht:auto; top:65%; cursor:pointer; } .links{ position:fixed; height:220px; left:10px; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; opacity:0; } .rechts{ position:fixed; height:220px; right:10px; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; opacity:0.2; } </code></pre> <p>und hier der dazugehörige JS-Slider, den ich dann vermutlich bei jeden Klick auf das jeweilige thumbnail wieder änder muss.</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> slider <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">'.slider'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> leftPfeil <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">'.links'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> rightPfeil <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">'.rechts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> sectionIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> leftPfeil<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> sectionIndex <span class="token operator">=</span> <span class="token punctuation">(</span>sectionIndex <span class="token operator">></span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token operator">?</span> sectionIndex <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span> slider<span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform <span class="token operator">=</span> <span class="token string">"translate("</span> <span class="token operator">+</span> <span class="token punctuation">(</span>sectionIndex<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token operator">-</span><span class="token number">25</span> <span class="token operator">+</span> <span class="token string">"%)"</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>sectionIndex <span class="token operator">==</span> <span class="token number">0</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> leftPfeil<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0"</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>sectionIndex <span class="token operator">>=</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span> rightPfeil<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0.2"</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> rightPfeil<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> sectionIndex <span class="token operator">=</span> <span class="token punctuation">(</span>sectionIndex <span class="token operator"><</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">?</span> sectionIndex <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">;</span> slider<span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform <span class="token operator">=</span> <span class="token string">"translate("</span> <span class="token operator">+</span> <span class="token punctuation">(</span>sectionIndex<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token operator">-</span><span class="token number">25</span> <span class="token operator">+</span> <span class="token string">"%)"</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>sectionIndex <span class="token operator">>=</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">{</span> rightPfeil<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0"</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>sectionIndex <span class="token operator">>=</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span> leftPfeil<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0.2"</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 bin für jeden Hinweis Dankbar!!</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787866?srt=yes#m1787866 JürgenB https://www.j-berkemeier.de 2021-04-28T15:31:38Z 2021-04-28T15:31:38Z Imagesslider mit einem Sprunganker verlinken <p>Hallo,</p> <blockquote> <p>... auf der man dann die Bilder als Vollansicht im gesamten Browserfenster sehen kann, auf dieser Seite befindet sich klarerweise auch eine Navigationsleiste mit Kontaktdaten, Lebenslauf etc.</p> </blockquote> <p>was ist daran „klarerweise“, dass sich weitere Informationen auf einer Seite befinden, „auf der man dann die Bilder als Vollansicht im gesamten Browserfenster sehen kann“?</p> <p>Gruß<br> Jürgen</p> <p>PS: Ein link zu deiner Seite wäre hilfreich</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787960?srt=yes#m1787960 frog http://newwebsite.bplaced.net/ 2021-05-01T13:42:50Z 2021-05-01T14:56:19Z Imagesslider mit einem Sprunganker verlinken/Webseite hochgeladen <p>Hallo!</p> <p>Ich hab mit einem Slider, welcher in JS programmiert ist, ein Problem. Den fertigen Teil meiner Webseite hab ich nun zwecks Übersicht hier:</p> <p><a href="http://newwebsite.bplaced.net/" rel="nofollow noopener noreferrer">http://newwebsite.bplaced.net/</a></p> <p>Meine Webseite hat zwei Imageslider, welche miteinander Verbunden sind. Der erste befindet sich auf der Startseite „index.html“ in Form von Thumbnails. Die einzelnen Thumbnails führen auf „mixedmedia.html“, auf der man dann die entsprechende Vollbildansicht sehen soll! Also mit dem klick auf das z.B. 3. Thumbnail gelangt man auf die Seite „mixed media“ zur 3. Vollbildversion! Mit dem Sprunganker mixedmedia.html#three, usw. klappt das auch!</p> <p>Allerdings befindet sich auf der Seite „mixedmedia.html“ auch ein Hamburger-Menü, über welches man dann auch auf Kontaktdaten, kurzen Lebenslauf und den anderen Menüs wie „vector.html“ und „handdraw.html“ gelangen kann. Und dieser Hamburger ist ab dem zweiten Thumbnail nicht mehr da. Ausserdem passen sich die Illus nicht mehr dem Browserfenster an, da wird dann der gesamte Slider mitskaliert.Und auch die Slider-Pfeile passen nicht mehr, vielleicht hat da auch jemand einen kleinen Tipp für mich! Also NUR wenn ich auf das erste Thumbnail, den Astronauten click, verhält sich die Vollbilldillu so wie es sein soll! Vielleicht ist die Lösung ja auch eine ganz einfache, aber ich seh sie einfach nicht!!</p> <p>Vector und Handdraw hab ich noch nicht verlinkt, weil ich sie noch nicht fertiggestellt hab, sind aber vom Prinzip her genaus so wie Mixed Media!</p> <p>Ich hab jetzt zum erstem mal in JS programmiert! Mein Code hat bisher noch niemand gesehen! Vieles kann man sicher kürzer und knackiger programmieren. Bin also für jedes Feedback Dankbar und weiss es wirklich zu schätzen!!</p> <p>Gruß frog</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787867?srt=yes#m1787867 frog 2021-04-28T15:49:46Z 2021-04-28T15:49:46Z Imagesslider mit einem Sprunganker verlinken <p>Hallo!</p> <blockquote> <p>was ist daran „klarerweise“, dass sich weitere Informationen auf einer Seite befinden, „auf der man dann die Bilder als Vollansicht im gesamten Browserfenster sehen kann“?</p> </blockquote> <p>Auf dieser Seite soll man nicht nur die Images in Vollansicht sehen, sondern der User muss auch Zugang zur Navigarionsleiste haben. D. h. zu anderen Kategorien und wie gesagt zu Konstaktdaten und meinen beruflichen Werdegang! Ansonsten kann er weder vor noch zurück!</p> <blockquote> <p>PS: Ein link zu deiner Seite wäre hilfreich</p> </blockquote> <p>ich bin im moment leider Offline! Bin aber gerne bereit noch mehr Code hochzuladen! Sag mir nur welchen?</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787868?srt=yes#m1787868 Matthias Scharwies mscharwies@selfhtml.org 2021-04-28T15:58:27Z 2021-04-28T15:58:27Z Imagesslider mit einem Sprunganker verlinken <p>Servus!</p> <blockquote> <blockquote> <p>PS: Ein link zu deiner Seite wäre hilfreich</p> </blockquote> <p>ich bin im moment leider Offline! Bin aber gerne bereit noch mehr Code hochzuladen! Sag mir nur welchen?</p> </blockquote> <p>Mit einem Live-Beispiel ist für uns das Debuggen und Inspizieren viel einfacher:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/online-Beispiele" rel="nofollow noopener noreferrer">SELFHTML:Forum/online-Beispiele</a></li> </ul> <p>Nur selten hat jemand die Zeit, deine Codebeispiele</p> <ol> <li>in seinen Editor zu kopieren,</li> <li>abzuspeichern</li> <li>und dann die Seite(n) zu öffnen und zu inspizieren.</li> </ol> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787869?srt=yes#m1787869 frog 2021-04-28T16:02:17Z 2021-04-28T16:02:17Z Imagesslider mit einem Sprunganker verlinken <p>Ja, Danke! Das werde ich versuchen!!</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787870?srt=yes#m1787870 frog 2021-04-28T16:15:26Z 2021-04-28T16:17:52Z Imagesslider mit einem Sprunganker verlinken <blockquote> <p>PS: Ein link zu deiner Seite wäre hilfreich</p> </blockquote> <p>Ahh, jetzt hab ich´s kapiert! Sorry, aber ich wusste nicht, dass es sowas gibt. Das verwaltet Webseiten in der Cloud und ist für andere nicht sichtbar, wenn ich´s richtig verstanden hab.</p> <p>Gerne kopiere ich da alles rein und ich darf euch dann den Link morgen schicken?</p> <p>Gruß der frog</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787871?srt=yes#m1787871 Matthias Scharwies mscharwies@selfhtml.org 2021-04-28T16:21:27Z 2021-04-28T16:21:27Z Imagesslider mit einem Sprunganker verlinken <p>Servus!</p> <blockquote> <blockquote> <p>PS: Ein link zu deiner Seite wäre hilfreich</p> </blockquote> <p>Ahh, jetzt hab ich´s kapiert! Sorry, aber ich wusste nicht, dass es sowas gibt. Das verwaltet Webseiten in der Cloud und ist für andere nicht sichtbar, wenn ich´s richtig verstanden hab.</p> </blockquote> <p>Es wird von den Suchmaschinen nicht gefunden, du kannst herumprobieren und testen (und wir auch!)</p> <blockquote> <p>Gerne kopiere ich da alles rein und ich darf euch dann den Link morgen schicken?</p> </blockquote> <p>Super, wir schauen uns das dann an!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787881?srt=yes#m1787881 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-04-29T08:40:30Z 2021-04-29T08:40:30Z Imagesslider mit einem Sprunganker verlinken <p>@@frog</p> <blockquote> <p>Ahh, jetzt hab ich´s kapiert! Sorry, aber ich wusste nicht, dass es sowas gibt. Das verwaltet Webseiten in der Cloud und ist für andere nicht sichtbar, wenn ich´s richtig verstanden hab.</p> </blockquote> <p>Wo ich’s gerade doppelt sehe: ´ ist ein Akzentzeichen wie in <em>Café</em>. Es ist kein Apostroph.</p> <p>Ein Apostroph sieht so aus: ’ (und nicht so: ').</p> <p>Wie man einen Apostroph eingibt, ist je nach Betriebssystem und Tastaturtreiber unterschiedlich. Für mich (macOS, US-Tastatur) ist’s ⌥⇧]</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787872?srt=yes#m1787872 frog 2021-04-28T16:27:20Z 2021-04-28T16:27:20Z Imagesslider mit einem Sprunganker verlinken <p>Danke man! echt!!</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787884?srt=yes#m1787884 Rolf B 2021-04-29T09:39:20Z 2021-04-29T09:39:20Z Imagesslider mit einem Sprunganker verlinken <p>Hallo Gunnar,</p> <blockquote> <p>Ein Apostroph sieht so aus: ’ (und nicht so: ').</p> </blockquote> <p>Es ist schon merkwürdig, dass das Zeichen, das Unicode "Apostroph" nennt (Codepoint 39 '), nicht das typographisch richtige Zeichen ist.</p> <p>Den richtigen Glyph, wie Du schreibst, findet man als "einfaches rechtes Anführungszeichen", Codepoint 8217. In Windows unter dieser Nummer nur mit Bocksprüngen erreichbar, aber immerhin steht es auch mit Code 146 in der Latin-1 Codepage zur Verfügung, d.h. man gibt Alt+0146 ein. Die 0 ist essenziell, weil Alt+146 das Zeichen Æ aus der Kommandozeilen-Codepage 850 liest.</p> <p>Oder man lädt aus dubioser Quelle (Europatastatur) einen alternativen Windows Tastaturtreiber für eine T2 oder E1 Tastatur, und drückt AltGr+1. Nachdem man eine Weile auf ein Poster geguckt hat, auf dem die drölffache Tastenbelegung von T2 aufgeschlüsselt ist.</p> <p>Oder man vermeidet diese Hölle und begnügt sich mit <code>⇧</code> <code>#</code>.</p> <blockquote> <p>Für mich (macOS, US-Tastatur) ist’s ⌥⇧]</p> </blockquote> <p>Für deutsche Macs angeblich ⌥⇧#.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787890?srt=yes#m1787890 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-04-29T10:56:23Z 2021-04-29T10:58:50Z Imagesslider mit einem Sprunganker verlinken <p>@@Rolf B</p> <blockquote> <blockquote> <p>Ein Apostroph sieht so aus: ’ (und nicht so: ').</p> </blockquote> <p>Es ist schon merkwürdig, dass das Zeichen, das Unicode "Apostroph" nennt (Codepoint 39 '), nicht das typographisch richtige Zeichen ist.</p> </blockquote> <p>Grmpf, Unicode-Codepoints sollten IMHO immer und überall hexadezimal angegeben werden: U+0027.</p> <p>Unicode benennt so einige Zeichen komisch, z.B.:</p> <ul> <li>U+2033 ″ DOUBLE PRIME – ist keine Prime (erste), sondern eine Sekunde (zweite)</li> <li>U+25CF ● BLACK CIRCLE – wenn man bernsteinfarben auf schwarz schreibt, ist der Kreis nicht <em lang="en">black</em>, sondern eben bernsteinfarben</li> </ul> <p>Und dass U+0027 nicht das richtige Zeichen für den Apostroph ist, steht ja auch in der <a href="https://www.unicode.org/charts/PDF/U0000.pdf" rel="nofollow noopener noreferrer">Spec</a>:</p> <ul> <li><em lang="en">2019 ’ is preferred for apostrophe</em></li> <li><em lang="en">preferred characters in English for paired quotation marks are 2018 ‘ & 2019 ’</em></li> </ul> <blockquote> <p>aber immerhin steht es auch mit Code 146 in der Latin-1 Codepage zur Verfügung, d.h. man gibt Alt+0146 ein.</p> </blockquote> <p>IIRC muss man die Ziffern des numerischen Tastaturblocks dafür verwenden, nicht die in der obersten Leiste.</p> <blockquote> <blockquote> <p>Für mich (macOS, US-Tastatur) ist’s ⌥⇧]</p> </blockquote> <p>Für deutsche Macs angeblich ⌥⇧#.</p> </blockquote> <p>Die Angabe stimmt. (Musste zur Verifikation doch glatt das MacBook wechseln, da es die <code>#</code>-Taste bei US-Tastatur nicht gibt; da ist es <code>\</code> und die sitzt nicht links neben <em lang="en">return</em>, sondern zwischen <em lang="en">return</em> und <em lang="en">delete</em>.)</p> <p><a href="/images/ad30fd64-a8d9-11eb-be24-b42e9947ef30.jpeg" rel="noopener noreferrer"><img src="/images/ad30fd64-a8d9-11eb-be24-b42e9947ef30.jpeg?size=medium" alt="2 MacBooks nebeneinander, eins mit US-Tastatur, eins mit deutscher Tastatur" loading="lazy"></a></p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787961?srt=yes#m1787961 Matthias Scharwies mscharwies@selfhtml.org 2021-05-01T15:50:33Z 2021-05-02T11:12:47Z Imagesslider mit einem Sprunganker verlinken/Webseite hochgeladen <p>Servus Frog!</p> <blockquote> <p>Ich hab mit einem Slider, welcher in JS programmiert ist, ein Problem. Den fertigen Teil meiner Webseite hab ich nun zwecks Übersicht hier:</p> <p><a href="http://newwebsite.bplaced.net/" rel="nofollow noopener noreferrer">http://newwebsite.bplaced.net/</a></p> </blockquote> <p>Super, so können wir alles anschauen und das JS inpizieren</p> <blockquote></blockquote> <p>Solte bei einem Frog die Webseite nicht grün sein? duckundwech </p> <h3>Zuerst zum HTML:</h3><p>Dein HTML ist <a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fnewwebsite.bplaced.net%2F" rel="nofollow noopener noreferrer">valide,</a> das ist schon mal gut!</p> <p>Du verwendest aber viele div-Elemente, was man anders machen könnte. (Siehe: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung" rel="nofollow noopener noreferrer">HTML/Tutorials/HTML5/Seitenstrukturierung</a>)</p> <p>Deine <code><div class="btn"></div></code>wollen bestimmt <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Was_ist_ein_Webformular%3F#Buttons" rel="nofollow noopener noreferrer">button-Elemente</a> sein. Dann musst du kein click-Event zuweisen, dass ist dann schon da! Deine buttons haben keine Beschriftung (label). Man weiß gar nicht, dass man da drauf klicken kann. Leute, die sich die Webseite im Auto vorlesen lassen, können gar nichts erkennen.</p> <h3>Zum CSS:</h3><p>Man sollte nur in Ausnahmefällen etwas absolut positionieren. Dann braucht man aber auch kein Flexbox mehr:</p> <pre><code class="block language-css"><span class="token selector">.contentThumb</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">overflow-x</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 635px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 75px<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 190px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> </code></pre> <p>Feste Werte heißen <em>magic numbers</em> und sind verpönt, da du gar nicht weiß, mit welchen Gerät ich grad im Internet bin.</p> <h3>zum JS</h3><blockquote> <p>Meine Webseite hat zwei Imageslider, welche miteinander Verbunden sind. Der erste befindet sich auf der Startseite „index.html“ in Form von Thumbnails. Die einzelnen Thumbnails führen auf „mixedmedia.html“, auf der man dann die entsprechende Vollbildansicht sehen soll! Also mit dem klick auf das z.B. 3. Thumbnail gelangt man auf die Seite „mixed media“ zur 3. Vollbildversion! Mit dem Sprunganker mixedmedia.html#three, usw. klappt das auch!</p> <p>Allerdings befindet sich auf der Seite „mixedmedia.html“ auch ein Hamburger-Menü, über welches man dann auch auf Kontaktdaten, kurzen Lebenslauf und den anderen Menüs wie „vector.html“ und „handdraw.html“ gelangen kann. Und dieser Hamburger ist ab dem zweiten Thumbnail nicht mehr da. Ausserdem passen sich die Illus nicht mehr dem Browserfenster an, da wird dann der gesamte Slider mitskaliert.Und auch die Slider-Pfeile passen nicht mehr, vielleicht hat da auch jemand einen kleinen Tipp für mich! Also NUR wenn ich auf das erste Thumbnail, den Astronauten click, verhält sich die Vollbilldillu so wie es sein soll! Vielleicht ist die Lösung ja auch eine ganz einfache, aber ich seh sie einfach nicht!!</p> </blockquote> <p>nicht böse sein: Ich steig durch dein Konzept nicht durch.</p> <p>Ich würde auf der ersten Seite das Hamburger-Menü realisieren. Ich will schon auf der Startseite deinen Lebenslauf anklicken können.</p> <p>Die Vorschaupunkte würde ich als "thumbnails"- realisieren. Dazu gehören aber die einzelnen Textbeschreibungen.</p> <p>Entscheide dich jetzt:</p> <ol> <li><em>Thumbnail</em>buttons öffnen auf der gleichen Seite einen Image-Slider</li> </ol> <p>oder</p> <ol start="2"> <li><em>thumbnail</em>-Links öffnen Unterseiten.</li> </ol> <blockquote> <p>Ich hab jetzt zum erstem mal in JS programmiert! Mein Code hat bisher noch niemand gesehen! Vieles kann man sicher kürzer und knackiger programmieren. Bin also für jedes Feedback Dankbar und weiss es wirklich zu schätzen!!</p> </blockquote> <p>Ich würde Deinen Lebenslauf ins HTML packen. Da gehört er hin und wird auch von Suchmaschinen gefunden.</p> <p>Ich muss jetzt leider weg, schau mir das später (oder morgen) noch mal an.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787967?srt=yes#m1787967 frog 2021-05-01T19:31:48Z 2021-05-01T19:31:48Z Imagesslider mit einem Sprunganker verlinken/Webseite hochgeladen <p>Hallo Matthias!</p> <blockquote> <p>Feste Werte heißen magic numbers und sind verpönt, da du gar nicht weiß, mit welchen Gerät ich grad im Internet bin.</p> </blockquote> <p>Die Thumbnails sollen aber nicht skaliert werden. Ich hab den Thumbnail-Slider so angepasst, dass er sowohl auf HUAWEI smart (m. w. so ziemlich das kleinste), als auch auf sämtliche iPhones, Galaxy oder Tablets passt. Der Thunbnail-Slider skaliert sich so nicht kleiner, aber ich hab den Slider immer dem Endgerät entsprechend gekürzt! Ich erwähne das nur deshalb, weil mich interessiert, ob das individuelle Anpassen mit fester Größe auch verpönt ist?</p> <blockquote> <p>nicht böse sein: Ich steig durch dein Konzept nicht durch.</p> </blockquote> <p>Bin ich sicher nicht! Ich sag nur danke für dein super Feedback und stelle fest, dass mein Konzept nicht ganz funktioniert!!</p> <blockquote> <p>Die Vorschaupunkte würde ich als "thumbnails"- realisieren. Dazu gehören aber die einzelnen Textbeschreibungen.</p> </blockquote> <p>Wenn ich das so richtig verstanden hab: Die Punkt lösch ich und alle Thumbnail-Slider sind beim Aufruf der Webseite sichtbar! Wenn man drüber-hovert, erscheint die Textbeschreibung, also: mixed media, vector und handdraw? Dann komme ich sowohl über das Hamburger-Menü, das ich schon auf der Startseite realisiere, als auch über die Thumbnails zu den Slidern mixed, vector und handdraw. Lebebslauf und Kontakte hab ich dann sowieso im Hamburger! Das wäre nämlich eine coole Idee! Ich mach das so!!!!</p> <blockquote> <p>Entscheide dich jetzt:</p> </blockquote> <ol> <li>Thumbnailbuttons öffnen auf der gleichen Seite einen Image-Slider</li> </ol> <p>Ja, so mach ich das auf jeden Fall! Ich müsste dann insgesamt drei große Image-Slider übereinander legen. Das schaut mir aber dann auch nach position: absolute in CSS aus?</p> <blockquote> <p>„oder</p> </blockquote> <pre><code>2. thumbnail-Links öffnen Unterseiten.“ </code></pre> <p>Ich dachte es gibt in JS eine Möglichkeit sich einen Array von einer anderen Seite zu schnappen! Geht wohl nicht!!</p> <blockquote> <p>Ich würde Deinen Lebenslauf ins HTML packen. Da gehört er hin und wird auch von Suchmaschinen gefunden.</p> </blockquote> <p>Ich hab´s mir gedacht! War ein Experiment, weil mich die Mechanik des programmierens interessiert, wenn da beim clicken ein Element erscheint, das vorher nicht da war! Ich packs ins Html!</p> <p>einen freundlichen und dankbaren Gruß vom Frosch, der alle Farben mag! </p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787971?srt=yes#m1787971 Matthias Scharwies mscharwies@selfhtml.org 2021-05-02T04:56:09Z 2021-05-02T05:46:29Z HTML5 lebt! <p>Servus Frog!</p> <blockquote> <blockquote> <p>Die Vorschaupunkte würde ich als "thumbnails"- realisieren. Dazu gehören aber die einzelnen Textbeschreibungen.</p> </blockquote> <p>Wenn ich das so richtig verstanden hab: Die Punkt lösch ich und alle Thumbnail-Slider sind beim Aufruf der Webseite sichtbar! Wenn man drüber-hovert, erscheint die Textbeschreibung, also: mixed media, vector und handdraw? Dann komme ich sowohl über das Hamburger-Menü, das ich schon auf der Startseite realisiere, als auch über die Thumbnails zu den Slidern mixed, vector und handdraw. Lebebslauf und Kontakte hab ich dann sowieso im Hamburger! Das wäre nämlich eine coole Idee! Ich mach das so!!!!</p> <blockquote> <p>Entscheide dich jetzt:</p> </blockquote> <ol> <li>Thumbnailbuttons öffnen auf der gleichen Seite einen Image-Slider</li> </ol> <p>Ja, so mach ich das auf jeden Fall!</p> </blockquote> <p>Hier ist deine Seite einmal in HTML5: <a href="https://jsr-hersbruck.de/frog/" rel="nofollow noopener noreferrer">https://jsr-hersbruck.de/frog/</a></p> <p>Ich habe alle div-Elemente durch bessere Alternativen ersetzt:</p> <ol> <li> <p>Der <code>div class="wrapper"</code> wird durch body ersetzt.</p> </li> <li> <p><code>div class="button"</code> gehören zum slider und werden später dynamisch gesetzt.</p> </li> <li> <p><code>div class="illu"</code>ist h1</p> </li> <li> <p><code>div class="thumb mix"</code> wird zu <code>section class="thumb" id="vector"</code> - so können wir es mit einem Seitenanker ansteuern.</p> </li> <li> <p><code>div class="cursor"</code> ist der cursor - den gibt es doch automatisch- den kannst du mit <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Benutzeroberfl%C3%A4che/cursor#eigene_Grafiken" rel="nofollow noopener noreferrer">CSS stylen, auch mit einem Bild</a>! ** Andererseits ist es wichtig, dass der Nutzer weiß, dass der Cursor über einem Link ist**.</p> </li> </ol> <p>Auf der zweiten Seite mit dem Astronauten hattest du so eine Einteilung mit section bereits - ich hab's jetzt auch auf die Hauptseite gelegt!</p> <h3>Flyout-Navigation</h3><p>Die Flyout-Navigation der zweiten Seite enthielt auch zwei div mit dem Hamburger-Menü und dem Kreuz. So etwas ist <strong>Darstellung</strong> (also CSS) und nicht <strong>Inhalt</strong></p> <p>Mikael Ainalem zeigt, wie man die Icons mit SVG animiert:</p> <p><a href="https://uxdesign.cc/the-menu-210bec7ad80c" rel="nofollow noopener noreferrer">The menu A step by step guide to creating a Hamburger Menu in SVG & CSS</a></p> <p>Oops - jetzt ist das SVG doch im Inhalt gelandet!</p> <h3>slides-Navigation</h3><p>hier habe ich die div-Elemente durch buttons ersetzt. <strong>Vorteil</strong>: du kannst mit der Maus, aber auch mit der Tab-Taste auswählen (und es wird gleich vom Browser gekennzeichnet!).</p> <p>Die Schrift ist so wie bei dir ausgeblendet. <strong>Nachteil:</strong> Ich muss raten, wo ich drauf klicke. Besser wäre hier ein gut verständliches Icon, sorry dass ich gestern Thumbnail gesagt habe.</p> <h3>CSS</h3><p>Die oben schon erwähnten magic numbers sind nicht nötig, wenn du <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items" rel="nofollow noopener noreferrer">Grid Layout </a> verwendest:</p> <pre><code class="block language-css"><span class="token selector">body</span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>packt h1 und nav id="slides" in die Mitte und zentriert sie automatisch!</p> <p><strong>[[EDIT]]</strong> ich habe es jetzt noch einfacher gelöst:</p> <pre><code class="block language-css"><span class="token selector">body</span><span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span>50em<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1em auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><strong>[[/EDIT]]</strong></p> <p>Alle px-Angaben habe ich mal entfernt. Deine Schrift sieht gut aus, ist für den contact aber ein bisschen klein. Ich habe für den body die Schriftgröße auf 2em gelegt. Alle Werte beziehen sich jetzt auf diese <a href="https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Ma%C3%9Fe_und_Ma%C3%9Feinheiten/em" rel="nofollow noopener noreferrer">relative Schriftgröße em</a>.</p> <blockquote> <p>Ich müsste dann insgesamt drei große Image-Slider übereinander legen. Das schaut mir aber dann auch nach position: absolute in CSS aus?</p> </blockquote> <p>Nein, die würde ich alle im HTML behalten und dann per CSS einblenden, wenn man eine Gruppe auswählt.</p> <p>Schön wäre, wenn es nur ein Slider wäre, der die Bilder einer Gruppe dann anzeigt.</p> <blockquote> <p>Ich hab´s mir gedacht! War ein Experiment, weil mich die Mechanik des programmierens interessiert, wenn da beim clicken ein Element erscheint, das vorher nicht da war!</p> </blockquote> <p>Das machen wir mit dem Slider-Script. Das holt sich dann alle Bilder einer (ausgewählten) section, packt sie in den Slider und erzeugt die vor- und zurück-Buttons und dann die Punkte unten drunter, die anzeigen, wie viele Bilder es überhaupt gibt. Soll es auch eine Großansicht geben?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787973?srt=yes#m1787973 Matthias Scharwies mscharwies@selfhtml.org 2021-05-02T06:46:41Z 2021-05-02T06:46:41Z Imagesslider <p>Servus!</p> <blockquote> <ol start="2"> <li>thumbnail-Links öffnen Unterseiten.“</li> </ol> <p>Ich dachte es gibt in JS eine Möglichkeit sich einen Array von einer anderen Seite zu schnappen! Geht wohl nicht!!</p> </blockquote> <p>Nein, du kannst in JS nicht auf andere Seiten (oder auf das Dateiverzeichnis des Servers) zugreifen. Deshalb sollten die Bilder (oder URLs) schon auf der Webseite sein.</p> <ul> <li><a href="http://newwebsite.bplaced.net/mixedmedia.html#two" rel="nofollow noopener noreferrer">http://newwebsite.bplaced.net/mixedmedia.html#two</a></li> </ul> <p>Dein Slider sieht gut aus und funktioniert!</p> <p>Ich würde mir jetzt überlegen, wie der Ur-Zustand aussehen soll.</p> <p>Alle Bilder als thumbnail in einer section. Falls es mehr sind, durch einen Pfeil anzeigen, dass man weiterklicken kann. So hast du das ja schon.</p> <p>Ein Klick öffnet das Bild in Groß-Ansicht (Hast du) und es werden Pfeile eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten. Oft hat man unten Punkte, die zeigen, wie viele Bilder in der Galerie sind.</p> <p>Was Du jetzt tun musst, ist es das Script so zu schreiben, dass du eine beliebige section einliest und zur Galerie machst. Keine festen Namen, sondern Variablen:</p> <p>z.B.</p> <p>currentGallery = section, in die geklickt wurde. Das erreichst du mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target" rel="nofollow noopener noreferrer">event.target</a></p> <p>BTW: Ich glaube, jetzt Dein Ursprungsproblem verstanden zu haben:</p> <pre><code class="block language-html"><span class="token comment"><!--- ????class sec dient möglicherweise zum navigieren der Pfeile in JS für den Sprunganker???? ---></span> </code></pre> <p>Sprungmarken kannst du nur mit IDs machen. Für die Galerie brauchst du nur die Liste aller Bilder mit querySelectorAll('img') und deren Nummern innerhalb der Liste.</p> <p>Klassen verwnedest du eh zu viele. Nimm eine id oder Klasse und selektiere dann deren kindelemente über den Namen:</p> <pre><code class="block language-css"> <span class="token selector">.gallery img</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token selector">.gallery button.back, .gallery button.next</span><span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788006?srt=yes#m1788006 frog 2021-05-02T16:28:49Z 2021-05-02T16:28:49Z HTML5 lebt! <p>Hallo Matthias!</p> <p>Danke für deine Mühe! Ich seh jetzt auch, dass meine Startseite beim Aufruf recht mager aussieht!</p> <blockquote> <p>Ich habe alle div-Elemente durch bessere Alternativen ersetzt:</p> </blockquote> <p>Danke! Das hätte ich schon von Anfang an machen sollen!</p> <blockquote> <p>Ich würde Deinen Lebenslauf ins HTML packen. Da gehört er hin und wird auch von Suchmaschinen gefunden.</p> </blockquote> <p>Jetzt hab ich auch gesehen, dass du mir den Lebenslauf gleich sichtbar auf die Startseite gepackt hast! Ich weiss zwar, dass das ob der Suchmaschinenoptimierung die vernünftige Variante ist, aber der muss - du wirst mich jetzt steinigen - schon aus rein optischen und auch interaktiven Gründen getogglet werden. Ich müsste das ja eigentlich auch mit einem CSS-hover schaffen? Ich weiss, dass das nicht kürzer und knackiger ist, wie ich geschrieben hab, aber ich kann da nicht aus meiner Haut!</p> <blockquote> <p>Mikael Ainalem zeigt, wie man die Icons mit SVG animiert</p> </blockquote> <p>Ja, ich hab schon gehört, dass man mit SVG echt coole Sachen machen kann! Hab kürzlich eine Webseite gesehen, in der eine Raupe welche man mit dem Cursor bewegen kann, animiert wurde!!</p> <blockquote> <p>slides-Navigation</p> </blockquote> <blockquote> <p>hier habe ich die div-Elemente durch buttons ersetzt. Vorteil: du kannst mit der Maus, aber auch mit der Tab-Taste auswählen (und es wird gleich vom Browser gekennzeichnet!).</p> </blockquote> <p>Danke man, ich hab jetzt fast ein schlechtes Gewissen, dass du das gemacht hast!</p> <blockquote> <p>Die Schrift ist so wie bei dir ausgeblendet. Nachteil: Ich muss raten, wo ich drauf klicke. Besser wäre hier ein gut verständliches Icon, sorry dass ich gestern Thumbnail gesagt habe.</p> </blockquote> <p>Ja, du hast recht, ich hab mir auch schon Icons überlegt, andererseit finde ich´s jetzt nicht so schlimm, weil sich der User beim durchklicken auch ein bisschen verlieren darf! Es sind ja nur Illus!</p> <blockquote> <p>Die oben schon erwähnten magic numbers sind nicht nötig, wenn du Grid Layout verwendest</p> </blockquote> <p>Mach ich, danke für den Tipp!!</p> <blockquote> <p>Ich müsste dann insgesamt drei große Image-Slider übereinander legen. Das schaut mir aber dann auch nach position: absolute in CSS aus?</p> </blockquote> <blockquote> <p>Nein, die würde ich alle im HTML behalten und dann per CSS einblenden, wenn man eine Gruppe auswählt.</p> </blockquote> <p>Meinst du da wahrscheinlich classList.add und remove?</p> <blockquote> <p>Schön wäre, wenn es nur ein Slider wäre, der die Bilder einer Gruppe dann anzeigt.</p> </blockquote> <p>Ja, die Idee gefällt mir auch!!! Aber wenn ich gleich alle drei Thumbnail-Slider beim Aufruf sichtbar mache, wäre es erheblich einfacher!! dann hätte ich auch mehr zeit für den event.target!! Mal sehen!! Ich sehe schon, ich muss hier abstriche machen!!</p> <blockquote> <p>Das machen wir mit dem Slider-Script. Das holt sich dann alle Bilder einer (ausgewählten) section, packt sie in den Slider und erzeugt die vor- und zurück-Buttons und dann die Punkte unten drunter, die anzeigen, wie viele Bilder es überhaupt gibt.</p> </blockquote> <p>Meinst du ein Container bleibt, nur die Thumbs werden beim hovern neu geladen!?</p> <blockquote> <p>Soll es auch eine Großansicht geben?</p> </blockquote> <p>Nein, hab ich jetzt nicht vor!</p> <p>Ich brauch Stunden um mir deine Anmerkungen und Tipps intellektuell zu verinnerlichen!!</p> <p>DANKE frog</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787976?srt=yes#m1787976 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-02T07:48:52Z 2021-05-02T07:50:16Z Imagesslider <p>@@Matthias Scharwies</p> <blockquote> <ul> <li><a href="http://newwebsite.bplaced.net/mixedmedia.html#two" rel="nofollow noopener noreferrer">http://newwebsite.bplaced.net/mixedmedia.html#two</a></li> </ul> <p>Dein Slider sieht gut aus und funktioniert!</p> </blockquote> <p><strong>Nein</strong>, das tut er nicht.</p> <p>Per Tastatur unbedienbare <code class="bad">div</code>s anstatt bedienbarer <code class="good">button</code>s, keine visuelle Kennzeichnung, wo sich der Fokus gerade befindet …</p> <p>Es ist mir unverständlich, wie du da zu der Fehleinschätzung kommen konntest, das Ding würde funktionieren.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788007?srt=yes#m1788007 frog 2021-05-02T16:36:08Z 2021-05-02T16:36:08Z Imagesslider <p>Hallo!</p> <blockquote> <p>Ein Klick öffnet das Bild in Groß-Ansicht (Hast du) und es werden Pfeile eingeblendet/ erzeugt.</p> </blockquote> <p>Ja, hab ich! Aber bei meiner Variante öffnet sich ja nicht das Bild in Groß-Ansicht, sondern eine html-Seite und das geht ja dann nicht mit der Verlinkung, weil …</p> <blockquote> <p>... Nein, du kannst in JS nicht auf andere Seiten (oder auf das Dateiverzeichnis des Servers) zugreifen.</p> </blockquote> <p>D.h., beim click auf ein Thumbnail blende ich die gesamte Startposition aus, also btn-Slider und Thumbnails den Hamburger lass ich stehen, und das gewünschte Image dann in Großformat samt der Pfeile wird eingeblendet!</p> <p>Ich hätte schwören können, hier mit einer forEach-Schleife durchzukommen!!</p> <p>Ein Königreich gäbe ich für deine Geschwindigkeit!!</p> <p>NOCHMALS DANKE frog</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788009?srt=yes#m1788009 Matthias Scharwies mscharwies@selfhtml.org 2021-05-02T17:25:43Z 2021-05-02T17:25:43Z HTML5 lebt! <p>Servus!</p> <blockquote> <p>Hallo Matthias!</p> <p>Danke für deine Mühe! Ich seh jetzt auch, dass meine Startseite beim Aufruf recht mager aussieht!</p> </blockquote> <p>Da müssen wir uns was überlegen!</p> <blockquote> <blockquote> <p>Ich würde Deinen Lebenslauf ins HTML packen. Da gehört er hin und wird auch von Suchmaschinen gefunden.</p> </blockquote> <p>Jetzt hab ich auch gesehen, dass du mir den Lebenslauf gleich sichtbar auf die Startseite gepackt hast! Ich weiss zwar, dass das ob der Suchmaschinenoptimierung die vernünftige Variante ist, aber der muss - du wirst mich jetzt steinigen - schon aus rein optischen und auch interaktiven Gründen getogglet werden. Ich müsste das ja eigentlich auch mit einem CSS-hover schaffen? Ich weiss, dass das nicht kürzer und knackiger ist, wie ich geschrieben hab, aber ich kann da nicht aus meiner Haut!</p> </blockquote> <p>Ich komme auf 2 Möglichkeiten:</p> <ol> <li> <p>mehr Inhalt</p> </li> <li> <p>mehr Weißraum, der bei dir gelb wäre (zu erreichen mit <code>section {height: 100vh;}</code></p> </li> </ol> <p>, sodass der Lebenslauf nach unten rutscht. Ob du den unten aus dem Viewport ragenden Inhalt durch Scrollen erreichbar lässt, oder mit <code>overflow:hidden</code> versteckst, ist erst mal egal.</p> <blockquote> <p>Ja, ich hab schon gehört, dass man mit SVG echt coole Sachen machen kann! Hab kürzlich eine Webseite gesehen, in der eine Raupe welche man mit dem Cursor bewegen kann, animiert wurde!!</p> </blockquote> <p>Mein Interesse an deiner Seite war durch die Überschrift „Vector“ geweckt. Da ist wirklich viel möglich.</p> <p>Ebenso interessant ist der Bereich "Hand-draw<strong>n</strong>". Eric Meyer hat erklärt, wie er seine Webseite aufgepeppt hat:</p> <ul> <li>meyerweb.com: <a href="https://meyerweb.com/eric/thoughts/2020/04/15/pseudo-randomly-adding-illustrations-with-css/" rel="nofollow noopener noreferrer">Pseudo-Randomly Adding Illustrations with CSS</a></li> </ul> <p>Eine andere Möglichkeit wären hand-drawn Icons, z.B. <a href="https://unblast.com/100-free-hand-drawn-vector-icons/" rel="nofollow noopener noreferrer">hier</a>.</p> <p>Wenn die Grundlagen stimmen</p> <ul> <li>einfaches HTML,</li> <li>wenig CSS (da die Browser meistens schon gut darstellen)</li> </ul> <p>kann man mit wenigen Sachen viel erreichen.</p> <blockquote> <p>Ich brauch Stunden um mir deine Anmerkungen und Tipps intellektuell zu verinnerlichen!!</p> </blockquote> <p>Kein Problem. Du hst ja wsl. auch keinen Termin, an dem deine Seite fertig sein soll, oder?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788010?srt=yes#m1788010 Matthias Scharwies mscharwies@selfhtml.org 2021-05-02T17:48:30Z 2021-05-03T03:35:22Z Imagesslider <p>Hallo Frog,</p> <blockquote> <blockquote> <p>Ein Klick öffnet das Bild in Groß-Ansicht (Hast du) und es werden Pfeile eingeblendet/ erzeugt.</p> </blockquote> <p>Ja, hab ich! Aber bei meiner Variante öffnet sich ja nicht das Bild in Groß-Ansicht, sondern eine html-Seite und das geht ja dann nicht mit der Verlinkung, weil …</p> </blockquote> <p>Normalerweise <a href="https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787868#m1787868" rel="noopener noreferrer">empfehlen wir ein Live-Beispiel</a>, weil man da beim Inspizieren schnell <strong>einen</strong> Syntax-Fehler findet, der die Frage beantwortet.</p> <p>Was mich bei Dir erstaunt hat, ist die Tatsache, dass du trotz der div-Suppe gültiges HTML verwendet hast und dein JavaScript laut Console keine Fehler aufweist. <strong>Da kannst du stolz drauf sein!</strong></p> <p>Trotzdem sollten wir erst ohne JS-Code überlegen, wie man die Bilder in thumbnails als Übersicht/Vorschau zeigen kann und dann auf Nutzerwunsch präsentieren kann.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>mix<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gallery<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>h2</span><span class="token punctuation">></span></span>Mix<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</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>mix01-1920px.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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnail<span class="token punctuation">"</span></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>thumbMix01.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><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>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>mix02-1920px.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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnail<span class="token punctuation">"</span></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>thumbMix02.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><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>section</span><span class="token punctuation">></span></span> </code></pre> <p><strong>[[EDIT]</strong> href-Attribut auf Bilder-URL geändert! <strong>[[/EDIT]</strong></p> <p>ist schon ganz gut. Du hast Bilder in klein (class="thumbnail", kann man später durch <code>.gallery img{}</code> ersetzen). Bei einem Klick öffnet sich der Link und das Bild wird in groß dargestellt.</p> <blockquote> <p>D.h., beim click auf ein Thumbnail blende ich die gesamte Startposition aus, also btn-Slider und Thumbnails den Hamburger lass ich stehen, und das gewünschte Image dann in Großformat samt der Pfeile wird eingeblendet!</p> <p>Ich hätte schwören können, hier mit einer forEach-Schleife durchzukommen!!</p> </blockquote> <p>Ich würde jetzt <strong>Dein</strong> Script anpassen:</p> <p>Bei einem Klick öffnet sich kein Link (kann man mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/preventDefault" rel="nofollow noopener noreferrer">preventDefault</a> abschalten), sondern die Galerie.</p> <p>Welche Bilder zur Galerie gehören, ermittelt das JS. Es holt sich mit event.Target das geklickte Element und sucht dann die passende section und ermittelt die id (z.B. mix, damit nicht die anderen sections aktiviert werden).</p> <p>Mit <code>querySelectorAll('#mix img')</code> erstellst du eine Liste aller Bilder, bzw. dann von deren URLs.</p> <p>Die URL des geklickten Links (href-Attribut) wird in ein img als src-Attribut eingefügt und groß dargestellt.</p> <p>Es werden Pfeile als Buttons eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten.)</p> <p>Wie <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> in der ihm eigenen Art bereits erwähnt hatte, kannst du Buttons auch mit der Tab-Taste ansteuern. Das ist besser als die div-Elemente.</p> <blockquote> <blockquote> <p>Oft hat man unten Punkte, die zeigen, wie viele Bilder in der Galerie sind.</p> </blockquote> </blockquote> <p>Das wäre ein Übersichts-Bonus. Evtl auch eine automatische Slideshow, die Bilder automatisch weiter schiebt, aber eben auch eine manuelle Steuerung erlaubt.</p> <p>Ich hätte schon Lust, dich da in den nächsten Tagen/Wochen zu begleiten.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788011?srt=yes#m1788011 frog 2021-05-02T18:04:14Z 2021-05-02T18:04:14Z HTML5 lebt! <p>Hallo!</p> <blockquote> <p>Ob du den unten aus dem Viewport ragenden Inhalt durch Scrollen erreichbar lässt, oder mit overflow:hidden versteckst, ist erst mal egal.</p> </blockquote> <p>Jetzt hab ich´s kapiert! Der Lebenslauf soll erstmal einfach nur im html stehen, damit er von den Suchmaschinen gefunden wird! Egal was ich dann damit mach! Wusste nicht, dass das gängige Praxis ist, aber es wird wohl funktionieren!</p> <blockquote> <p>Mein Interesse an deiner Seite war durch die Überschrift „Vector“ geweckt. Da ist wirklich viel möglich.</p> </blockquote> <p>Das freud mich aber sehr! Ich mag Vectorgraphic und schick dir auch gerne den Link, wenn meine Webseite fetig ist. Da hab ich noch einige Vectorillus! Und meine Motivation das programmieren zu lernen war auch, das illustrative anhand von Animationen oder vielleicht sogar kleine Computerspiele umzusetzen! Da gibt´s echt sensationell coole sachen!!</p> <blockquote> <p>Kein Problem. Du hst ja wsl. auch keinen Termin, an dem deine Seite fertig sein soll, oder?</p> </blockquote> <p>Nein, das wäre schlimm. Ab und an - trotz Corona - Jobaufträge, dann muss die Seite eben warten!</p> <p>lieben Gruß frog</p> <p>p.s.: ich komm mit dem target/event möglicherweise ins strudeln. Dann stell ich wieder eine Frage ans Forum?</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788014?srt=yes#m1788014 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-02T18:07:57Z 2021-05-02T18:07:57Z Imagesslider <p>@@Matthias Scharwies</p> <blockquote> <p>Was mich bei Dir erstaunt hat, ist die Tatsache, dass du trotz der div-Suppe gültiges HTML verwendet hast und dein JavaScript laut Console keine Fehler aufweist. <strong>Da kannst du stolz drauf sein!</strong></p> </blockquote> <p>Um die Prioritäten geradezurücken: Ich wäre eher stolz drauf, wenn die Seite von allen bedienbar ist (egal ob sie dafür Maus, Touch, Tastatur, Spracheingabe oder sonstwas verwenden), auch wenn sie HTML-Fehler enthält (die der Browser berichtigt).</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788017?srt=yes#m1788017 frog 2021-05-02T20:16:03Z 2021-05-02T20:16:03Z Imagesslider <p>Hallo Matthias!</p> <p>Hab dein Posting übersehen und es erst jetzt gelesen!!!</p> <blockquote> <p>Normalerweise empfehlen wir ein Live-Beispiel, weil man da beim Inspizieren schnell einen Syntax-Fehler findet, der die Frage beantwortet.</p> </blockquote> <p>Ja, das kann ich machen! Ich mach das mal so wie ich mir das vorstell und aktualisere dann die Webseite, die ich dir verlinkt hab!</p> <blockquote> <p>Was mich bei Dir erstaunt hat, ist die Tatsache, dass du trotz der div-Suppe gültiges HTML verwendet hast und dein JavaScript laut Console keine Fehler aufweist.</p> </blockquote> <p>Na ja, du hast schon recht, es ist wahrlich eine Suppe? Ich werd´s aber mit der html5-Strukturierung ändern!</p> <blockquote> <p>Da kannst du stolz drauf sein!</p> </blockquote> <p>Ich schau regelmäßig in die Console ob sich da eine Fehlermeldung auftut! Meistens ist es dann auch so, aber ich behebe sie dann!!</p> <blockquote> <p>Trotzdem sollten wir erst ohne JS-Code überlegen, wie man die Bilder in thumbnails als Übersicht/Vorschau zeigen kann und dann auf Nutzerwunsch präsentieren kann.</p> </blockquote> <p>Aber der btn-Slider hat mich in JS Blut, Schweiss und Tränen gekostet und bin jetzt mit dem JS-Texthover sehr glücklich, das mir das gelungen ist. Meinst du etwa, dass ich hier was änder sollte?</p> <blockquote> <p>ist schon ganz gut. Du hast Bilder in klein (class="thumbnail", kann man später durch .gallery img{} ersetzen).</p> </blockquote> <p>Ja, so hab ich mir das vorgestellt!</p> <blockquote> <p>Bei einem Klick öffnet sich kein Link (kann man mit preventDefault abschalten), sondern die Galerie.</p> </blockquote> <p>Wozu brauch ich da prefentDefault, wenn ich die Thumbs nicht verlinke?</p> <blockquote> <p><a href = "mixedmedia.html#one"></p> </blockquote> <p>die id als Sprunganker brauch ich ja dann auch nicht mehr?!</p> <blockquote> <p>Welche Bilder zur Galerie gehören, ermittelt das JS. Es holt sich mit event.Target das geklickte Element und sucht dann die passende section und ermittelt die id (z.B. mix, damit nicht die anderen sections aktiviert werden).</p> </blockquote> <p>Ich muss mir das event/target genauer ansehen, wei ich mir da jetzt überhaupt nix vorstellen kann.</p> <blockquote> <p>Mit querySelectorAll('#mix img') erstellst du eine Liste aller Bilder, bzw. dann von deren URLs.</p> </blockquote> <blockquote> <p>Die URL des geklickten Links (href-Attribut) wird in ein img als src-Attribut eingefügt und groß dargestellt.</p> </blockquote> <blockquote> <p>Es werden Pfeile als Buttons eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten.)</p> </blockquote> <p>Es hört sich jetzt ein bisschen so an, als ob ich hier einen Img-array in einem creatElement-div ablege? Aber mein noch recht ungeübtes Auge kann sich auch täuschen. Das werds ich mal versuchen. Bis jetzt war´s immer so, dass ich fast alles was ich mir vorgestellt hab auch umsetzen konnte. Für einiges hab ich eben länger gebraucht!!</p> <blockquote> <p>Wie <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> in der ihm eigenen Art bereits erwähnt hatte, kannst du Buttons auch mit der Tab-Taste ansteuern. Das ist besser als die div-Elemente.</p> </blockquote> <p>Ich fürchte das muss noch warten. Erst muss ich die beiden Slider miteinander verknüpfen. Aber @Gunnar Bittermann kann hier meinen Code gerne weiter kommentieren!!</p> <blockquote> <p>Ich hätte schon Lust, dich da in den nächsten Tagen/Wochen zu begleiten.</p> </blockquote> <p>Yes, yes, yes!! Das wäre aber echt Super!! Ich war ja von deinem letzten Post auch ein bisschen überracht, weil du als Programmierer auch so begeistert von Illus bist! Darf ich fragen, ob du auch zeichnest?</p> <p>wünsche dir alles Gute frog</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788012?srt=yes#m1788012 Matthias Scharwies mscharwies@selfhtml.org 2021-05-02T18:05:05Z 2021-05-02T18:05:05Z HTML5 lebt! <blockquote> <p>p.s.: ich komm mit dem target/event möglicherweise ins strudeln. Dann stell ich wieder eine Frage ans Forum?</p> </blockquote> <p>Jederzeit!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788013?srt=yes#m1788013 frog 2021-05-02T18:07:28Z 2021-05-02T18:07:28Z HTML5 lebt! <p>Passt!!DANKE!! </p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788019?srt=yes#m1788019 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-03T03:37:20Z 2021-05-03T03:37:20Z Imagesslider <p>@@Gunnar Bittersmann</p> <blockquote> <p>Um die Prioritäten geradezurücken: Ich wäre eher stolz drauf, wenn die Seite von allen bedienbar ist (egal ob sie dafür Maus, Touch, Tastatur, Spracheingabe oder sonstwas verwenden), auch wenn sie HTML-Fehler enthält (die der Browser berichtigt).</p> </blockquote> <p>Dass dieses Posting 2× negativ bewertet wurde, zeigt, wie notwendig es ist, hier im Forum immer wieder darauf hinzuweisen, dass man Webseiten <strong>für Menschen</strong> baut, nicht für grünes Licht von Validatoren, Lintern oder sonst welchen Maschinen. Immer und immer wieder.</p> <p><a href="/images/7bd4fc5e-abc0-11eb-bc7e-b42e9947ef30.png" lang="en" rel="noopener noreferrer"><img src="/images/7bd4fc5e-abc0-11eb-bc7e-b42e9947ef30.png?size=medium" alt="Tweet by Jen Simmons, January 27, 2016: Arguing with teammates over “bothering with accessibility” makes me so angry. Every. Time. So. Angry. Yes. “Bother”. It's your job." loading="lazy"></a></p> <p>So, jetzt dürft Ihr wieder auf Minus clicken – oder doch einfach mal nachdenken. Eure Entscheidung.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788025?srt=yes#m1788025 Raketenwilli 2021-05-03T08:32:52Z 2021-05-03T08:32:52Z Nicht ganz falsch - aber auch nicht ganz richtig <p>Also Deine Meinung ist nicht ganz falsch, aber auch nicht ganz richtig:</p> <ul> <li>Du hast Recht damit, dass die Bedienbarkeit durch jede und jeden ein zu erfüllendes Ziel ist. Das ist teilweise (Behörden & Co.) sogar gesetzlich vorgeschrieben. Und wer will aus „Designgründen“ potentielle Kunden links liegen lassen?</li> <li>Aber wenn eine Webseite HTML-Fehler(!) enthält, dann ist nicht ganz klar, wie individuelle oder gar künftige Browser diese Fehler berichtigen. Woraus dann aber auch folgt, dass die „Bedienbarkeit durch jede und jeden“ eben auch nicht so unbedingt zu erwarten ist wie Deine Formulierung das vermuten lässt.</li> </ul> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788020?srt=yes#m1788020 Matthias Scharwies mscharwies@selfhtml.org 2021-05-03T03:47:57Z 2021-05-03T04:12:13Z Imagesslider <p>Servus!</p> <blockquote> <p>Hallo Matthias!</p> <p>Hab dein Posting übersehen und es erst jetzt gelesen!!!</p> <blockquote> <p>Normalerweise empfehlen wir ein Live-Beispiel, weil man da beim Inspizieren schnell einen Syntax-Fehler findet, der die Frage beantwortet.</p> </blockquote> <p>Ja, das kann ich machen! Ich mach das mal so wie ich mir das vorstell und aktualisere dann die Webseite, die ich dir verlinkt hab!</p> </blockquote> <p>Das Du dich auf BPlaced angemeldet und uns Dein Beispiel gezeigt hast, fand ich gut!</p> <blockquote> <p>Aber der btn-Slider hat mich in JS Blut, Schweiss und Tränen gekostet und bin jetzt mit dem JS-Texthover sehr glücklich, das mir das gelungen ist. Meinst du etwa, dass ich hier was änder sollte?</p> </blockquote> <p>Das musst du entscheiden!</p> <blockquote> <blockquote> <p>ist schon ganz gut. Du hast Bilder in klein (class="thumbnail", kann man später durch .gallery img{} ersetzen).</p> </blockquote> <p>Ja, so hab ich mir das vorgestellt!</p> <blockquote> <p>Bei einem Klick öffnet sich kein Link (kann man mit preventDefault abschalten), sondern die Galerie.</p> </blockquote> <p>Wozu brauch ich da prefentDefault, wenn ich die Thumbs nicht verlinke?</p> <blockquote> <p><a href = "mixedmedia.html#one"></p> </blockquote> <p>die id als Sprunganker brauch ich ja dann auch nicht mehr?!</p> </blockquote> <p>Das ist es, was ich im Forum so schwierig finde. Ich habe Ideen und versuche sie mit deinem Grundgerüst zu kombinieren und da passiert mir so ein Lapsus.</p> <p>Ich hab's oben ausgebessert.</p> <p>Du benötigst ja von jeder Grafik zwei Varianten:</p> <ul> <li>ein thumbnail</li> <li>die Großansicht (Du hattest in der Slideshow bereits mit picture experimentiert. Mir ist das zu kompliziert. Dein Bild <code>illumixed106-1.5x.jpg</code> hat 357 KB - für mein WLAN im Wohnzimmer fast zu viel)</li> </ul> <p>Ziel ist es, die URLs beider Varianten im HTML (dort wo der Inhalt notiert wird) zu notieren und die dann vom JS auslesen zu lassen. Falls das JS nicht funktioniert, kann man per Link das Grioißbild anzeigen lassen.</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Trennung_von_Inhalt,_Pr%C3%A4sentation_und_Verhalten" rel="nofollow noopener noreferrer">HTML/Tutorials/Trennung_von_Inhalt,_Präsentation_und_Verhalten</a></li> </ul> <blockquote> <blockquote> <p>Welche Bilder zur Galerie gehören, ermittelt das JS. Es holt sich mit event.Target das geklickte Element und sucht dann die passende section und ermittelt die id (z.B. mix, damit nicht die anderen sections aktiviert werden).</p> </blockquote> <p>Ich muss mir das event/target genauer ansehen, wei ich mir da jetzt überhaupt nix vorstellen kann.</p> <blockquote> <p>Mit querySelectorAll('#mix img') erstellst du eine Liste aller Bilder, bzw. dann von deren URLs.</p> </blockquote> <blockquote> <p>Die URL des geklickten Links (href-Attribut) wird in ein img als src-Attribut eingefügt und groß dargestellt.</p> </blockquote> <blockquote> <p>Es werden Pfeile als Buttons eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten.)</p> </blockquote> <p>Es hört sich jetzt ein bisschen so an, als ob ich hier einen Img-array in einem creatElement-div ablege? Aber mein noch recht ungeübtes Auge kann sich auch täuschen.</p> </blockquote> <p>Du hast schon irgendwie recht. Die Liste ist aber eine <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node#NodeList" rel="nofollow noopener noreferrer">Live Node List</a></p> <blockquote> <p>Das werds ich mal versuchen. Bis jetzt war´s immer so, dass ich fast alles was ich mir vorgestellt hab auch umsetzen konnte. Für einiges hab ich eben länger gebraucht!!</p> </blockquote> <p>Perfekt. Ich habe ein Bildwechsler-Tutorial, das seit zwei Jahren rumliegt. Vielleicht kann ich das parallel fertigstellen.</p> <blockquote></blockquote> <blockquote> <p>Ich war ja von deinem letzten Post auch ein bisschen überracht, weil du als Programmierer auch so begeistert von Illus bist! Darf ich fragen, ob du auch zeichnest?</p> </blockquote> <p>Fragen ja, aber nein - leider nicht. Ich kann mich an den einfachsten SVGs begeistern und probiere da viel aus. Zeichnen scheitert an meinen motorischen Mängeln. Deine Bilder waren aber eindrucksvoll.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788021?srt=yes#m1788021 Matthias Scharwies mscharwies@selfhtml.org 2021-05-03T04:09:47Z 2021-05-03T04:29:22Z Forums-Charta beachten <p>Servus!</p> <blockquote> <p>Dass dieses Posting 2× negativ bewertet wurde, zeigt, wie notwendig es ist, ...</p> </blockquote> <p>Nein, hier ist ein Anfänger mit einer Verständnis-Frage.</p> <p>@Jürgen B hat ihn darauf hingewiesen, dass ein <a href="https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787866#m1787866" rel="noopener noreferrer">Live-Beispiel besser</a> wäre. Ich habe ihm eine entsprechende <a href="https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787868#m1787868" rel="noopener noreferrer">Seite verlinkt</a>.</p> <p>Dieser neu angemeldete Nutzer stellt uns nun seine Seite vor und bittet um Hilfe.</p> <p>Mir fallen zwei Sachen auf: lauter divs und keine JS-Fehler in der Konsole.</p> <p>Ich habe <a href="https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787971#m1787971" rel="noopener noreferrer">ihm gezeig</a>t, dass man anstelle der divs besser andere Elemente verwendet.</p> <blockquote> <blockquote> <blockquote> <p>Ich habe alle div-Elemente durch bessere Alternativen ersetzt:</p> <p>.... hier habe ich die div-Elemente durch buttons ersetzt. Vorteil: du kannst mit der Maus, aber auch mit der Tab-Taste auswählen (und es wird gleich vom Browser gekennzeichnet!).</p> </blockquote> </blockquote> </blockquote> <p>Ich habe versucht mich in diesem Post auf die divs und die <em>magic numbers</em> im CSS zu konzentrieren.</p> <p>Den <a href="https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1787973#m1787973" rel="noopener noreferrer">Post zum JS</a> hätte ich erst abschicken sollen, wenn das HTML-Markup entsprechend angepasst gewesen wäre. Ich hätte auch anstelle des „funktioniert“, auf das du wieder einmal Oliver Kahn-mäßig angesprungen bist, erwähnen sollen, dass das Script ohne Fehler in der Konsole arbeitet. Das fand ich schon sehr gut.</p> <hr> <p>Und jetzt kommst du.</p> <p>Was <strong>mich</strong> persönlich stört, ist, dass du Anfänger immer wieder mit deinem "Funktioniert nicht" vor den Kopf stößt, entmutigst und dabei auch uns Erfahrenere mit Deinem <strong>"constant stream of negativity"</strong> (Das ist nicht von mir, passt aber sehr gut) demotivierst.</p> <p>In der <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Charta_des_SELFHTML-Forums" rel="nofollow noopener noreferrer">Forums-Charta</a> seht leider kein kategorisches <em><strong>„Formuliere höflich und wertschätzend!“</strong></em>, sondern nur <em>„Behandle andere Forumsteilnehmer mit mindestens derselben Höflichkeit, die du dir selbst gegenüber erwartest und vermeide, andere Forumsteilnehmer persönlich zu attackieren.“</em></p> <p>Das ist aber kein Grund als vermeintlich harter Hund eine solch hohe Frustrationstoleranz bei anderen einzufordern.</p> <blockquote> <p>So, jetzt dürft Ihr wieder auf Minus clicken – oder doch einfach mal nachdenken. Eure Entscheidung.</p> <p> LLAP</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788024?srt=yes#m1788024 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2021-05-03T08:25:47Z 2021-05-03T08:25:47Z Imagesslider <p>Aloha ;)</p> <blockquote> <p>Dass dieses Posting 2× negativ bewertet wurde, zeigt, wie notwendig es ist, hier im Forum immer wieder darauf hinzuweisen, dass man Webseiten <strong>für Menschen</strong> baut, nicht für grünes Licht von Validatoren, Lintern oder sonst welchen Maschinen. Immer und immer wieder.</p> </blockquote> <p>Nein. Die Bewertung (das dritte Minus ist übrigens von mir) liegt (zumindest für mich) nicht daran, dass deine Aussage falsch gewesen wäre - im Gegenteil.</p> <p>Von mir hast du das Minus erhalten, weil mir deine Aussage an dieser Stelle und in diesem Tonfall als empathielos, nicht-wertschätzend (dem OP gegenüber) und destruktiv vorkommt.</p> <p>Ich lese aus der Aussage von <a href="/users/3833" class="mention registered-user" rel="noopener noreferrer">@Matthias Scharwies</a> jedenfalls kein „das hast du ganz toll gemacht, mach unbedingt weiter so“, bei dem es vielleicht wichtig gewesen wäre, die Prioritäten zu hinterfragen, sondern ich lese dort ein „ich nehme wahr, wo du stehst, lobe dich für das, was du bereits kannst, und weise dich darauf hin, wo du dich noch verbessern kannst“.</p> <p>Es ist ein wertschätzender Beitrag, den man auch dann nicht zurechtrücken muss, wenn man findet, dass das noch nicht reicht, um stolz zu sein.</p> <hr> <p>Vielleicht als allgemeine Bemerkung:</p> <p>Wenn man möchte, dass Menschen etwas tun, was man selbst gut findet, dann kloppt man nicht mit dem Holzhammer drauf und sagt: „das war noch zu schlecht“, sondern dann versucht man, zunächst zu verstehen, wo der Lernwillige steht, und ihn da abzuholen.</p> <p>Niemand™️ will absichtlich Seiten schlecht und unzugänglich bauen. Es gibt verschiedene Gründe warum das passiert. Mangelndes Wissen kann einer sein. Fehlende Awareness für das Problem kann einer sein.</p> <p>Sorg doch bitte einfach dafür, dass zu den bestehenden Gründen nicht noch ein „der Typ im Internet hat mich blöde von der Seite angelabert, also hat er bestimmt Unrecht, und überhaupt, was fällt dem ein“-Grund dazu kommt.</p> <p>Denn, wie gesagt, sachlich hast du Recht, aber auf allen anderen Ebenen außer auf der sachlichen ist dein Posting mehr geeignet, der Sache zu schaden, als, ihr zu nutzen.</p> <hr> <p>Es würde uns insgesamt übrigens gut tun, wenn wir als Wissende weniger aufeinander und die Antworten der Anderen reagieren würden, weil die uns nicht weit genug gehen oder irgendwas äußern, was nicht ganz unseren Ansichten entspricht. Der OP hat viel mehr (auch mehr Lerneffekt) davon, wenn jeder von uns ihm direkt auf seine Weise antwortet.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-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/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788032?srt=yes#m1788032 frog 2021-05-03T12:54:25Z 2021-05-03T12:54:25Z Imagesslider <p>Hallo!</p> <p>Ich bin ein bisschen aus der Fassung und versuch mich wieder zu beruhigen. Damit hätte ich jetzt nicht gerechnet, dass hier im Forum ein Streit entsteht! Auch deshalb, weil die Stimmung eine nicht besonders gute ist!</p> <p>Jetzt bin ich total angespannt! Aber gut, so ist das Leben!</p> <p>Auf dein Angebot mir in den nächsten Tagen/Wochen zu helfen, komm ich gerne zurück und nehme es selbstverständlich, so lang du Zeit und Lust hast, dankend an! Ich sehe aber, dass du wirklich extrem schnell bist, auch was das Antworten betrifft usw. Du musst dich halt daran gewöhnen, dass das Reagieren bei mir noch länger dauert! Auch, weil mir wichtig ist, deine Kommentare zu verinnerlichen. Da muss ich oft noch einen zweiten oder sogar dritten Blick drauf werfen.</p> <p>Ausserdem bin ich berufstätig und erledige das immer(in den meisten Fällen) am Vormittag!</p> <p>Zur Webseite</p> <blockquote> <p>Ziel ist es, die URLs beider Varianten im HTML (dort wo der Inhalt notiert wird) zu notieren und die dann vom JS auslesen zu lassen. Falls das JS nicht funktioniert, kann man per Link das Grioißbild anzeigen lassen.</p> </blockquote> <p>Dass das geht bzw. man das so machen soll, ist für mich komplett neu!! Ich bin nämlich gerade dabei, die Webseite auf den neuesten Stand zu aktualisieren, mit allem was du mir geschrieben hast! Damit werde ich vermutlich den ganzen Nachmittag beschäftigt sein. Wenn ich das erledigt hab, dann hab ich auch den Kopf frei für diese Sachen, die ja ziemlich spannend klingen!</p> <blockquote> <p>Deine Bilder waren aber eindrucksvoll.</p> </blockquote> <p>Danke! Das freud mich echt!!</p> <p>Gruß frog</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788022?srt=yes#m1788022 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-03T05:57:10Z 2021-05-03T05:57:10Z Forums-Charta beachten <p>@@Matthias Scharwies</p> <blockquote> <p>Ich hätte auch anstelle des „funktioniert“, auf das du wieder einmal Oliver Kahn-mäßig angesprungen bist, erwähnen sollen, dass das Script ohne Fehler in der Konsole arbeitet. Das fand ich schon sehr gut.</p> </blockquote> <p>Du hast den Unterschied zwischen „keine Fehler in der Konsole“ und „funktioniert“ jetzt erkannt?</p> <blockquote> <p>Was <strong>mich</strong> persönlich stört, ist, dass du Anfänger immer wieder mit deinem "Funktioniert nicht" vor den Kopf stößt</p> </blockquote> <p>?? Ich habe auf <em>dein</em> Posting geantwortet, nicht auf <a href="/users/13161" class="mention registered-user" rel="noopener noreferrer">@frog</a>⁠s. Es war <em>dein</em> Fehler, den ich berichtigt habe, nicht <a href="/users/13161" class="mention registered-user" rel="noopener noreferrer">@frog</a>⁠s.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788027?srt=yes#m1788027 frog 2021-05-03T11:52:29Z 2021-05-03T11:52:29Z Forums-Charta beachten <p>Hallo Gunnar!</p> <p>Ich bedaure den Streit im Forum, der durch mich verursacht wurde, ausserordentlich! Wie Matthias ja schon sagt</p> <blockquote> <p>Dieser neu angemeldete Nutzer stellt uns nun seine Seite vor und bittet um Hilfe.</p> </blockquote> <p>Ich programmiere noch nicht lange und bis es für mich rund läuft, ist es noch ein langer Weg! Im moment bin ich wirklich noch mit allem überfordert und brauch mindestens dreimal so lang wie du, Matthias oder die meisten hier im Forum! Matthias stellt mir hier sein ganzes Wissen zur Verfügung und ich nehme dies wertschätzend an.</p> <p>Vieles passt noch nicht an meinem Code. Die Tatsache, dass man die Navigations-Pfeile mit der Tastatur nicht erreichen kann, gehört auch dazu. Aber ich kann dir versichern, dass das nur ein einziger von noch vielen Punkten ist, die ich noch abarbeiten muss!</p> <p>Es ist auch nicht sonderlich förderlich, mich ob meine Tipp- oder Rechtschreibfehler zu maßregeln, die werden nicht weniger!</p> <p>Stattdessen könntest du mir ja ein konstruktives Feedback geben!</p> <p>Gruß frog</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788029?srt=yes#m1788029 Tabellenkalk 2021-05-03T12:16:34Z 2021-05-03T12:16:34Z Imagesslider <p>Hallo,</p> <blockquote> <p>auf allen anderen Ebenen</p> </blockquote> <p>manchmal kann man das nicht intensiv genug betonen, dass Kommunikation auf mehr als einer Ebene <em>funktioniert</em>…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788028?srt=yes#m1788028 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-03T12:00:33Z 2021-05-03T12:00:33Z Nicht ganz falsch - aber auch nicht ganz richtig <p>@@Raketenwilli</p> <blockquote> <ul> <li>Aber wenn eine Webseite HTML-Fehler(!) enthält, dann ist nicht ganz klar, wie individuelle oder gar künftige Browser diese Fehler berichtigen.</li> </ul> </blockquote> <p>Doch, das ist es. Die HTML-Spec (f/k/a/ HTML5) legt genau fest, wie sich HTML-Parser zu verhalten haben – auch bei fehlerhaftem Sourcecode.</p> <p>Mein Posting sollte nun kein Freibrief sein, bei der Erstellung des Mark-ups rumzuschlampen.</p> <p>Worauf ich hinauswollte: Kleine Fehler im HTML, die keine Auswirkungen auf die Funktion der Seite haben, stören keinen Nutzer.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Wenn Nutzer etwas nicht bedienen können, das stört.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Man sollte sie aber natürlich trotzdem beheben oder gar nicht erst begehen. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788030?srt=yes#m1788030 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-03T12:19:51Z 2021-05-03T12:19:51Z Forums-Charta beachten <p>@@frog</p> <blockquote> <p>Ich bedaure den Streit im Forum, der durch mich verursacht wurde, ausserordentlich!</p> </blockquote> <p>Musst du nicht, dich trifft keine Schuld.</p> <p>Der Streit wurde verursacht durch Matthias’ unbedarfte Äußerung und meine Kritik daran.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788038?srt=yes#m1788038 Raketenwilli 2021-05-03T18:03:52Z 2021-05-03T18:03:52Z Nicht ganz falsch - aber auch nicht ganz richtig <blockquote> <p>Die HTML-Spec (f/k/a/ HTML5) legt genau fest, wie sich HTML-Parser zu verhalten haben – auch bei fehlerhaftem Sourcecode.</p> </blockquote> <p>Ich habe <em>„individuelle Browser“</em> hingeschrieben. Nicht: <em>„ideale“</em>.</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788201?srt=yes#m1788201 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2021-05-07T20:36:44Z 2021-05-07T20:38:58Z Imagesslider <p>Aloha ;)</p> <blockquote> <p>Ich bin ein bisschen aus der Fassung und versuch mich wieder zu beruhigen. Damit hätte ich jetzt nicht gerechnet, dass hier im Forum ein Streit entsteht! Auch deshalb, weil die Stimmung eine nicht besonders gute ist!</p> <p>Jetzt bin ich total angespannt! Aber gut, so ist das Leben!</p> </blockquote> <p>Da überschätzt du dieses Geplänkel. Ein richtiger Streit sieht (auch hier im Forum, hatten wir auch schon - ist aber schon eher länger her) anders aus. Wir Stammposter kennen uns meistens persönlich und können unseren Tonfall gegenseitig recht gut einschätzen. Für Außenstehende wirkt das oft härter als es gemeint ist - ein großes Manko rein schriftlicher Kommunikation, bei der viele Bedeutungsebenen, die im direkten Gespräch klarer sind, wegfallen.</p> <p>Im Speziellen mit <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> habe ich schon mehr als nur ein Bier zusammen getrunken, als sowas noch ging, und auch schon mehr als einen netten Abend in unterschiedlichsten Settings<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> verbracht. Ich bin mir fast sicher er nimmt mir mein Posting auf persönlicher Ebene genauso wenig übel wie ich ihm seines übel nehme. Wenn wir sachliche oder kommunikationstheoretische Differenzen haben leidet unsere persönliche Beziehung nicht zwangsläufig genauso darunter - normalerweise ist auf persönlicher Ebene alles cool.</p> <p>Also: Sei ganz beruhigt, und lass dich davon nicht ins Bockshorn jagen!</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-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> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Zum ersten Mal im August 2014 in einer Kneipe in Nürnberg, zuletzt 2020 zum 25-jährigen SELF-Jubiläum in Mannheim, und dazwischen jährlich kreuz und quer irgendwo in Deutschland - weder Gunnar noch ich haben seit 2014 ein Selftreffen verpasst und hatten zusätzlich 2019 sogar noch ein inoffizielles Matthias Scharwies war übrigens als einziger außer uns auch <strong>immer</strong> dabei. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788043?srt=yes#m1788043 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-03T19:54:09Z 2021-05-03T19:55:05Z Nicht ganz falsch - aber auch nicht ganz richtig <p>@@Raketenwilli</p> <blockquote> <blockquote> <p>Die HTML-Spec (f/k/a/ HTML5) legt genau fest, wie sich HTML-Parser zu verhalten haben – auch bei fehlerhaftem Sourcecode.</p> </blockquote> <p>Ich habe <em>„individuelle Browser“</em> hingeschrieben. Nicht: <em>„ideale“</em>.</p> </blockquote> <p>Ich denke nicht, dass irgendein aktueller Browser individuell von der Spec abweicht. Anders gesagt: Alle aktuellen Browser sind in dieser Hinsicht ideal.</p> <p>Hier geht es wohlgemerkt nicht um Unterschiede im Rendering, sondern dass alle aktuellen Browser aus demselben HTML-Quelltext – so fehlerhaft er auch sein mag – dasselbe DOM generieren.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788048?srt=yes#m1788048 Raketenschlitzohr 2021-05-04T09:46:18Z 2021-05-04T09:46:18Z Wettangebot? <blockquote> <p>Anders gesagt: Alle aktuellen Browser sind in dieser Hinsicht ideal.</p> </blockquote> <p>Wie viel würdest Du auf die Richtigkeit dieser Aussage wetten?</p> <p><strong>Tipp:</strong> Beim Haareschneiden habe ich mal eine Verletzung am Ohr erlitten…</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788049?srt=yes#m1788049 Raketenschlitzohr 2021-05-04T10:46:53Z 2021-05-04T10:46:53Z Die fehlerhafte Testseite <p>Damit ich das nicht irgendwann in drölf Tagen nochmal bauen muss;</p> <pre><code class="block bad 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> <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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<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>title</span><span class="token punctuation">></span></span>Fehlerhafte Webseite <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>z1s1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>z1s2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Absatz <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>z2s1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>z2s2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788050?srt=yes#m1788050 Rolf B 2021-05-04T10:56:16Z 2021-05-04T10:56:16Z Die fehlerhafte Testseite <p>Hallo Raketenschlitzohr,</p> <p>und bevor ihr das nun einem Browser vorlegt, macht beide einen Vorschlag, wie das korrekte HTML dazu aussehen sollte.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788060?srt=yes#m1788060 JürgenB https://www.j-berkemeier.de 2021-05-04T14:04:32Z 2021-05-04T14:04:32Z Die fehlerhafte Testseite <p>Hallo,</p> <p>wegen des fehlenden <code></title></code> legen die aktuellen FF, Chrome, Edge und IE11 alles in den Title. Damit hat die Seite keinen body und der Viewport bleibt leer. Ob das so der Spezifikation genügt, weiß ich nicht, aber meine Browser sind sich da einig.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788054?srt=yes#m1788054 Raketenschlitzohr 2021-05-04T12:56:14Z 2021-05-04T12:56:14Z Die fehlerhafte Testseite <blockquote> <p>macht beide einen Vorschlag, wie das korrekte HTML dazu aussehen sollte.</p> </blockquote> <p>Warum sollte ich mich damit befassen? Mir reicht der Nachweis, dass individuelle Parser das kaputte HTML unterschiedlich behandeln…</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788061?srt=yes#m1788061 Raketenschlitzohr 2021-05-04T14:14:43Z 2021-05-04T14:14:43Z Die fehlerhafte Testseite <blockquote> <p>FF, Chrome, Edge und IE11</p> </blockquote> <p>Es gibt weitere Webbrowser. </p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788117?srt=yes#m1788117 Raketenschlitzohr 2021-05-05T13:06:48Z 2021-05-05T13:06:48Z Link zur fehlerhaften Testseite <p><a href="https://home.fastix.org/Tests/bad_html.html" rel="nofollow noopener noreferrer">https://home.fastix.org/Tests/bad_html.html</a></p> <p>Na? Ich habe sogar zwei aktuelle Browser, welche das anders parsen als Chrom*, FF, IE11, Edge.</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788186?srt=yes#m1788186 Raketenschlitzohr 2021-05-07T07:15:10Z 2021-05-07T07:15:10Z Auflösung <blockquote> <p><a href="https://home.fastix.org/Tests/bad_html.html" rel="nofollow noopener noreferrer">https://home.fastix.org/Tests/bad_html.html</a></p> </blockquote> <p>Die von mir als widerlegbar behauptete Aussage war, <a href="https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788043#m1788043" rel="noopener noreferrer">dass sich <strong>alle</strong> aktuellen Browser „ideal“ verhalten</a>, also fehlerhaftes HTML gemäß der „Spec“ (und also mit dem gleichen Ergebnis) reparieren.</p> <p>Das „FF, Chrome, Edge und IE11“ nichts anzeigen hat Jürgen schon geschrieben, dieses Verhalten zeigt auch die Mehrheit der aktuellen Browser. Eine „Mehrheit“ sind nicht „alle“ und „alle“ meint „alle“:</p> <p>1.) Browser w3m, aktuelle Version:</p> <p><a href="/images/c0400db8-af01-11eb-bcf6-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/c0400db8-af01-11eb-bcf6-b42e9947ef30.png?size=medium" alt="Fehlerhafte Webseite, Darstellung mit w3m" title="Fehlerhafte Webseite, Darstellung mit w3m" loading="lazy"></a></p> <p>2.) Browser Lynx, aktuelle Version:</p> <p><a href="/images/ff30d5e8-af01-11eb-bb74-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/ff30d5e8-af01-11eb-bb74-b42e9947ef30.png?size=medium" alt="Fehlerhafte Webseite, Darstellung mit lynx" title="Fehlerhafte Webseite, Darstellung mit lynx" loading="lazy"></a></p> <p><strong>Ergebnis:</strong> Mindestens zwei aktuelle Browser weichen ab.</p> <p>Hätte ich nichts von „Schlitzohr“ erwähnt, wär ich jetzt wohl einen Euro reicher…</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788190?srt=yes#m1788190 Tabellenkalk 2021-05-07T07:42:53Z 2021-05-07T07:42:53Z Auflösung <p>Hallo,</p> <blockquote> <p><strong>Ergebnis:</strong> Mindestens zwei aktuelle Browser weichen ab.</p> </blockquote> <p>Du hast recht, aber mit „aktuell“ war sicher implizit „aktuell <strong>und</strong> gebräuchlich“ gemeint…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788193?srt=yes#m1788193 Raketenheino 2021-05-07T08:40:27Z 2021-05-07T08:40:27Z Zurück zum Kontext „Zugänglichkeit“ <blockquote> <p>Hallo,</p> <blockquote> <p><strong>Ergebnis:</strong> Mindestens zwei aktuelle Browser weichen ab.</p> </blockquote> <p>Du hast recht, aber mit „aktuell“ war sicher implizit „aktuell <strong>und</strong> gebräuchlich“ gemeint…</p> </blockquote> <p>Naja. Der Kontext der Übung war eigentlich meine Aussage zur Zugänglichkeit. <a href="https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788025#m1788025" rel="noopener noreferrer">Ich denke, dass korrektes HTML eine der Voraussetzungen dafür ist, dass Webseiten überhaupt für „zugänglich“ gehalten werden können</a>. Gerade in dem Bereich vermute ich eine signifikant häufigere Nutzung sonst seltener genutzter Browser:</p> <p>Wer also das Lied der Zugänglichkeit singt, der muss auch die Strophe vom validierten HTML mit trällern.</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788418?srt=yes#m1788418 frog 2021-05-14T22:41:28Z 2021-05-14T22:41:28Z Imagesslider <p>Hallo!</p> <blockquote> <p>Da überschätzt du dieses Geplänkel. Ein richtiger Streit sieht (auch hier im Forum, hatten wir auch schon - ist aber schon eher länger her) anders aus.</p> </blockquote> <p>Passt! Aber Gunnar hat ja schon recht wegen meiner Ignoranz bezüglich tastaturgesteuerte Buttons! Ich fühl mich jetzt sogar ein bisschen schlecht!</p> <p>Gruß Frog</p> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788419?srt=yes#m1788419 Matthias Scharwies mscharwies@selfhtml.org 2021-05-15T04:48:35Z 2021-05-15T04:48:35Z Imagesslider <p>Servus!</p> <blockquote> <p>Hallo!</p> <blockquote> <p>Da überschätzt du dieses Geplänkel. Ein richtiger Streit sieht (auch hier im Forum, hatten wir auch schon - ist aber schon eher länger her) anders aus.</p> </blockquote> <p>Passt! Aber Gunnar hat ja schon recht wegen meiner Ignoranz bezüglich tastaturgesteuerte Buttons! Ich fühl mich jetzt sogar ein bisschen schlecht!</p> </blockquote> <p>Es ist bis jetzt noch kein Meister vom Himmel gefallen.</p> <p>Dein HTML war ohne Fehler, du hast halt die falschen/unpassenden Elemente verwendet. Das fällt bei <code><div id="nav"></code> anstelle von <code>nav</code> weniger auf, bei <code><div class="button"></code> anstelle von <code>button</code> aber eben schon.</p> <p>Dein Script lief ja eben auch ohne Fehler in der Konsole, Du hattest nur zu viel feste Variablen wie <code>document.getElementById('mix')</code>verwendet und konntest so die Bildergruppe <code>handDrawn</code>nicht mehr einbinden.</p> <blockquote> <blockquote> <blockquote> <p>Perfekt. Ich habe ein Bildwechsler-Tutorial, das seit zwei Jahren rumliegt. Vielleicht kann ich das parallel fertigstellen.</p> </blockquote> </blockquote> </blockquote> <p>Ich bin gerade dabei, einen solchen <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM" rel="nofollow noopener noreferrer">Bild-Wechsler</a> vorzustellen. Dank Corona zieht sich das alles ein bisschen länger als erwartet - bis Pfingsten sollte das vorzeigbar sein.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788420?srt=yes#m1788420 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-15T05:32:38Z 2021-05-15T05:32:38Z Imagesslider <p>@@Matthias Scharwies</p> <blockquote> <p>Dein HTML war ohne Fehler</p> </blockquote> <p>??</p> <blockquote> <p>du hast halt die falschen/unpassenden Elemente verwendet.</p> </blockquote> <p>Was ein Fehler ist.</p> <blockquote> <p>Das fällt bei <code><div id="nav"></code> anstelle von <code>nav</code> weniger auf, bei <code><div class="button"></code> anstelle von <code>button</code> aber eben schon.</p> </blockquote> <p><code>nav</code> ist <a href="https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html" lang="en" rel="nofollow noopener noreferrer">landmark</a>; <code>div</code> nicht.</p> <p>Wenn Nutzer assistiver Technologien das Navigationsmenü auf der Seite nicht finden, dürfte das schon auffallen.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788421?srt=yes#m1788421 Matthias Scharwies mscharwies@selfhtml.org 2021-05-15T05:45:53Z 2021-05-15T05:45:53Z Imagesslider <p>Hallo Gunnar!</p> <p>Ich wünsche auch Dir ein schönes Wochenende!</p> <p>Der Newbie fühlt sich schlecht, weil er noch nicht so viel weiß, und du haust ihm (und mir) mit der Schaufel noch eins drauf!</p> <blockquote> <blockquote> <p>Das fällt bei <div id="nav"> anstelle von nav <strong>weniger</strong> auf, bei <div class="button"> anstelle von button aber eben schon.</p> </blockquote> </blockquote> <blockquote> <p>nav ist landmark; div nicht.</p> </blockquote> <blockquote> <p>Wenn Nutzer assistiver Technologien das Navigationsmenü auf der Seite nicht finden, dürfte das schon auffallen.</p> </blockquote> <p>Du kennst halt nur 0 und 1, andere Leute jedoch Zwischenstufen - dazu kommt mir das Wort "tone-deaf" in den Sinn.</p> <p>Wie gesagt, Schönes Wochenende noch!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788422?srt=yes#m1788422 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-05-15T05:50:09Z 2021-05-15T05:50:09Z Imagesslider <p>@@Matthias Scharwies</p> <blockquote> <p>Der Newbie fühlt sich schlecht, weil er noch nicht so viel weiß, und du haust ihm (und mir) mit der Schaufel noch eins drauf!</p> </blockquote> <p>Nochmal: Ich haue niemandem eins drauf, weil er noch nicht so viel weiß. Ich haue jedem eins drauf, der wider besseren Wissens fehlerhaftes HTML „ohne Fehler“ nennt.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/apr/28/imagesslider-mit-einem-sprunganker-verlinken/1788438?srt=yes#m1788438 frog http://newwebsite.bplaced.net/ 2021-05-15T14:14:44Z 2021-05-15T14:14:44Z Imagesslider <p>Hallo Matthias!</p> <blockquote> <p>Der Newbie fühlt sich schlecht, weil er noch nicht so viel weiß, und du haust ihm (und mir) mit der Schaufel noch eins drauf!</p> </blockquote> <p>Ich weiß noch nicht so viel, aber das ist ja auch in Ordnung, deshalb richte ich ja meine Fragen ans Forum, bzw. an dich! Ich hab bis jetzt vieles außen vor gelassen, die HTML5-Strukturierung gehört auch dazu, oder dass ich in JS immer nur den Datentyp var verwende und denke mir dann, damit kann ich mich später auch noch beschäftigen.</p> <p>Aber hier geht´s ja um Barrierefreiheit und insofern hat ja Gunnar recht, wenn er sich darüber beschwert, dass meine Webseite nicht für ALLE benutzerfreundlich ist! Ich muss ja auch gestehen, dass das bisher nicht so ein großes Thema für mich war und ich es anfangs ja auch ignoriert hab.</p> <p>Dashalb hab ich jetzt ein schlechtes Gewissen!</p> <p>Allerdings hätte Gunnar ja auch sein Anliegen an mich persönlich richten können und mir sagen, dass ich die Navi gefälligst mit buttons und nicht mit divs machen soll!</p> <p>Ich hab die Webseite auf HTML5 so wie du gesagt hast aktualisiert. Aber wahrscheinlich ist da wieder irgendein quirks drinnen! Ausserdem komm ich mit dem JS nicht zurecht. Mir ist prefentDefault klar, auch der event.target oder die nodeList Live, aber das alles zu kombinieren krieg ich nicht auf die Reihe! Ich habs versucht und es gelang mir auch teilweise, aber da schlagt dann uner anderem die hidden-box, die ich für den Thumb-Slider benötige ein Schnippchen! Das verbuche ich als persönliche Niederlage!</p> <p>Aber der event.target ist schon ziemlich cool! Ich glaub, der kann recht viel!?</p> <p>Gruß Frog</p>