Imagesslider mit einem Sprunganker verlinken

[frog]

Hallo, liebe Leute!

Ich hab mal wieder eine Frage, weil ich überhaupt nicht weiterkomme!! Für einen kleinen Tipp wäre ich echt Dankbar!

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.

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.

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!

Ich habs auch mit ...

document.anchors[0].one;

... und mit ...

window.location.hash="one";

... versucht, hab aber das gleiche Problem wie oben beschrieben!

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!!

hier nun der HtmlCode für die Startseite:

<div class="contentThumb">
      <div class="thumb">
          <span class="active2"></span>
  <div><a href = "zweite_seite.html#one"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>
  <div><a href = "zweite_seite.html#two"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>
  <div><a href = "zweite_seite.html#three"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>
  <div><a href = "zweite_seite.html#four"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>   
  <div><a href = "zweite_seite.html#five"><img class="thumbnail" src="thumb01.gif" alt=""></a></div> 
  <div><a href = "zweite_seite.html#six"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>
 </div>
        </div>

JS-Code für den Thumb-Slider der Startseite

    var leftArrow = document.querySelector('.oneLeft');
    var rightArrow = document.querySelector('.oneRight');
    var cont = document.querySelectorAll('.thumb');    
    
    var thumbIndex = 0;         
        
      leftArrow.addEventListener("click", function(){
         thumbIndex = (thumbIndex > 0) ? thumbIndex - 1 : 0;
         cont[0].style.transform = "translate(" + (thumbIndex) * -127 + "px)";
        if(thumbIndex == 0){
             leftArrow1.style.opacity="0";
            }else if(thumbIndex >= 1){
             rightArrow1.style.opacity="0.4";
            }    
        }); 
      

 rightArrow.addEventListener("click", function(){
         thumbIndex = (thumbIndex < 5) ? thumbIndex + 1 : 5;
         cont[0].style.transform = "translate(" + (thumbIndex) * -127 + "px)";
         if(thumbIndex >= 5){
             rightArrow1.style.opacity="0";
            }else if(thumbIndex >= 1){
              leftArrow1.style.opacity="0.4";  
            } 
      }); 

Html für die zweite Seite als Vollbild:

   <div id="wrapper">
    <div class="picture_container">     
     <div class="carousel">
         <div class="slider">
             
<section id="one" class=“sec“> <img src=„bild01.jpg" alt="" type="image/jpg"/></section>
             
<section id="two" class=“sec“><img src="bild02.jpg" alt="" type="image/jpg"/></section>
             
<section id="three" class=“sec“><img src="bild03.jpg" alt="" type="image/jpg"/></section>  
             
<section id="four" class=“sec“><img src="bild04.jpg" alt="" type="image/jpg"/></section>    
             
<section id="five" class=“sec“> <img src="bild05.jpg" alt="" type="image/jpg"/></section>    
             
<section id="six" class=“sec“><img src="bild06.jpg" alt="" type="image/jpg"/></section>
             
    </div>            

//Navigationspfeile
    <div class="controls">
   <img class="pfeil links" src ="arrow-leftYellow.svg" alt="">
   <img class="pfeil rechts" src ="arrow-rightYellow.svg" alt="">
</div>  
  </div>  
    </div>      
        
</div> 

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;
}

und hier der dazugehörige JS-Slider, den ich dann vermutlich bei jeden Klick auf das jeweilige thumbnail wieder änder muss.

var slider = document.querySelector('.slider'); 

    var leftPfeil = document.querySelector('.links');
    var rightPfeil = document.querySelector('.rechts'); 
    var sectionIndex = 0;


 leftPfeil.addEventListener("click", function(){
      sectionIndex = (sectionIndex > 0 ) ? sectionIndex - 1 : 0;
      slider.style.transform = "translate(" + (sectionIndex) * -25 + "%)";
          if(sectionIndex == 0 ){
             leftPfeil.style.opacity="0";     
              
        }else if(sectionIndex >= 1){
             rightPfeil.style.opacity="0.2";
   }
              
 });

rightPfeil.addEventListener("click", function(){
     sectionIndex = (sectionIndex < 5) ? sectionIndex + 1 : 5;
     slider.style.transform = "translate(" + (sectionIndex) * -25 + "%)";
         if(sectionIndex >= 5){
             rightPfeil.style.opacity="0";
   
       }else if(sectionIndex >= 1){
             leftPfeil.style.opacity="0.2";
            }    
 });	    

Ich bin für jeden Hinweis Dankbar!!

[JürgenB]

Hallo,

... 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.

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“?

Gruß
Jürgen

PS: Ein link zu deiner Seite wäre hilfreich

[frog]

Hallo!

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“?

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!

PS: Ein link zu deiner Seite wäre hilfreich

ich bin im moment leider Offline! Bin aber gerne bereit noch mehr Code hochzuladen! Sag mir nur welchen?

[Matthias Scharwies]

Servus!

PS: Ein link zu deiner Seite wäre hilfreich

ich bin im moment leider Offline! Bin aber gerne bereit noch mehr Code hochzuladen! Sag mir nur welchen?

Mit einem Live-Beispiel ist für uns das Debuggen und Inspizieren viel einfacher:

• SELFHTML:Forum/online-Beispiele

Nur selten hat jemand die Zeit, deine Codebeispiele

1. in seinen Editor zu kopieren,
2. abzuspeichern
3. und dann die Seite(n) zu öffnen und zu inspizieren.

Herzliche Grüße

Matthias Scharwies

[frog]

Ja, Danke! Das werde ich versuchen!!

[frog]

PS: Ein link zu deiner Seite wäre hilfreich

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.

Gerne kopiere ich da alles rein und ich darf euch dann den Link morgen schicken?

Gruß der frog

[Matthias Scharwies]

Servus!

PS: Ein link zu deiner Seite wäre hilfreich

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.

Es wird von den Suchmaschinen nicht gefunden, du kannst herumprobieren und testen (und wir auch!)

Gerne kopiere ich da alles rein und ich darf euch dann den Link morgen schicken?

Super, wir schauen uns das dann an!

Herzliche Grüße

Matthias Scharwies

[frog]

Danke man! echt!!

[Gunnar Bittersmann]

@@frog

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.

Wo ich’s gerade doppelt sehe: ´ ist ein Akzentzeichen wie in Café. Es ist kein Apostroph.

Ein Apostroph sieht so aus: ’ (und nicht so: ').

Wie man einen Apostroph eingibt, ist je nach Betriebssystem und Tastaturtreiber unterschiedlich. Für mich (macOS, US-Tastatur) ist’s ⌥⇧]

😷 LLAP

[Rolf B]

Hallo Gunnar,

Ein Apostroph sieht so aus: ’ (und nicht so: ').

Es ist schon merkwürdig, dass das Zeichen, das Unicode "Apostroph" nennt (Codepoint 39 '), nicht das typographisch richtige Zeichen ist.

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.

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.

Oder man vermeidet diese Hölle und begnügt sich mit ⇧ #.

Für mich (macOS, US-Tastatur) ist’s ⌥⇧]

Für deutsche Macs angeblich ⌥⇧#.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ein Apostroph sieht so aus: ’ (und nicht so: ').

Es ist schon merkwürdig, dass das Zeichen, das Unicode "Apostroph" nennt (Codepoint 39 '), nicht das typographisch richtige Zeichen ist.

Grmpf, Unicode-Codepoints sollten IMHO immer und überall hexadezimal angegeben werden: U+0027.

Unicode benennt so einige Zeichen komisch, z.B.:

• U+2033 ″ DOUBLE PRIME – ist keine Prime (erste), sondern eine Sekunde (zweite)
• U+25CF ● BLACK CIRCLE – wenn man bernsteinfarben auf schwarz schreibt, ist der Kreis nicht black, sondern eben bernsteinfarben

Und dass U+0027 nicht das richtige Zeichen für den Apostroph ist, steht ja auch in der Spec:

• 2019 ’ is preferred for apostrophe
• preferred characters in English for paired quotation marks are 2018 ‘ & 2019 ’

aber immerhin steht es auch mit Code 146 in der Latin-1 Codepage zur Verfügung, d.h. man gibt Alt+0146 ein.

IIRC muss man die Ziffern des numerischen Tastaturblocks dafür verwenden, nicht die in der obersten Leiste.

Für mich (macOS, US-Tastatur) ist’s ⌥⇧]

Für deutsche Macs angeblich ⌥⇧#.

Die Angabe stimmt. (Musste zur Verifikation doch glatt das MacBook wechseln, da es die #-Taste bei US-Tastatur nicht gibt; da ist es \ und die sitzt nicht links neben return, sondern zwischen return und delete.)

😷 LLAP

[frog]

Hallo!

Ich hab mit einem Slider, welcher in JS programmiert ist, ein Problem. Den fertigen Teil meiner Webseite hab ich nun zwecks Übersicht hier:

http://newwebsite.bplaced.net/

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!

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!!

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!

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!!

Gruß frog

[Matthias Scharwies]

Servus Frog!

Ich hab mit einem Slider, welcher in JS programmiert ist, ein Problem. Den fertigen Teil meiner Webseite hab ich nun zwecks Übersicht hier:

http://newwebsite.bplaced.net/

Super, so können wir alles anschauen und das JS inpizieren

Solte bei einem Frog die Webseite nicht grün sein? duckundwech 😀

Zuerst zum HTML:

Dein HTML ist valide, das ist schon mal gut!

Du verwendest aber viele div-Elemente, was man anders machen könnte. (Siehe: HTML/Tutorials/HTML5/Seitenstrukturierung)

Deine <div class="btn"></div>wollen bestimmt button-Elemente 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.

Zum CSS:

Man sollte nur in Ausnahmefällen etwas absolut positionieren. Dann braucht man aber auch kein Flexbox mehr:

.contentThumb {
    position: absolute;
    overflow-x: hidden;
    width: 635px;
    height: 75px;
    margin-top: 190px;
    cursor: none;

Feste Werte heißen magic numbers und sind verpönt, da du gar nicht weiß, mit welchen Gerät ich grad im Internet bin.

zum JS

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!

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!!

nicht böse sein: Ich steig durch dein Konzept nicht durch.

Ich würde auf der ersten Seite das Hamburger-Menü realisieren. Ich will schon auf der Startseite deinen Lebenslauf anklicken können.

Die Vorschaupunkte würde ich als "thumbnails"- realisieren. Dazu gehören aber die einzelnen Textbeschreibungen.

Entscheide dich jetzt:

1. Thumbnailbuttons öffnen auf der gleichen Seite einen Image-Slider

oder

2. thumbnail-Links öffnen Unterseiten.

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!!

Ich würde Deinen Lebenslauf ins HTML packen. Da gehört er hin und wird auch von Suchmaschinen gefunden.

Ich muss jetzt leider weg, schau mir das später (oder morgen) noch mal an.

Herzliche Grüße

Matthias Scharwies

[frog]

Hallo Matthias!

Feste Werte heißen magic numbers und sind verpönt, da du gar nicht weiß, mit welchen Gerät ich grad im Internet bin.

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?

nicht böse sein: Ich steig durch dein Konzept nicht durch.

Bin ich sicher nicht! Ich sag nur danke für dein super Feedback und stelle fest, dass mein Konzept nicht ganz funktioniert!!

Die Vorschaupunkte würde ich als "thumbnails"- realisieren. Dazu gehören aber die einzelnen Textbeschreibungen.

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!!!!

Entscheide dich jetzt:

1. Thumbnailbuttons öffnen auf der gleichen Seite einen Image-Slider

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?

„oder

2.	thumbnail-Links öffnen Unterseiten.“

Ich dachte es gibt in JS eine Möglichkeit sich einen Array von einer anderen Seite zu schnappen! Geht wohl nicht!!

Ich würde Deinen Lebenslauf ins HTML packen. Da gehört er hin und wird auch von Suchmaschinen gefunden.

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!

einen freundlichen und dankbaren Gruß vom Frosch, der alle Farben mag!😀😀

[Matthias Scharwies]

Servus Frog!

Die Vorschaupunkte würde ich als "thumbnails"- realisieren. Dazu gehören aber die einzelnen Textbeschreibungen.

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!!!!

Entscheide dich jetzt:

1. Thumbnailbuttons öffnen auf der gleichen Seite einen Image-Slider

Ja, so mach ich das auf jeden Fall!

Hier ist deine Seite einmal in HTML5: https://jsr-hersbruck.de/frog/

Ich habe alle div-Elemente durch bessere Alternativen ersetzt:

1. Der div class="wrapper" wird durch body ersetzt.

2. div class="button" gehören zum slider und werden später dynamisch gesetzt.

3. div class="illu"ist h1

4. div class="thumb mix" wird zu section class="thumb" id="vector" - so können wir es mit einem Seitenanker ansteuern.

5. div class="cursor" ist der cursor - den gibt es doch automatisch- den kannst du mit CSS stylen, auch mit einem Bild! ** Andererseits ist es wichtig, dass der Nutzer weiß, dass der Cursor über einem Link ist**.

Auf der zweiten Seite mit dem Astronauten hattest du so eine Einteilung mit section bereits - ich hab's jetzt auch auf die Hauptseite gelegt!

Flyout-Navigation

Die Flyout-Navigation der zweiten Seite enthielt auch zwei div mit dem Hamburger-Menü und dem Kreuz. So etwas ist Darstellung (also CSS) und nicht Inhalt

Mikael Ainalem zeigt, wie man die Icons mit SVG animiert:

The 🍔 menu A step by step guide to creating a Hamburger Menu in SVG & CSS

Oops - jetzt ist das SVG doch im Inhalt gelandet!

slides-Navigation

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!).

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.

CSS

Die oben schon erwähnten magic numbers sind nicht nötig, wenn du Grid Layout verwendest:

body{
	display: grid;
	align-content: center;
	justify-content: center;	
}

packt h1 und nav id="slides" in die Mitte und zentriert sie automatisch!

[[EDIT]] ich habe es jetzt noch einfacher gelöst:

body{
	max-width:50em;
  margin: 1em auto;	
}

[[/EDIT]]

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 relative Schriftgröße em.

Ich müsste dann insgesamt drei große Image-Slider übereinander legen. Das schaut mir aber dann auch nach position: absolute in CSS aus?

Nein, die würde ich alle im HTML behalten und dann per CSS einblenden, wenn man eine Gruppe auswählt.

Schön wäre, wenn es nur ein Slider wäre, der die Bilder einer Gruppe dann anzeigt.

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!

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?

Herzliche Grüße

Matthias Scharwies

[frog]

Hallo Matthias!

Danke für deine Mühe! Ich seh jetzt auch, dass meine Startseite beim Aufruf recht mager aussieht!

Ich habe alle div-Elemente durch bessere Alternativen ersetzt:

Danke! Das hätte ich schon von Anfang an machen sollen!

Ich würde Deinen Lebenslauf ins HTML packen. Da gehört er hin und wird auch von Suchmaschinen gefunden.

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!

Mikael Ainalem zeigt, wie man die Icons mit SVG animiert

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!!

slides-Navigation

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!).

Danke man, ich hab jetzt fast ein schlechtes Gewissen, dass du das gemacht hast!

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.

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!

Die oben schon erwähnten magic numbers sind nicht nötig, wenn du Grid Layout verwendest

Mach ich, danke für den Tipp!!

Ich müsste dann insgesamt drei große Image-Slider übereinander legen. Das schaut mir aber dann auch nach position: absolute in CSS aus?

Nein, die würde ich alle im HTML behalten und dann per CSS einblenden, wenn man eine Gruppe auswählt.

Meinst du da wahrscheinlich classList.add und remove?

Schön wäre, wenn es nur ein Slider wäre, der die Bilder einer Gruppe dann anzeigt.

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!!

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.

Meinst du ein Container bleibt, nur die Thumbs werden beim hovern neu geladen!?

Soll es auch eine Großansicht geben?

Nein, hab ich jetzt nicht vor!

Ich brauch Stunden um mir deine Anmerkungen und Tipps intellektuell zu verinnerlichen!!

DANKE frog

[Matthias Scharwies]

Servus!

Hallo Matthias!

Danke für deine Mühe! Ich seh jetzt auch, dass meine Startseite beim Aufruf recht mager aussieht!

Da müssen wir uns was überlegen!

Ich würde Deinen Lebenslauf ins HTML packen. Da gehört er hin und wird auch von Suchmaschinen gefunden.

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!

Ich komme auf 2 Möglichkeiten:

1. mehr Inhalt

2. mehr Weißraum, der bei dir gelb wäre (zu erreichen mit section {height: 100vh;}

, sodass der Lebenslauf nach unten rutscht. Ob du den unten aus dem Viewport ragenden Inhalt durch Scrollen erreichbar lässt, oder mit overflow:hidden versteckst, ist erst mal egal.

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!!

Mein Interesse an deiner Seite war durch die Überschrift „Vector“ geweckt. Da ist wirklich viel möglich.

Ebenso interessant ist der Bereich "Hand-drawn". Eric Meyer hat erklärt, wie er seine Webseite aufgepeppt hat:

• meyerweb.com: Pseudo-Randomly Adding Illustrations with CSS

Eine andere Möglichkeit wären hand-drawn Icons, z.B. hier.

Wenn die Grundlagen stimmen

• einfaches HTML,
• wenig CSS (da die Browser meistens schon gut darstellen)

kann man mit wenigen Sachen viel erreichen.

Ich brauch Stunden um mir deine Anmerkungen und Tipps intellektuell zu verinnerlichen!!

Kein Problem. Du hst ja wsl. auch keinen Termin, an dem deine Seite fertig sein soll, oder?

Herzliche Grüße

Matthias Scharwies

[frog]

Hallo!

Ob du den unten aus dem Viewport ragenden Inhalt durch Scrollen erreichbar lässt, oder mit overflow:hidden versteckst, ist erst mal egal.

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!

Mein Interesse an deiner Seite war durch die Überschrift „Vector“ geweckt. Da ist wirklich viel möglich.

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!!

Kein Problem. Du hst ja wsl. auch keinen Termin, an dem deine Seite fertig sein soll, oder?

Nein, das wäre schlimm. Ab und an - trotz Corona - Jobaufträge, dann muss die Seite eben warten!

lieben Gruß frog

p.s.: ich komm mit dem target/event möglicherweise ins strudeln. Dann stell ich wieder eine Frage ans Forum?

[Matthias Scharwies]

p.s.: ich komm mit dem target/event möglicherweise ins strudeln. Dann stell ich wieder eine Frage ans Forum?

Jederzeit!

Herzliche Grüße

Matthias Scharwies

[frog]

Passt!!DANKE!!😀👍

[Matthias Scharwies]

Servus!

2. thumbnail-Links öffnen Unterseiten.“

Ich dachte es gibt in JS eine Möglichkeit sich einen Array von einer anderen Seite zu schnappen! Geht wohl nicht!!

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.

• http://newwebsite.bplaced.net/mixedmedia.html#two

Dein Slider sieht gut aus und funktioniert!

Ich würde mir jetzt überlegen, wie der Ur-Zustand aussehen soll.

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.

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.

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:

z.B.

currentGallery = section, in die geklickt wurde. Das erreichst du mit event.target

BTW: Ich glaube, jetzt Dein Ursprungsproblem verstanden zu haben:

<!---
????class sec dient möglicherweise zum navigieren der Pfeile in JS 
für den Sprunganker???? 
--->

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.

Klassen verwnedest du eh zu viele. Nimm eine id oder Klasse und selektiere dann deren kindelemente über den Namen:

.gallery img {}

.gallery button.back,
.gallery button.next{
}

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

• http://newwebsite.bplaced.net/mixedmedia.html#two

Dein Slider sieht gut aus und funktioniert!

Nein, das tut er nicht.

Per Tastatur unbedienbare divs anstatt bedienbarer buttons, keine visuelle Kennzeichnung, wo sich der Fokus gerade befindet …

Es ist mir unverständlich, wie du da zu der Fehleinschätzung kommen konntest, das Ding würde funktionieren.

😷 LLAP

[frog]

Hallo!

Ein Klick öffnet das Bild in Groß-Ansicht (Hast du) und es werden Pfeile eingeblendet/ erzeugt.

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 …

... Nein, du kannst in JS nicht auf andere Seiten (oder auf das Dateiverzeichnis des Servers) zugreifen.

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!

Ich hätte schwören können, hier mit einer forEach-Schleife durchzukommen!!

Ein Königreich gäbe ich für deine Geschwindigkeit!!

NOCHMALS DANKE frog

[Matthias Scharwies]

Hallo Frog,

Ein Klick öffnet das Bild in Groß-Ansicht (Hast du) und es werden Pfeile eingeblendet/ erzeugt.

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 …

Normalerweise empfehlen wir ein Live-Beispiel, weil man da beim Inspizieren schnell einen Syntax-Fehler findet, der die Frage beantwortet.

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. Da kannst du stolz drauf sein!

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.

<section id="mix" class="gallery">  
  <h2>Mix</h2>
  <a href = "mix01-1920px.jpg">
    <img class="thumbnail" src="thumbMix01.jpg" alt="">
  </a>
  <a href = "mix02-1920px.jpg">
    <img class="thumbnail" src="thumbMix02.jpg" alt="">
  </a>
  ...
</section>

[[EDIT] href-Attribut auf Bilder-URL geändert! [[/EDIT]

ist schon ganz gut. Du hast Bilder in klein (class="thumbnail", kann man später durch .gallery img{} ersetzen). Bei einem Klick öffnet sich der Link und das Bild wird in groß dargestellt.

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!

Ich hätte schwören können, hier mit einer forEach-Schleife durchzukommen!!

Ich würde jetzt Dein Script anpassen:

Bei einem Klick öffnet sich kein Link (kann man mit preventDefault abschalten), sondern die Galerie.

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).

Mit querySelectorAll('#mix img') erstellst du eine Liste aller Bilder, bzw. dann von deren URLs.

Die URL des geklickten Links (href-Attribut) wird in ein img als src-Attribut eingefügt und groß dargestellt.

Es werden Pfeile als Buttons eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten.)

Wie @Gunnar Bittersmann 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.

Oft hat man unten Punkte, die zeigen, wie viele Bilder in der Galerie sind.

Das wäre ein Übersichts-Bonus. Evtl auch eine automatische Slideshow, die Bilder automatisch weiter schiebt, aber eben auch eine manuelle Steuerung erlaubt.

Ich hätte schon Lust, dich da in den nächsten Tagen/Wochen zu begleiten.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

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. Da kannst du stolz drauf sein!

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).

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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).

Dass dieses Posting 2× negativ bewertet wurde, zeigt, wie notwendig es ist, hier im Forum immer wieder darauf hinzuweisen, dass man Webseiten für Menschen baut, nicht für grünes Licht von Validatoren, Lintern oder sonst welchen Maschinen. Immer und immer wieder.

So, jetzt dürft Ihr wieder auf Minus clicken – oder doch einfach mal nachdenken. Eure Entscheidung.

😷 LLAP

[Matthias Scharwies]

Servus!

Dass dieses Posting 2× negativ bewertet wurde, zeigt, wie notwendig es ist, ...

Nein, hier ist ein Anfänger mit einer Verständnis-Frage.

@Jürgen B hat ihn darauf hingewiesen, dass ein Live-Beispiel besser wäre. Ich habe ihm eine entsprechende Seite verlinkt.

Dieser neu angemeldete Nutzer stellt uns nun seine Seite vor und bittet um Hilfe.

Mir fallen zwei Sachen auf: lauter divs und keine JS-Fehler in der Konsole.

Ich habe ihm gezeigt, dass man anstelle der divs besser andere Elemente verwendet.

Ich habe alle div-Elemente durch bessere Alternativen ersetzt:

.... 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!).

Ich habe versucht mich in diesem Post auf die divs und die magic numbers im CSS zu konzentrieren.

Den Post zum JS 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.

---

Und jetzt kommst du.

Was mich 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 "constant stream of negativity" (Das ist nicht von mir, passt aber sehr gut) demotivierst.

In der Forums-Charta seht leider kein kategorisches „Formuliere höflich und wertschätzend!“, sondern nur „Behandle andere Forumsteilnehmer mit mindestens derselben Höflichkeit, die du dir selbst gegenüber erwartest und vermeide, andere Forumsteilnehmer persönlich zu attackieren.“

Das ist aber kein Grund als vermeintlich harter Hund eine solch hohe Frustrationstoleranz bei anderen einzufordern.

So, jetzt dürft Ihr wieder auf Minus clicken – oder doch einfach mal nachdenken. Eure Entscheidung.

😷 LLAP

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

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.

Du hast den Unterschied zwischen „keine Fehler in der Konsole“ und „funktioniert“ jetzt erkannt?

Was mich persönlich stört, ist, dass du Anfänger immer wieder mit deinem "Funktioniert nicht" vor den Kopf stößt

?? Ich habe auf dein Posting geantwortet, nicht auf @frog⁠s. Es war dein Fehler, den ich berichtigt habe, nicht @frog⁠s.

😷 LLAP

[frog]

Hallo Gunnar!

Ich bedaure den Streit im Forum, der durch mich verursacht wurde, ausserordentlich! Wie Matthias ja schon sagt

Dieser neu angemeldete Nutzer stellt uns nun seine Seite vor und bittet um Hilfe.

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.

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!

Es ist auch nicht sonderlich förderlich, mich ob meine Tipp- oder Rechtschreibfehler zu maßregeln, die werden nicht weniger!

Stattdessen könntest du mir ja ein konstruktives Feedback geben!

Gruß frog

[Gunnar Bittersmann]

@@frog

Ich bedaure den Streit im Forum, der durch mich verursacht wurde, ausserordentlich!

Musst du nicht, dich trifft keine Schuld.

Der Streit wurde verursacht durch Matthias’ unbedarfte Äußerung und meine Kritik daran.

😷 LLAP

[Camping_RIDER]

Aloha ;)

Dass dieses Posting 2× negativ bewertet wurde, zeigt, wie notwendig es ist, hier im Forum immer wieder darauf hinzuweisen, dass man Webseiten für Menschen baut, nicht für grünes Licht von Validatoren, Lintern oder sonst welchen Maschinen. Immer und immer wieder.

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.

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.

Ich lese aus der Aussage von @Matthias Scharwies 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“.

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.

---

Vielleicht als allgemeine Bemerkung:

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.

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.

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.

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.

---

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.

Grüße,

RIDER

[Tabellenkalk]

Hallo,

auf allen anderen Ebenen

manchmal kann man das nicht intensiv genug betonen, dass Kommunikation auf mehr als einer Ebene funktioniert…

Gruß
Kalk

[Raketenwilli]

Also Deine Meinung ist nicht ganz falsch, aber auch nicht ganz richtig:

• 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?
• 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.

[Gunnar Bittersmann]

@@Raketenwilli

• Aber wenn eine Webseite HTML-Fehler(!) enthält, dann ist nicht ganz klar, wie individuelle oder gar künftige Browser diese Fehler berichtigen.

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.

Mein Posting sollte nun kein Freibrief sein, bei der Erstellung des Mark-ups rumzuschlampen.

Worauf ich hinauswollte: Kleine Fehler im HTML, die keine Auswirkungen auf die Funktion der Seite haben, stören keinen Nutzer.^[1] Wenn Nutzer etwas nicht bedienen können, das stört.

😷 LLAP

---

1. Man sollte sie aber natürlich trotzdem beheben oder gar nicht erst begehen. ↩︎

[Raketenwilli]

Die HTML-Spec (f/k/a/ HTML5) legt genau fest, wie sich HTML-Parser zu verhalten haben – auch bei fehlerhaftem Sourcecode.

Ich habe „individuelle Browser“ hingeschrieben. Nicht: „ideale“.

[Gunnar Bittersmann]

@@Raketenwilli

Die HTML-Spec (f/k/a/ HTML5) legt genau fest, wie sich HTML-Parser zu verhalten haben – auch bei fehlerhaftem Sourcecode.

Ich habe „individuelle Browser“ hingeschrieben. Nicht: „ideale“.

Ich denke nicht, dass irgendein aktueller Browser individuell von der Spec abweicht. Anders gesagt: Alle aktuellen Browser sind in dieser Hinsicht ideal.

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.

😷 LLAP

[Raketenschlitzohr]

Anders gesagt: Alle aktuellen Browser sind in dieser Hinsicht ideal.

Wie viel würdest Du auf die Richtigkeit dieser Aussage wetten?

Tipp: Beim Haareschneiden habe ich mal eine Verletzung am Ohr erlitten…

[Raketenschlitzohr]

Damit ich das nicht irgendwann in drölf Tagen nochmal bauen muss;

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<title>Fehlerhafte Webseite
</head>
	<body>
		<table border=1>
			<tr><td>z1s1</td>z1s2</td>
			<p>Absatz
			<tr><td>z2s1</td><td>z2s2</td>
		</table>
	</body>
</html>

[Rolf B]

Hallo Raketenschlitzohr,

und bevor ihr das nun einem Browser vorlegt, macht beide einen Vorschlag, wie das korrekte HTML dazu aussehen sollte.

Rolf

[Raketenschlitzohr]

macht beide einen Vorschlag, wie das korrekte HTML dazu aussehen sollte.

Warum sollte ich mich damit befassen? Mir reicht der Nachweis, dass individuelle Parser das kaputte HTML unterschiedlich behandeln…

[JürgenB]

Hallo,

wegen des fehlenden </title> 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.

Gruß
Jürgen

[Raketenschlitzohr]

FF, Chrome, Edge und IE11

Es gibt weitere Webbrowser. 😉

[Raketenschlitzohr]

https://home.fastix.org/Tests/bad_html.html

Na? Ich habe sogar zwei aktuelle Browser, welche das anders parsen als Chrom*, FF, IE11, Edge.

[Raketenschlitzohr]

https://home.fastix.org/Tests/bad_html.html

Die von mir als widerlegbar behauptete Aussage war, dass sich alle aktuellen Browser „ideal“ verhalten, also fehlerhaftes HTML gemäß der „Spec“ (und also mit dem gleichen Ergebnis) reparieren.

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“:

1.) Browser w3m, aktuelle Version:

2.) Browser Lynx, aktuelle Version:

Ergebnis: Mindestens zwei aktuelle Browser weichen ab.

Hätte ich nichts von „Schlitzohr“ erwähnt, wär ich jetzt wohl einen Euro reicher…

[Tabellenkalk]

Hallo,

Ergebnis: Mindestens zwei aktuelle Browser weichen ab.

Du hast recht, aber mit „aktuell“ war sicher implizit „aktuell und gebräuchlich“ gemeint…

Gruß
Kalk

[Raketenheino]

Hallo,

Ergebnis: Mindestens zwei aktuelle Browser weichen ab.

Du hast recht, aber mit „aktuell“ war sicher implizit „aktuell und gebräuchlich“ gemeint…

Naja. Der Kontext der Übung war eigentlich meine Aussage zur Zugänglichkeit. Ich denke, dass korrektes HTML eine der Voraussetzungen dafür ist, dass Webseiten überhaupt für „zugänglich“ gehalten werden können. Gerade in dem Bereich vermute ich eine signifikant häufigere Nutzung sonst seltener genutzter Browser:

Wer also das Lied der Zugänglichkeit singt, der muss auch die Strophe vom validierten HTML mit trällern.

[frog]

Hallo Matthias!

Hab dein Posting übersehen und es erst jetzt gelesen!!!

Normalerweise empfehlen wir ein Live-Beispiel, weil man da beim Inspizieren schnell einen Syntax-Fehler findet, der die Frage beantwortet.

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!

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.

Na ja, du hast schon recht, es ist wahrlich eine Suppe? Ich werd´s aber mit der html5-Strukturierung ändern!

Da kannst du stolz drauf sein!

Ich schau regelmäßig in die Console ob sich da eine Fehlermeldung auftut! Meistens ist es dann auch so, aber ich behebe sie dann!!

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.

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?

ist schon ganz gut. Du hast Bilder in klein (class="thumbnail", kann man später durch .gallery img{} ersetzen).

Ja, so hab ich mir das vorgestellt!

Bei einem Klick öffnet sich kein Link (kann man mit preventDefault abschalten), sondern die Galerie.

Wozu brauch ich da prefentDefault, wenn ich die Thumbs nicht verlinke?

<a href = "mixedmedia.html#one">

die id als Sprunganker brauch ich ja dann auch nicht mehr?!

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).

Ich muss mir das event/target genauer ansehen, wei ich mir da jetzt überhaupt nix vorstellen kann.

Mit querySelectorAll('#mix img') erstellst du eine Liste aller Bilder, bzw. dann von deren URLs.

Die URL des geklickten Links (href-Attribut) wird in ein img als src-Attribut eingefügt und groß dargestellt.

Es werden Pfeile als Buttons eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten.)

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!!

Wie @Gunnar Bittersmann 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.

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!!

Ich hätte schon Lust, dich da in den nächsten Tagen/Wochen zu begleiten.

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?

wünsche dir alles Gute frog

[Matthias Scharwies]

Servus!

Hallo Matthias!

Hab dein Posting übersehen und es erst jetzt gelesen!!!

Normalerweise empfehlen wir ein Live-Beispiel, weil man da beim Inspizieren schnell einen Syntax-Fehler findet, der die Frage beantwortet.

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!

Das Du dich auf BPlaced angemeldet und uns Dein Beispiel gezeigt hast, fand ich gut!

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?

Das musst du entscheiden!

ist schon ganz gut. Du hast Bilder in klein (class="thumbnail", kann man später durch .gallery img{} ersetzen).

Ja, so hab ich mir das vorgestellt!

Bei einem Klick öffnet sich kein Link (kann man mit preventDefault abschalten), sondern die Galerie.

Wozu brauch ich da prefentDefault, wenn ich die Thumbs nicht verlinke?

<a href = "mixedmedia.html#one">

die id als Sprunganker brauch ich ja dann auch nicht mehr?!

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.

Ich hab's oben ausgebessert.

Du benötigst ja von jeder Grafik zwei Varianten:

• ein thumbnail
• die Großansicht (Du hattest in der Slideshow bereits mit picture experimentiert. Mir ist das zu kompliziert. Dein Bild illumixed106-1.5x.jpg hat 357 KB - für mein WLAN im Wohnzimmer fast zu viel)

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.

• HTML/Tutorials/Trennung_von_Inhalt,_Präsentation_und_Verhalten

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).

Ich muss mir das event/target genauer ansehen, wei ich mir da jetzt überhaupt nix vorstellen kann.

Mit querySelectorAll('#mix img') erstellst du eine Liste aller Bilder, bzw. dann von deren URLs.

Die URL des geklickten Links (href-Attribut) wird in ein img als src-Attribut eingefügt und groß dargestellt.

Es werden Pfeile als Buttons eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten.)

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.

Du hast schon irgendwie recht. Die Liste ist aber eine Live Node List

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!!

Perfekt. Ich habe ein Bildwechsler-Tutorial, das seit zwei Jahren rumliegt. Vielleicht kann ich das parallel fertigstellen.

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?

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.

Herzliche Grüße

Matthias Scharwies

[frog]

Hallo!

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!

Jetzt bin ich total angespannt! Aber gut, so ist das Leben!

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.

Ausserdem bin ich berufstätig und erledige das immer(in den meisten Fällen) am Vormittag!

Zur Webseite

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.

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!

Deine Bilder waren aber eindrucksvoll.

Danke! Das freud mich echt!!

Gruß frog

[Camping_RIDER]

Aloha ;)

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!

Jetzt bin ich total angespannt! Aber gut, so ist das Leben!

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.

Im Speziellen mit @Gunnar Bittersmann 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^[1] 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.

Also: Sei ganz beruhigt, und lass dich davon nicht ins Bockshorn jagen!

Grüße,

RIDER

---

1. 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 immer dabei. ↩︎

[frog]

Hallo!

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.

Passt! Aber Gunnar hat ja schon recht wegen meiner Ignoranz bezüglich tastaturgesteuerte Buttons! Ich fühl mich jetzt sogar ein bisschen schlecht!

Gruß Frog

[Matthias Scharwies]

Servus!

Hallo!

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.

Passt! Aber Gunnar hat ja schon recht wegen meiner Ignoranz bezüglich tastaturgesteuerte Buttons! Ich fühl mich jetzt sogar ein bisschen schlecht!

Es ist bis jetzt noch kein Meister vom Himmel gefallen.

Dein HTML war ohne Fehler, du hast halt die falschen/unpassenden Elemente verwendet. Das fällt bei <div id="nav"> anstelle von nav weniger auf, bei <div class="button"> anstelle von button aber eben schon.

Dein Script lief ja eben auch ohne Fehler in der Konsole, Du hattest nur zu viel feste Variablen wie document.getElementById('mix')verwendet und konntest so die Bildergruppe handDrawnnicht mehr einbinden.

Perfekt. Ich habe ein Bildwechsler-Tutorial, das seit zwei Jahren rumliegt. Vielleicht kann ich das parallel fertigstellen.

Ich bin gerade dabei, einen solchen Bild-Wechsler vorzustellen. Dank Corona zieht sich das alles ein bisschen länger als erwartet - bis Pfingsten sollte das vorzeigbar sein.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Dein HTML war ohne Fehler

??

du hast halt die falschen/unpassenden Elemente verwendet.

Was ein Fehler ist.

Das fällt bei <div id="nav"> anstelle von nav weniger auf, bei <div class="button"> anstelle von button aber eben schon.

nav ist landmark; div nicht.

Wenn Nutzer assistiver Technologien das Navigationsmenü auf der Seite nicht finden, dürfte das schon auffallen.

😷 LLAP

[Matthias Scharwies]

Hallo Gunnar!

Ich wünsche auch Dir ein schönes Wochenende!

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!

Das fällt bei <div id="nav"> anstelle von nav weniger auf, bei <div class="button"> anstelle von button aber eben schon.

nav ist landmark; div nicht.

Wenn Nutzer assistiver Technologien das Navigationsmenü auf der Seite nicht finden, dürfte das schon auffallen.

Du kennst halt nur 0 und 1, andere Leute jedoch Zwischenstufen - dazu kommt mir das Wort "tone-deaf" in den Sinn.

Wie gesagt, Schönes Wochenende noch!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

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!

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.

😷 LLAP

[frog]

Hallo Matthias!

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!

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.

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.

Dashalb hab ich jetzt ein schlechtes Gewissen!

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!

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!

Aber der event.target ist schon ziemlich cool! Ich glaub, der kann recht viel!?

Gruß Frog