oxo888oxo: Navigation auf mobilen Geräten ein- und ausklappen

0 109

Navigation auf mobilen Geräten ein- und ausklappen

oxo888oxo
  • javascript
  1. 1
    Martin_Online
    1. 1
      Gunnar Bittersmann
      1. 1
        oxo888oxo
      2. 0
        oxo888oxo
    2. 0
      oxo888oxo
      1. 1
        Gunnar Bittersmann
        1. 0
          oxo888oxo
    3. 0

      Wohin mit dem Javascript im HTML Code?

      oxo888oxo
      1. 1
        Martin_Online
        1. 1

          Nachtrag

          Martin_Online
          • html
          1. 1

            Deine Seite auf dem Handy

            Martin_Online
            1. 0
              oxo888oxo
          2. 0
            oxo888oxo
        2. 0
          oxo888oxo
          1. 1

            JS Script im Kopf oder Fuß Bereich?

            Martin_Online
            1. 1
              Auge
            2. 0
              oxo888oxo
              1. 1
                Auge
                1. 0
                  oxo888oxo
                  1. 1
                    Auge
                    1. 0
                      oxo888oxo
                    2. 0

                      Funktioniert doch noch nicht mit Script im head

                      oxo888oxo
                      1. 1
                        Martin_Online
                        1. 0
                          oxo888oxo
                          1. 1
                            Martin_Online
                            1. 1

                              Nachtrag: Android Browser

                              Martin_Online
                              1. 0
                                oxo888oxo
                                1. 1
                                  Martin_Online
                                  • css
                                  1. 0
                                    oxo888oxo
                              2. 1
                                Gunnar Bittersmann
                                1. 0

                                  Gunnar spricht in fremden Zungen

                                  Auge
                                  • menschelei
                        2. 1
                          Auge
                          1. 0

                            Habe ich Hinweis auf Fehler im Script richtig verstanden?

                            oxo888oxo
                            1. 1
                              Auge
                              1. 0
                                oxo888oxo
                                1. 1
                                  Auge
                                2. 1
                                  Martin_Online
                                  1. 0
                                    oxo888oxo
                                    1. 1

                                      An die JS Speziallisten

                                      Martin_Online
                                      1. 0
                                        oxo888oxo
                                        1. 1
                                          Martin_Online
                                        2. 1

                                          Fehler gefunden

                                          Martin_Online
                                          1. 0
                                            oxo888oxo
                                            1. 1
                                              Martin_Online
                                              1. 1
                                                Gunnar Bittersmann
                                                1. 1
                                                  Martin_Online
                                                  1. 1
                                                    Gunnar Bittersmann
                                                  2. 0
                                                    oxo888oxo
                                                    1. 1
                                                      Martin_Online
                                                      1. 0
                                                        oxo888oxo
                                                        1. 1
                                                          Martin_Online
                                                          1. 0
                                                            oxo888oxo
                                                          2. 0

                                                            Aktuelle Version ohne <html class="no-js">

                                                            oxo888oxo
                                                            1. 0
                                                              Martin_Online
                                                              1. 0
                                                                oxo888oxo
                                                              2. 0
                                                                oxo888oxo
                                                              3. 0

                                                                CSS-Code für Mobile-First umbauen

                                                                oxo888oxo
                                                                1. 0
                                                                  Martin_Online
                                                                  1. 0
                                                                    oxo888oxo
                                                                    1. 0
                                                                      Martin_Online
                                                                      1. 0
                                                                        oxo888oxo
                                                                        1. 0
                                                                          Martin_Online
                                                                          1. 0
                                                                            oxo888oxo
                                                                            1. 0
                                                                              Martin_Online
                                                                              1. 0
                                                                                oxo888oxo
                                                                                1. 0
                                                                                  Martin_Online
                                                                                  1. 0
                                                                                    oxo888oxo
                                                                                    1. 0
                                                                                      Martin_Online
                                                                                      1. 0
                                                                                        oxo888oxo
                                                                                        1. 0
                                                                                          Martin_Online
                                                                                          1. 0
                                                                                            oxo888oxo
                                                                                            1. 0
                                                                                              Gunnar Bittersmann
                                                                                            2. 0
                                                                                              Martin_Online
                                                                                              1. 0
                                                                                                oxo888oxo
                                                                                              2. 0
                                                                                                Gunnar Bittersmann
                                                                                              3. 0
                                                                                                Gunnar Bittersmann
                                                        2. 1
                                                          molily
                                                2. 0

                                                  Also JS doch lieber unten einbinden, ja?

                                                  oxo888oxo
                                          2. 1
                                            molily
                                            1. 0
                                              oxo888oxo
            3. 1
              molily
              1. 0
                oxo888oxo
                1. 1
                  Gunnar Bittersmann
          2. 1
            molily
            1. 0
              oxo888oxo
        3. 0
          oxo888oxo
    4. 0

      Ich schaffe es einfach nicht ... schnieef :)

      oxo888oxo
      1. 0
        Martin_Online
        1. 0
          oxo888oxo
          1. 0
            Martin_Online
            1. 0
              oxo888oxo
              1. 0
                Matthias Apsel
                1. 0
                  oxo888oxo
                  1. 0
                    Matthias Apsel
    5. 0

      Ich bekomme es nicht hin ... muss wohl echt aufgeben nun.

      oxo888oxo
    6. 0
      oxo888oxo
  2. 3

    Bitte nicht ständig neue Threads zur gleichen Grundthematik

    ChrisB
    • zu diesem forum
    1. 0
      oxo888oxo
    2. 0
      oxo888oxo
      1. 1
        Martin_Online
        1. 0
          oxo888oxo
        2. 0
          oxo888oxo
          1. 1
            Martin_Online
            1. 1
              oxo888oxo
      2. 3

        Bitte nicht ständig neue Threads, Begründung

        Auge
        1. 0
          oxo888oxo
  3. 1
    Gunnar Bittersmann
    1. 1
      Gunnar Bittersmann

Hallo

Es geht um die Navifation meiner Webseite auf mobilen Geräten.
Ich versuche eine möglichst einfache und unkomplizierte Lösung zu finden.

Erreichen möchte ich gerne, dass die Navigation auf mobilen Geräten per Link ein und ausgeklappt werden kann.

Das hier ist die Seite ohne Ein-und-Ausklapp-Funktion:
http://spaceart.de/_xxxx_versandkosten.php
Da wird bei schmalen Viewport die Navigation einfach nach oben verrschoben.
Das ist aber nicht so sehr schön finde ich, weil der User von meiner Seite dann ja erstmal immer nur die Navigation vor der Nase hat.

Ich habe da nun mal folgendes gebastelt.
Das ist übrigens nicht auf meinem eigenen Mist gewachsen, sondern ich habe es irgenwie herbeigegoogelt.
http://spaceart.de/_xxxx_versandkosten-2.php

<script language="JavaScript">  
  function div_change() {  
    for (i = 0; i < div_change.arguments.length; i++) {  
      var _id = div_change.arguments[i];  
      document.getElementById(_id).style.display = (document.getElementById(_id).style.display == 'none' ) ? 'block' : 'none';  
    }  
  }  
</script>  
  
<a href="javascript:/" onClick="div_change('klappen')">Navigation</a><br>  
<nav id="klappen" style="display: none;">  
  <a href="#">Kategorie 1</a><br>  
  <a href="#">Kategorie 2</a><br>  
  <a href="#">Kategorie 3</a><br>  
  <a href="#">Kategorie 4</a><br>  
  <a href="#">Kategorie 5</a><br>  
</nav>

Das scheint doch schon mal sehr gut zu funktionieren.
Ich hatte mir jetzt folgendes weiter überlegt.
Per Media Queries dafür sorgen, dass für das <nav>-Element je nach Viewport das voreingestellte display-Attribut auf "none" bzw. "block" steht.
Den Navigation-Link würde ich dann natürlich auch per Media Queries ein- bzw. ausblenden.

Das hätte doch den schönen Vorteil, dass ich nicht 2 Navigationen in meinen Code einfügen muss.
Und es läuft selbst auf meinem recht schwachbrüstigen alten Handy super.

Ein Problem sehe ich nun noch.
Bei deaktiviertem Javascript gibts kein Menü.
Das ist natürlich nicht so schön.
Könnte man das irgendwie raffiniert lösen?
Also so, dass bei deaktiviertem Javascriopt die Navigation grundsätzlich eingeblenet ist.

Was haltet Ihr denn von dieser Lösung?
Ist das OK so im Großen und Ganzen?
Oder vergesse/übersehe ich da was wesentliches bzw. mache einen dummen Denkfehler?

Gruß
Ingo

  1. Hallo,

    schau dir mal an, wie ich das gelöst habe, vielleicht ist es auch etwas für dich. Achtung, ich arbeite hier nicht mit den neuen HTML5 Elemente wie <nav>, aber das könntest du ja umstellen wenn gewünscht

    Mein HTML

    <html class="no-js">

    Damit prüfe ich, ob ob JS on oder off ist. In HTML5 ist es erlaubt HTML eine class mit zu geben.

      
    <div id="navigation">  
      <h3 class="menu-klappen" >  
      <span data-icon="&#8801;" aria-hidden="true"></span>  
      <span class="screen-reader-text">Menü</span>  
      </h3>  
      <ul>  
      <li><a href="#">erster</a></li>  
      <li><a href="#">zweiter</a></li>  
      <li><a href="#">dritter</a></li>  
      <li><a href="#">vierter</a></li>  
      <li><a href="#">fünfter</a></li>  
    </ul>  
    </div>  
    
    

    Hier kommt nun mein CSS

      
    #navigation {  
      border-bottom: 1px solid #efefef;  
      background-color: #43373F;  
      border-radius: 4px 4px 0px 0px;  
      padding: 1px;  
    }  
      
    #navigation li {  
    	list-style: none;  
        display: inline-block;  
        background-color: #43373F;  
    }  
    #navigation a{  
      text-decoration: none;  
      display:block;  
      padding: 1.5em 15% 0.75em;  
      color: #fff;  
    }  
    #navigation  a:hover{  
      color:#CE6634;  
      
    }  
    .menu-klappen {  
        display: none;  
    }  
      
    @media screen and (max-width:880px) {  
      
      /* Button zum Anzeigen des Menüs */  
      .js .menu-klappen {  
        display: block;  
        cursor: pointer;  
        color: #efefef;  
        border-radius: 50%;  
        background-color: #645360;  
        width: 2.5em;  
        height: 2.5em;  
        margin: 10px auto;  
        text-align: center;  
        line-height: 2.5em;  
        border: 1px solid #010101;  
        font-weight: normal;  
      }  
      #navigation li {  
        -webkit-box-shadow: 0 5px 5px rgba(245, 245, 245, 0.75) inset;  
        box-shadow: 0 5px 5px rgba(245, 245, 245, 0.75) inset;  
      }  
      .js  #navigation ul {  
        display: none;  
      }  
      #navigation ul.klappen-on {  
        display: block;  
      }  
       #navigation ul.klappen-on li,  .no-js  #navigation  li {  
        display: block;  
      }  
      [data-icon]:before {  
        content: attr(data-icon);  
        speak: none;  
        display: inline-block;  
        font-size: 200%;  
      }  
      .screen-reader-text {  
        position: absolute;  
        top: -9999px;  
        left: -9999px;  
      }  
      
    }  
    
    

    Hier noch ein JavaSCript das ohne jQuery funktioniert, da du dieses ja nicht wolltest. Das Script kommt nicht von mir, funktioniert aber 100%

      
    ( function() {  
    //Klasse zu html hinzufügen lassen, die kennzeichnet, dass JavaScript aktiviert ist  
    document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';  
    function naviklapp(navid) {  
    //Elemente definieren: Navigationselement, Button, Menü  
    var nav = document.getElementById( navid );  
    var button;  
    var menu;  
    //Wenn keine Navigation, dann nichts tun  
    if ( ! nav )  
    return;  
    //der Button ist das erste h3-Element innerhalb der Navigation  
    button = nav.getElementsByTagName( 'h3' )[0];  
      
    // die erste ungeordnete Liste in der Navigation ist das Menü  
    menu = nav.getElementsByTagName( 'ul' )[0];  
    if ( ! button )  
    return;  
      
    if ( ! menu || ! menu.childNodes.length ) {  
    button.style.display = 'none';  
    return;  
    }  
    button.onclick = function() {  
      
    if ( -1 != button.className.indexOf( 'klappen-on' ) ) {  
    button.className = button.className.replace( ' klappen-on', '' );  
    menu.className = menu.className.replace( ' klappen-on', '' );  
    } else {  
    button.className += ' klappen-on';  
    menu.className += ' klappen-on';  
    }  
    };  
    }  
    naviklapp('navigation');  
      
    } )();;  
    
    
    1. @@Martin_Online:

      nuqneH

      <html class="no-js">

      Die Klasse kann man sich sparen.

      document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';

      Dann muss man sie hier nicht mühsam entfernen, sodern einfach nur " js" hinzufügen.

      BTW, es gibt classList.add() und classList.remove().

      Im Stylesheet braucht man '.no-js' nicht. Man gibt einfach die Regeln für ohne JavaScript an und per '.js' zusätzlich die Regeln für wenn JavaScript aktiviert ist (progressive enhancement).

      Und sollte man’s doch brauchen, gibt es ja 'html:not(.js)'.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Im Stylesheet braucht man '.no-js' nicht. Man gibt einfach die Regeln für ohne JavaScript an und per '.js' zusätzlich die Regeln für wenn JavaScript aktiviert ist (progressive enhancement).

        Ist das im Grunde auch meine Überlegung hier, was Du damit meinst?
        https://forum.selfhtml.org/?t=217681&m=1495944

      2. <html class="no-js">
        Die Klasse kann man sich sparen.

        document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
        Dann muss man sie hier nicht mühsam entfernen, sodern einfach nur " js" hinzufügen.

        Ich habe jetzt mal versucht, das umzusetzen.

        Hier eine bereinigte Datei, in der es noch NICHT umgesetzt wurde:
        http://spaceart.de/_xxxx_test_1.php

        Und hier eine bereinigte Datei, in der es umgesetzt wurde:
        http://spaceart.de/_xxxx_test_2.php

        Ich habe in der zweiten Datei einfach das folgende herausgenommen:
        .replace(/\bno-js\b/g, '')
        Und aus dem <html>-Tag habe ich die Klasse (class="no-js") entfernt.

        Es scheint soweit ja zu funktionieren.
        Habe ich das soweit erstmal richtig gemacht?

    2. Hier noch ein JavaSCript das ohne jQuery funktioniert, da du dieses ja nicht wolltest. Das Script kommt nicht von mir, funktioniert aber 100%

      Ja großartig.
      Das funktioniert ja wirklich sehr sehr gut.
      Sogar auf meinem lahmen Smartphone fluppt das :)

      Du hattest ja in Deinem HTML-Code die Navigation in <div>...</div> gepackt:
      <div id="navigation">

      Ich habe das inzwischen so umgebaut, dass ich stattdessen <nav>...</nav> verwende.
      Bisher habe ich das auch gut hinbekommen.
      Dem öffnenden <nav>-Element habe ich noch das hier hinzugefügt: id="navigation".
      Wenn ich das entferne, kann anscheinend das Javascript nicht mehr die Navigation "ansprechen".
      Kann das sein?

      Ist es möglich, das Javascript so anzupassen, dass es das <nav>-Element direkt "anspricht" ohne id?
      Und wenn ja, ist das sinnvoll, das so zu machen?

      Mein aktueller HTML-Code:

      <nav id="navigation">  
        <h3 class="menu-klappen" >  
          <span data-icon="&#8801;" aria-hidden="true"></span>  
          <span class="screen-reader-text">Menü</span>  
        </h3>  
        <ul>  
          <li><a href="/listen/_xx_film-modelle-a.php" class="rubrik">Film und TV Modelle</a></li>  
          <li><a href="/listen/_xx_erotik-modelle-a.php" class="rubrik">Erotik Modelle</a></li>  
          <li><a href="/_xx_search.php?showAll" class="rubrik">Gesamtprogramm</a></li>  
          <li><a href="/_xx_bestellvorgang.php">Bestellvorgang</a></li>  
          <li><a class="aktiv" href="/_xx_versandkosten.php">Versandkosten</a></li>  
          <li><a href="/_xx_bezahlmethoden.php">Bezahl-Methoden</a></li>  
          <li><a href="/_xx_kontakt.php">Kontakt</a></li>  
          <li><a href="/_xx_impressum.php">Impressum</a></li>  
          <li><a href="/_xx_newsletter.php">Newsletter</a></li>  
          <li><a href="/_xx_agb.php">AGB</a></li>  
          <li><a href="/_xx_datenschutz.php">Datenschutz</a></li>  
          <li><a href="/_xx_widerrufsbelehrung.php">Widerrufsbelehrung</a></li>  
        </ul>  
      </nav>
      

      Mein aktueller CSS-Code:

      nav ul {  
        padding-left: 0;  
      }  
        
      nav li {  
        list-style: none;  
      }  
        
      .menu-klappen {  
          display: none;  
      }  
        
      @media screen and (max-width:880px) {  
        
        /* Button zum Anzeigen des Menüs */  
        .js .menu-klappen {  
          display: block;  
          cursor: pointer;  
          color: #fff;  
          background-color: #313131;  
          width: 2.5rem;  
          height: 2.5rem;  
          text-align: center;  
          line-height: 2.5rem;  
          font-weight: normal;  
        }  
        
        .js nav ul {  
          display: none;  
        }  
        
        nav ul.klappen-on {  
          display: block;  
        }  
        
         nav ul.klappen-on li, .no-js nav li {  
          display: block;  
        }  
        
        [data-icon]:before {  
          content: attr(data-icon);  
          speak: none;  
          display: inline-block;  
          font-size: 200%;  
        }  
        
        .screen-reader-text {  
          position: absolute;  
          top: -9999px;  
          left: -9999px;  
        }  
        
      }
      

      Mein aktueller Javascript-Code:

      <script>  
      ( function() {  
      //Klasse zu html hinzufügen lassen, die kennzeichnet, dass JavaScript aktiviert ist  
      document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';  
      function naviklapp(navid) {  
      //Elemente definieren: Navigationselement, Button, Menü  
      var nav = document.getElementById( navid );  
      var button;  
      var menu;  
      //Wenn keine Navigation, dann nichts tun  
      if ( ! nav )  
      return;  
      //der Button ist das erste h3-Element innerhalb der Navigation  
      button = nav.getElementsByTagName( 'h3' )[0];  
        
      // die erste ungeordnete Liste in der Navigation ist das Menü  
      menu = nav.getElementsByTagName( 'ul' )[0];  
      if ( ! button )  
      return;  
        
      if ( ! menu || ! menu.childNodes.length ) {  
      button.style.display = 'none';  
      return;  
      }  
      button.onclick = function() {  
        
      if ( -1 != button.className.indexOf( 'klappen-on' ) ) {  
      button.className = button.className.replace( ' klappen-on', '' );  
      menu.className = menu.className.replace( ' klappen-on', '' );  
      } else {  
      button.className += ' klappen-on';  
      menu.className += ' klappen-on';  
      }  
      };  
      }  
      naviklapp('navigation');  
        
      } )();;  
      </script>
      
      1. @@oxo888oxo:

        nuqneH

        Wenn ich das entferne, kann anscheinend das Javascript nicht mehr die Navigation "ansprechen".
        Kann das sein?

        Ja, klar, wenn du document.getElementById('navigation') aufrufst:

        function naviklapp(navid) {
        //Elemente definieren: Navigationselement, Button, Menü
        var nav = document.getElementById( navid );

        }

        naviklapp('navigation');

          
          
        
        > Ist es möglich, das Javascript so anzupassen, dass es das <nav>-Element direkt "anspricht" ohne id?  
          
        `document.querySelektor('nav')          `{:.language-javascript} – erstes nav-Element im DOM  
        `document.querySelektorAll('nav')       `{:.language-javascript} – Liste aller nav-Elemente im DOM  
        `document.querySelektorAll('nav')[0]    `{:.language-javascript} – erstes Element in der Liste aller nav-Elemente im DOM  
          
        oder old school  
          
        `document.getElementsByTagName('nav')   `{:.language-javascript} – Liste aller nav-Elemente im DOM  
        `document.getElementsByTagName('nav')[0]`{:.language-javascript} – erstes Element in der Liste aller nav-Elemente im DOM  
          
          
        
        > Und wenn ja, ist das sinnvoll, das so zu machen?  
          
        Nein. Was, wenn du deinen Code später änderst und mehrere nav-Elemente im DOM hast?  
          
        Die Bezeichnung "navigation" ist dann natürlich auch nichtssagend. Besser sowas wie "main-navigation" …  
          
        Qapla'
        
        -- 
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        
        1. Und wenn ja, ist das sinnvoll, das so zu machen?

          Nein. Was, wenn du deinen Code später änderst und mehrere nav-Elemente im DOM hast?

          Ah OK alles klar.
          Dann lass ich es so mit der id im Nav-Tag.
          Danke für die Aufklärung.

    3. Hier noch ein JavaSCript das ohne jQuery funktioniert, da du dieses ja nicht wolltest. Das Script kommt nicht von mir, funktioniert aber 100%

      Deine Lösung funktioniert ja wirklich großartig.
      Ich habe es nun auch hinbekommen, es einzubauen:
      http://spaceart.de/_xxxx_versandkosten-3.php

      Dort habe ich den Javascript-Code ans Ende des HTML Codes direkt vor den schließenden <body>-Tag gesetzt. Ist das richtig so? Oder sollte ich den Javascript Code besser woanders hin machen?

      1. Dort habe ich den Javascript-Code ans Ende des HTML Codes direkt vor den schließenden <body>-Tag gesetzt. Ist das richtig so? Oder sollte ich den Javascript Code besser woanders hin machen?

        Ich persönliche packe meinen JS Code entweder so wie du ans Ende der Seite, oder in eine externe eigene Datei und binde diese dann ebenfalls unten auf der Seite ein, hat den Vorteil, dass ich nicht auf allen Seiten meinen JS Code einfügen muss. Ist wohl Geschmackssache.

        1. Du hast noch einen kleinen Fehler

          <h3 class="menu-klappen""> sollte so heißen <h3 class="menu-klappen">

          1. Ich hab mir deine Seite mal auf meinem Handy anschaut und es quer gehalten.

            Ich finde du verschenkst im Kopf doch sehr viel Platz. Wie wäre es, wenn du das Logo etwas kleiner machst, auf die Linke Seite schiebst und deine Suche inkl. Dem Navigationsbutton nach Rechts schiebst. So würde der Platz ausgenutzt und dein User sieht mehr.

            1. Ich finde du verschenkst im Kopf doch sehr viel Platz. Wie wäre es, wenn du das Logo etwas kleiner machst, auf die Linke Seite schiebst und deine Suche inkl. Dem Navigationsbutton nach Rechts schiebst. So würde der Platz ausgenutzt und dein User sieht mehr.

              Ja stimmt, das habe ich auch schon auf dem Zettel.

          2. <h3 class="menu-klappen""> sollte so heißen <h3 class="menu-klappen">

            Oh ja. Danke. Ich habe das soeben korrigiert.

        2. in eine externe eigene Datei und binde diese dann ebenfalls unten auf der Seite ein

          Ich habe gerade mal kurz gegoogelt, um zu schauen, wie das mit dem Einbinden einer externen Datei geht. Dabei habe ich dann das hier gefunden: http://www.html-seminar.de/javascript-einbinden.htm

          Dort wird vorgeschlagen, dass Script von Extern im <head> der Seite einzubinden, weil:
          "... die Ladezeit verkürzt, da diese Datei zwischengespeichert werden kann.".

          Was ist denn davon zu halten?

          1. Dort wird vorgeschlagen, dass Script von Extern im <head> der Seite einzubinden, weil:
            "... die Ladezeit verkürzt, da diese Datei zwischengespeichert werden kann.".

            Da höre ich ehrlich gesagt auch immer wieder verschiedene Meinungen. Die einen sagen oben die anderen sagen unten. Ich bin der Meinung, wenn ein Script unten eingebundne wird, baut sich die Seite schneller auf. Vielleicht kann ja ein JS Experte hier mal mehr dazu sagen.

            1. Hallo

              Dort wird vorgeschlagen, dass Script von Extern im <head> der Seite einzubinden, weil:
              "... die Ladezeit verkürzt, da diese Datei zwischengespeichert werden kann.".

              Da höre ich ehrlich gesagt auch immer wieder verschiedene Meinungen. Die einen sagen oben die anderen sagen unten. Ich bin der Meinung, wenn ein Script unten eingebundne wird, baut sich die Seite schneller auf. Vielleicht kann ja ein JS Experte hier mal mehr dazu sagen.

              Ich bin zwar kein JS-Experte, aber das kann auch ich beantworten.

              Die Ladezeit der JS-Datei selbst unterscheidet sich nicht durch die Stelle der Einbindung in das HTML-Dokument. 100 kByte bleiben 100 kByte, egal wo deren Aufruf erfolgt.

              Es unterscheidet sich aber der Zeitpunkt des Ladens innerhalb des Aufbauvorgangs des HTML-Dokuments. Findet die Einbindung der JS-Datei im <head> statt, wird durch deren Ladevorgang der Aufbau des HTML-Dokuments im Browser unterbrochen. Wird das JS am Ende der Seite eingebunden, fällt das nicht in's Gewicht, da dort sowieso nur noch ein paar HTML-Elemente geschlossen werden.

              Es unterscheidet sich also der Zeitraum bis zur Anzeige der Seite im Browser und das kann, je nach Umfang des zu ladenden JS-Codes, relevant sein.

              Tschö, Auge

              --
              Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
              Terry Pratchett, "Wachen! Wachen!"
              ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
              Veranstaltungsdatenbank Vdb 0.3
            2. Ich habe es nun mal oben in den <head>-Bereich eingebunden.
              Aber es funktioniert leider nicht.
              Bestimmt habe ich es falsch gemacht.

              So habe ich es eingebunden:
              <script src="/navigation.js"></script>
              Ist das nicht richtig so?

              1. Hallo

                Ich habe es nun mal oben in den <head>-Bereich eingebunden.
                Aber es funktioniert leider nicht.
                Bestimmt habe ich es falsch gemacht.

                So habe ich es eingebunden:
                <script src="/navigation.js"></script>
                Ist das nicht richtig so?

                Falls die Datei navigation.js im Wurzelverzeichnis der Webseite liegt ja, sonst nicht.

                Tschö, Auge

                --
                Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                Terry Pratchett, "Wachen! Wachen!"
                ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                Veranstaltungsdatenbank Vdb 0.3
                1. <script src="/navigation.js"></script>
                  Ist das nicht richtig so?

                  Falls die Datei navigation.js im Wurzelverzeichnis der Webseite liegt ja, sonst nicht.

                  Doch, die Datei navigation.js liegt im Wurzelverzeichnis der Webseite, so wie auch die Datei, wo ich es eingebunden habe: http://spaceart.de/_xxxx_versandkosten-3.php

                  1. Hallo

                    <script src="/navigation.js"></script>
                    Ist das nicht richtig so?

                    Falls die Datei navigation.js im Wurzelverzeichnis der Webseite liegt ja, sonst nicht.

                    Doch, die Datei navigation.js liegt im Wurzelverzeichnis der Webseite, so wie auch die Datei, wo ich es eingebunden habe: http://spaceart.de/_xxxx_versandkosten-3.php

                    Jep. Das JS wird übrigens auch geladen und – zumindest das habe ich geprüft – die Klasse für das Element <html> wird dabei neu gesetzt. Allerdings werden um den Klassennamen noch Leerzeichen hinzugefügt (class="no-js" → class=" js "). Das sieht nicht so aus, wie es aussehen soll.

                    Tschö, Auge

                    --
                    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                    Terry Pratchett, "Wachen! Wachen!"
                    ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                    Veranstaltungsdatenbank Vdb 0.3
                    1. Jep. Das JS wird übrigens auch geladen und – zumindest das habe ich geprüft – die Klasse für das Element <html> wird dabei neu gesetzt. Allerdings werden um den Klassennamen noch Leerzeichen hinzugefügt (class="no-js" → class=" js "). Das sieht nicht so aus, wie es aussehen soll.

                      Ahhh alles klar.
                      Nun habe ich den Fehler gefunden.
                      Vielen Dank für den Tipp!

                    2. Jep. Das JS wird übrigens auch geladen und – zumindest das habe ich geprüft – die Klasse für das Element <html> wird dabei neu gesetzt. Allerdings werden um den Klassennamen noch Leerzeichen hinzugefügt (class="no-js" → class=" js "). Das sieht nicht so aus, wie es aussehen soll.

                      Leider habe ich mich zu früh gefreut.
                      Ich habe im Script folgendes geändert:
                      ... = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
                      In
                      ... = document.documentElement.className.replace(/\bno-js\b/g, '') + 'js';

                      Aber dann funktioniert es im Android Browser nicht.

                      Die einzige Möglichkeit, wie es im FF, IE und Android Brwoser funktioniert ist:
                      * Script vor </body> einbinden
                      * ... = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';

                      Merkwürdig, oder?
                      Oder was mache ich noch falsch?

                      1. Merkwürdig, oder?
                        Oder was mache ich noch falsch?

                        Mach dir doch bitte nicht so viele Gedanken ob eine Script oben oder unten eingebunden wird. Wie heute Morgen schon geschrieben es wird in der Regel eh empfohlen solche Scripte unten einzubinden.

                        Konzentriere dich lieber auf wichtigere Sachen :)

                        Ohne es jetzt genau zu wissen, aber ich denke das Script greift auf HTML Elemente zurück die erst nach einem kompletten Laden der Seite zur Verfügung stehen, daher muss es unten stehen.

                        1. Mach dir doch bitte nicht so viele Gedanken ob eine Script oben oder unten eingebunden wird. Wie heute Morgen schon geschrieben es wird in der Regel eh empfohlen solche Scripte unten einzubinden.

                          Konzentriere dich lieber auf wichtigere Sachen :)

                          Ohne es jetzt genau zu wissen, aber ich denke das Script greift auf HTML Elemente zurück die erst nach einem kompletten Laden der Seite zur Verfügung stehen, daher muss es unten stehen.

                          OK alles klar. Dann werde ich das mal so machen.
                          Was mich allerdings wundert, dass es auf dem Android Browser nicht funktioniert.
                          Also ich meine jetzt nicht den Chrome-Browser.
                          Sondern den Stock Android Browser mit dieser blauen Erdkugel.
                          Da verhält sich das Script so, als wenn JavaScript deaktiviert ist.

                          1. Was mich allerdings wundert, dass es auf dem Android Browser nicht funktioniert.
                            Also ich meine jetzt nicht den Chrome-Browser.
                            Sondern den Stock Android Browser mit dieser blauen Erdkugel.
                            Da verhält sich das Script so, als wenn JavaScript deaktiviert ist.

                            Auf deiner Seite kann ich das bestätigen, da geht es im Browser unter Android wirklich nicht, wenn ich allerdings mein Beispiel nehme, dieses in eine leere Seite einfügen und dieses teste, funkuniert es ohne Probleme. Ich nehme an, das hat etwas mit deinem Code zu tun.

                            1. Ich hab mir das etwas genauer angesehen, wenn ich deine Einstellung @media screen and (max-width:46.5rem) in z.B. @media screen and (max-width:880px) ändere funktioniert es wieder. Kann es sein, dass Android Browser kein rem verstehen?

                              1. Kann es sein, dass Android Browser kein rem verstehen?

                                Alter Schwede, das ist ja mal ne gute Idee :-)
                                Vielen Dank.
                                Und es scheint tatsächlich genau so zu sein.

                                rem geht nicht: http://spaceart.de/_xxxx_test-1.php
                                em geht: http://spaceart.de/_xxxx_test-2.php

                                Ich glaube, Du hast mir gerade den Tag gerettet :-)

                                1. rem geht nicht: http://spaceart.de/_xxxx_test-1.php
                                  em geht: http://spaceart.de/_xxxx_test-2.php

                                  Ich hab dein Problem gestern Abend schon gelesen war dann aber ehrlich gesagt zu faul um weiter nach zu schauen, was das sein kann, aber mich hat das die ganze Nacht beschäftigt, da ich dieses Script auch auf meiner Seite einsetzte (muss aber dazu sagen, ich war noch nie mit dem Android Browser online). Selber verwende ich noch keine rem Angaben.

                                  Allerdings, wenn ich hier http://caniuse.com/#search=rem nachschaue, sollte rem funktionier. Vielleicht kann Gunnar Bittersmann etwas mehr dazu schreiben.

                                  1. Allerdings, wenn ich hier http://caniuse.com/#search=rem nachschaue, sollte rem funktionier.

                                    Es könnte doch auch sein, dass der Stock Android Browser rem schon versteht.
                                    Nur dass er rem in den Media Queries nicht mag.
                                    Ich habe ja rem überall im Einsatz.
                                    Nur in den Midia Queries habe ich das jetzt wieder auf em geändert.

                              2. @@Martin_Online:

                                nuqneH

                                Ich hab mir das etwas genauer angesehen, wenn ich deine Einstellung @media screen and (max-width:46.5rem) in z.B. @media screen and (max-width:880px) ändere funktioniert es wieder.

                                Pfui Pixel.

                                @media screen and (max-width:46.5em)

                                Da sich Media-Queries auf die Basis-Schriftgröße beziehen, sollte em dasselbe Resultat liefern wie rem …

                                Kann es sein, dass Android Browser kein rem verstehen?

                                … außer in Browsern, die rem im MQs nicht verstehen – dort ein besseres. ;-)

                                Qapla'

                                --
                                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                1. Hallo

                                  Kann es sein, dass Android Browser kein rem verstehen?

                                  … außer in Browsern, die rem im MQs nicht verstehen – dort ein besseres. ;-)

                                  Von mir ein von Herzen kommendes „WAS?“.

                                  Tschö, Auge

                                  --
                                  Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                                  Terry Pratchett, "Wachen! Wachen!"
                                  ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                                  Veranstaltungsdatenbank Vdb 0.3
                        2. Hallo

                          Ohne es jetzt genau zu wissen, aber ich denke das Script greift auf HTML Elemente zurück die erst nach einem kompletten Laden der Seite zur Verfügung stehen, daher muss es unten stehen.

                          Wenn ich französisch könnte, würde ich nun „Ouh konträre“ sagen (mit gaaaaanz kurzem „e“). Mal ganz davon ab, dass das Element html schon existieren muss, wenn die Ressource hinter der in html befindlichen URL zum JS gefunden und geladen wird, ist das auch nicht der Grund, das JS am Ende des Dokuments einzubinden. Um sicherzustellen, dass das Dokument mit allen seinen Elementen existiert, benutzt man eines der Events onLoad oder DomReady. Damit ist Skriptseitig sichergestellt, dass Das Dokument fertig geladen ist.

                          Tschö, Auge

                          --
                          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                          Terry Pratchett, "Wachen! Wachen!"
                          ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                          Veranstaltungsdatenbank Vdb 0.3
                          1. Wenn ich Dich kürzlich richtig verstanden habe, hattest Du mich ja auf einen "Fehler" in dem JavaScript hingewiesen.
                            Und zwar auf die beiden Leerzeichen vor und hinter dem "js" in der folgenden Code-Zeile:
                            ... = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
                            Hatte ich Dich da richtig verstanden?

                            1. Hallo

                              Wenn ich Dich kürzlich richtig verstanden habe, hattest Du mich ja auf einen "Fehler" in dem JavaScript hingewiesen.
                              Und zwar auf die beiden Leerzeichen vor und hinter dem "js" …
                              Hatte ich Dich da richtig verstanden?

                              Ja

                              Tschö, Auge

                              --
                              Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                              Terry Pratchett, "Wachen! Wachen!"
                              ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                              Veranstaltungsdatenbank Vdb 0.3
                              1. Ja

                                Ich habe diese beiden Leerzeichen nun mal entfernt.
                                Und dann habe ich das Script oben vor dem </head>-Tag von extern eingebunden.
                                Hier die dazugehörige Datei:
                                http://spaceart.de/_xxxx_versandkosten-4.php
                                Leider funktioniert das Aufklappen dann nicht.

                                1. Hallo

                                  Ich habe diese beiden Leerzeichen nun mal entfernt.
                                  Und dann habe ich das Script oben vor dem </head>-Tag von extern eingebunden.
                                  Hier die dazugehörige Datei:
                                  http://spaceart.de/_xxxx_versandkosten-4.php

                                  JS aus: <html class="no-js" …>, JS an: <html class="js" …>. So, wie es sein soll.

                                  Leider funktioniert das Aufklappen dann nicht.

                                  Das liegt aber an etwas anderem. Nicht an der Stelle, an der die JS-Datei eingebunden wird, nicht daran, dass die Einbindung selbst scheitert. Da kann ich dir allerdings nicht mehr weiterhelfen (siehe: meine dortige erste Zeile).
                                  Tschö, Auge

                                  --
                                  Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                                  Terry Pratchett, "Wachen! Wachen!"
                                  ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                                  Veranstaltungsdatenbank Vdb 0.3
                                2. Und dann habe ich das Script oben vor dem </head>-Tag von extern eingebunden.
                                  Hier die dazugehörige Datei:
                                  http://spaceart.de/_xxxx_versandkosten-4.php
                                  Leider funktioniert das Aufklappen dann nicht.

                                  Ich hab das jetzt bei mir getestet, egal wo ich die Datei einbinde, funktioniert es. Kannst du mal deine Datei so einbinden

                                  <script src="navigation-2.js"></script>

                                  Kann sein, dass es an dem / liegt!

                                  1. Kannst du mal deine Datei so einbinden
                                    <script src="navigation-2.js"></script>
                                    Kann sein, dass es an dem / liegt!

                                    Ich habe das jetzt mal genau so gemacht.
                                    Und ich habe auch mal meinen sonstigen CSS-Code entfernt, so dass nur noch Dein CSS-Code direkt in der Datei zur Anwendung kommt.
                                    Hier wieder der Link: http://spaceart.de/_xxxx_versandkosten-4.php

                                    Es funktioniert nicht.
                                    Tut sich denn bei Dir was, wenn Du auf den Button klickst?

                                    Soll ich der Übersicht halber nochmal eine bereinigte Test-Datei hochladen, in der sich NUR eine einfache Navi befindet? Also ich meine, damit man es etwas leichter hat mit der Testerei?

                                    1. Ich habe das jetzt mal genau so gemacht.
                                      Und ich habe auch mal meinen sonstigen CSS-Code entfernt, so dass nur noch Dein CSS-Code direkt in der Datei zur Anwendung kommt.
                                      Hier wieder der Link: http://spaceart.de/_xxxx_versandkosten-4.php

                                      Es funktioniert nicht.
                                      Tut sich denn bei Dir was, wenn Du auf den Button klickst?

                                      Nein, bei mir tut sich auch nichts wenn ich auf den Button klicke. Hab das bei mir nun auch getestet und ich kann das gleiche verhalten feststelle, wenn ich die JS Datei im Kopf Bereich einbinde. Da mir leider die JS Kenntnisse fehlen warum das so ist, kann ich dazu leider nichts sagen.

                                      Wäre aber dennoch interesant zu wissen, warum die Datei im Fuß eingebunden werden muss bzw. was umgestellt werden muss, dass es auch Funktioniert, wenn man die Datei im Kopf einbindet.

                                      1. Nein, bei mir tut sich auch nichts wenn ich auf den Button klicke. Hab das bei mir nun auch getestet und ich kann das gleiche verhalten feststelle, wenn ich die JS Datei im Kopf Bereich einbinde.

                                        Das verstehe ich jetzt nicht.
                                        Hattest Du nicht gerade geschrieben, dass Du es bei Dir getestet hattest und es immer funktioniert, egal, wo Du die Datei einbindest? Ich meine das hier:
                                        https://forum.selfhtml.org/?t=217681&m=1496201

                                        1. Das verstehe ich jetzt nicht.
                                          Hattest Du nicht gerade geschrieben, dass Du es bei Dir getestet hattest und es immer funktioniert, egal, wo Du die Datei einbindest? Ich meine das hier:
                                          https://forum.selfhtml.org/?t=217681&m=1496201

                                          Dachte ich auch erst, aber hier hat mich mein Browser verarscht, die Datei war wohl noch im Cash gespeichert.

                                        2. Wenn du deine JS Datei aufmachst, GANZ an den Anfang folgendes schreibst

                                            
                                              window.onload = function () {  
                                          
                                          

                                          und GANZ am Ende, wirklich GANZ am ende

                                          }

                                          geht es. Mit dieser Zeile Code sagst du, dass das JS erst ausgeführt werden darf, wenn die komplette Seite geladen ist.

                                          Teste es mal bitte. Bei mir gehts.

                                          1. Wenn du deine JS Datei aufmachst, GANZ an den Anfang folgendes schreibst
                                            ...

                                            Ja SUPER. jetzt geht es bei mir auch mit oben eingebundenem Script auf allen Plattformen.
                                            Da freue ich mich aber wirklich sehr.
                                            Ich danke Dir auch nochmal ganz dolle für die nette Hilfe und das Script!

                                            Der Gunnar hatte ja neulich noch das hier geschrieben:
                                            "Im Stylesheet braucht man '.no-js' nicht. Man gibt einfach die Regeln für ohne JavaScript an und per '.js' zusätzlich die Regeln für wenn JavaScript aktiviert ist (progressive enhancement)."

                                            Meinst Du, ich soll mich darum auch nochmal kümmern?
                                            Kann bei mir ja wieder ne Weile dauern, bis ich das hinbekomme :-)
                                            Oder soll ich darauf einfach verzichten?
                                            Machen würd ichs ja schon gerne (Bin irgendwie so veranlagt, fürchte ich).
                                            Aber ich will Deine (Eure) Geduld mit mir hier natürlich auch nicht überreizen.

                                            1. Meinst Du, ich soll mich darum auch nochmal kümmern?
                                              Kann bei mir ja wieder ne Weile dauern, bis ich das hinbekomme :-)
                                              Oder soll ich darauf einfach verzichten?

                                              Ich an deiner Stelle würde erstmal die wichtigen Sachen an der Seite erledigen, wie ddas weitere anpassen des Designs (bei Handy quer, Logo z.B. Links, Suche rechts) oder auch die Titel Bilder bei kleinen Auflösungen über die ganze Breite gehen lassen usw.

                                              Deine Navigation funktioniert, ob da jetzt no-js steht und dieses über JS geregelt wird, ist mir ehrlichgesagt persönlich scheiß egal.

                                              Schau mal wie lange du jetzt an diesem kleinen Stück Code gearbeitet hast, warum? Hast du jetzt irgendwelche Vorteile? Ich sehe darin keinen Sinn / Vorteil, ob ein JS im Kopf oder Fuß eingebunden wird, ist doch scheiß egal, vor allem bei so einem kleinen Script. Deine Kunden werden zu 99,9% deinen Code nicht anschauen.

                                              Solche Anpassungen kann man machen, wenn man viel Zeit hat und die Hauptpunkte abgearbeitet sind.

                                              1. @@Martin_Online:

                                                nuqneH

                                                Ich sehe darin keinen Sinn / Vorteil, ob ein JS im Kopf oder Fuß eingebunden wird […]
                                                Solche Anpassungen kann man machen, wenn man viel Zeit hat und die Hauptpunkte abgearbeitet sind.

                                                Die Performanz einer Webseite IST ein Hauptpunkt.

                                                Und es macht einen Unterschied, ob ein zu ladendes JavaScript den Seitenaufbau unterbricht oder nicht. Deshalb: ans Ende des body, wenn man nicht anderweitig (neue HTML5-Attribute) dafür sorgt, dass JavaScript asynchron geladen wird.

                                                Und besser Wissen aneignen und anwenden und es gleich richtig machen. Das spart erstens spätere Arbeit. Und zweitens heißt später oft nie.

                                                Qapla'

                                                --
                                                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                1. Die Performanz einer Webseite IST ein Hauptpunkt.

                                                  Da gebe ich dir recht, aber bei einem Script mit 10 Zeilen Code sollte es doch wirklich egal sein oder? Und ich sag es ja schon immer, JS unten einbinden. Warum oxo888oxo es oben haben will, hat er bis jetzt leider noch nicht gesagt.

                                                  1. @@Martin_Online:

                                                    nuqneH

                                                    Die Performanz einer Webseite IST ein Hauptpunkt.

                                                    Da gebe ich dir recht, aber bei einem Script mit 10 Zeilen Code sollte es doch wirklich egal sein oder?

                                                    Nein, im Mobilfunknetz mit großen Latenzzeiten ist es das nicht.

                                                    Qapla'

                                                    --
                                                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                  2. Warum oxo888oxo es oben haben will, hat er bis jetzt leider noch nicht gesagt.

                                                    Och das hat eigentlich fast nur kosmetische Gründe.
                                                    Ich finde es etwas übersichtlicher, wenn es oben ist.
                                                    Aber ich lass mich natürlich auch gerne vom Gegenteil überzeugen.

                                                    1. Och das hat eigentlich fast nur kosmetische Gründe.

                                                      So habe ich am Anfang auch gedacht, alles schön in den Kopf setzten, am besten noch kommentieren. Aber sind wir mal Ehrlich, wie viele User schauen in den Quelltext?

                                                      Du willst es professionell? Dann pack es nach unten, dann sehen die User, die wirklich in den Code schauen, uii der hat Ahnung von dem was er macht ;)

                                                      1. Du willst es professionell? Dann pack es nach unten, dann sehen die User, die wirklich in den Code schauen, uii der hat Ahnung von dem was er macht ;)

                                                        OK, einverstanden :-)
                                                        Brauche ich denn dann das hier überhaupt noch, oder kann ich das dann wieder herausnehmen?
                                                        "window.onload = function () { ... }" anwenden?
                                                        Das kann doch dann eigentlich wieder raus, wenn ich das richtig verstehe.

                                                        1. OK, einverstanden :-)

                                                          sehr gut :)

                                                          Brauche ich denn dann das hier überhaupt noch, oder kann ich das dann wieder herausnehmen?
                                                          "window.onload = function () { ... }" anwenden?

                                                          Du kannst dieses http://forum.de.selfhtml.org/?t=217681&m=1496213 wieder rückgängig machen. Aber es schadet auch nicht, wenn du es drin lässt.

                                                          1. Du kannst dieses http://forum.de.selfhtml.org/?t=217681&m=1496213 wieder rückgängig machen. Aber es schadet auch nicht, wenn du es drin lässt.

                                                            OK, ich habe es wieder herausgenommen.

                                                          2. Nun habe ich mal wieder etwas weiter gebaut.
                                                            Ich habe class="no-js" aus dem <html>-Tag entfernt und auch die von Gunnar vorgeschlagene Änderung im JavaScript vorgenommen (Entfernung von .replace(/\bno-js\b/g, '').
                                                            Und ich habe das Script nun natürlich auch unten von extern eingebunden.

                                                            Wenn ich das richtig sehe, funktioniert es auch.
                                                            Ich habe das auf dem PC und meinem Android Handy (Stock Android Browser) probiert.
                                                            Auf dem Android Handy auch mit deaktiviertem JavaScript.
                                                            Hier die aktuelle Datei: http://spaceart.de/_xxxx_versandkosten-10.php

                                                            Hättest Du evtl. Lust, bei Dir auch nochmal zu gucken, obs funktioniert?
                                                            Oder ob ich evtl. doch was übersehen habe bis hierhin.

                                                            1. Hättest Du evtl. Lust, bei Dir auch nochmal zu gucken, obs funktioniert?
                                                              Oder ob ich evtl. doch was übersehen habe bis hierhin.

                                                              Auf meinem Handy sowohl mit einem Google Chrome als auch mit dem mitgeliefertem Browser funktioniert es wunderbar!

                                                              Google Chrome Querformat

                                                              http://s7.directupload.net/images/140615/h9kj7i2p.jpg

                                                              Android Browser Hochformat

                                                              http://s14.directupload.net/images/140615/gwr6bb7a.jpg

                                                              1. OK, prima. Danke für den Test.

                                                                Du hattest in Deinem CSS Code ja erst die Angaben für die großen Viewports gemacht.
                                                                Und dann weiter unten per Media Queries die CSS-Angaben für die kleinen Viewports.

                                                                In CSS-Code für meine Website habe ich es ja umgekehrt gemacht.
                                                                Also das mobile-first Prinzip.
                                                                Nun muss ich mal gucken, ob ich sozusagen Deinen CSS-Code in meine CSS-Datei "umgekehrt" hineinbekomme.

                                                              2. Ui ui ui, das habe ich mir wohl mal wieder zu einfach vorgestellt :-)
                                                                Den Einbau Deines CSS-Codes (nicht mobile-first) in meinen CSS-Code (mobile-first) bekomme ich nicht hin, fürchte ich.

                                                                Ich dachte, ich nehme einfach den Teil für große Vieworts von Deinem Code und packe den in den Teil für kleine Viewports von meinem Code. Und umgekehrt auch für den anderen Teil Deines CSS-Codes.

                                                                Aber das klappt natürlich nicht.
                                                                Ergebnis hier:
                                                                http://spaceart.de/_xxxx_versandkosten-11.php

                                                              3. So, nun übernehme ich nochmal in Ruhe einen neuen Versuch, Deinen internen CSS-Code für das Klapp-Menü in meinen externen CSS-Code zu integrieren.
                                                                Das Problem ist für mich momentan dieses:
                                                                Dein CSS-Code ist ja so aufgebaut, dass zuerst der Teil für große Viewports kommt und später per Media Querie der Teil für kleine Viewports.
                                                                Bei mir ist es umgekehrt. Mein CSS-Code ist nach dem Mobile-First-Prinzip aufgebaut. Bei mir im CSS-Code kommt also erst der Teil für alle (also auch die kleinen) Viewports und wird dann später für die großen Viewports per Media Queris angepasst.

                                                                Damit ich das nun gescheit hinbekomme, hoffe ich nochmal auf Eure Hilfe.
                                                                Und damit ich das auch möglichst alles richtig verstehe, wollte ich mich jetzt Stück für Stück da durchhangeln.

                                                                Also ...

                                                                Diese folgenden Teile müssen doch bei mir an den Anfang des CSS-Codes, weil sie für alle Viewports zur Anwendung kommen sollen. Ist das richtig?

                                                                  
                                                                nav ul {  
                                                                  padding-left: 0;  
                                                                }  
                                                                
                                                                
                                                                  
                                                                nav li {  
                                                                  list-style: none;  
                                                                }  
                                                                
                                                                
                                                                1. Diese folgenden Teile müssen doch bei mir an den Anfang des CSS-Codes, weil sie für alle Viewports zur Anwendung kommen sollen. Ist das richtig?

                                                                  Ganz genau, denn eigentlich haben diese vier Zeilen Code nichts mit der Navigation an sich zu tun.

                                                                  Mit dieser Zeile sagst du, dass alle ul innerhalb von nav kein padding also Abstand bekommen sollen.

                                                                  nav ul {
                                                                    padding-left: 0;
                                                                  }

                                                                    
                                                                  Mit dieser Zeile Code sagst du, dass alle li innerhalb von nav keine Symbol bekommen sollen.  
                                                                    
                                                                  
                                                                  > ~~~css
                                                                    
                                                                  
                                                                  > nav li {  
                                                                  >   list-style: none;  
                                                                  > }  
                                                                  > 
                                                                  
                                                                  
                                                                  1. Mit dieser Zeile sagst du, ...

                                                                    OK klar soweit.

                                                                    Mit dem folgenden Teil wird doch dafür gesorgt, dass das <h3>-Element auf großen Viewports nicht angezeigt wird.
                                                                    Demnach müsste das bei meinem Mobile-First-CSS-Code doch in den ersten Media Queries-Bereich für die größen Viewports.

                                                                    Richtig soweit?

                                                                      
                                                                    .menu-klappen {  
                                                                      display: none;  
                                                                    }  
                                                                    
                                                                    
                                                                    1. Richtig soweit?

                                                                      .menu-klappen {
                                                                        display: none;
                                                                      }

                                                                        
                                                                      genau!
                                                                      
                                                                      1. Der folgende CSS-Code stellt doch den eigentlichen Button dar.
                                                                        Und weil der Button ja nur bei den kleinen Viewports gebraucht wird, muss der Code doch auch wieder an den Beginn meines Mobile-First-Css-Codes.

                                                                        Stimmt's?

                                                                          
                                                                          /* Button zum Anzeigen des Menüs */  
                                                                          .js .menu-klappen {  
                                                                            display: block;  
                                                                            cursor: pointer;  
                                                                            color: #fff;  
                                                                            background-color: #313131;  
                                                                            width: 2.5rem;  
                                                                            height: 2.5rem;  
                                                                            text-align: center;  
                                                                            line-height: 2.5rem;  
                                                                            font-weight: normal;  
                                                                          }  
                                                                        
                                                                        
                                                                        1. Der folgende CSS-Code stellt doch den eigentlichen Button dar.
                                                                          Und weil der Button ja nur bei den kleinen Viewports gebraucht wird, muss der Code doch auch wieder an den Beginn meines Mobile-First-Css-Codes.

                                                                          Stimmt's?

                                                                          /* Button zum Anzeigen des Menüs */
                                                                            .js .menu-klappen {
                                                                              display: block;
                                                                              cursor: pointer;
                                                                              color: #fff;
                                                                              background-color: #313131;
                                                                              width: 2.5rem;
                                                                              height: 2.5rem;
                                                                              text-align: center;
                                                                              line-height: 2.5rem;
                                                                              font-weight: normal;
                                                                            }

                                                                          
                                                                          >   
                                                                          >   
                                                                            
                                                                          Genau, diese Zeilen stellen den Button da. In deinem Fall muss dieser Code wie du schon richtig geschrieben hast, in deinen Mobile First Bereich.
                                                                          
                                                                          1. Genau, diese Zeilen stellen den Button da. In deinem Fall muss dieser Code wie du schon richtig geschrieben hast, in deinen Mobile First Bereich.

                                                                            OK, erledigt.

                                                                            Nun das hier:

                                                                              
                                                                              .js nav ul {  
                                                                                display: none;  
                                                                              }  
                                                                            
                                                                            

                                                                            Das verstehe ich so:
                                                                            Wenn durch das JS dem <html>-Tag die Klasse "js" hinzugefügt wurde (was ja bei eingeschaltetem JavaScript der Fall ist), kommt der CSS-Code zu Anwendung.
                                                                            Also, wenn JS aktiviert ist, soll die Navigations-Liste nicht angezeigt werden.

                                                                            Das wäre doch dann nur bei kleinen Vewports und eingeklappter Navigation der Fall.
                                                                            Also auch in meinen Mobile First Bereich damit.

                                                                            Oder?

                                                                            1. Das wäre doch dann nur bei kleinen Vewports und eingeklappter Navigation der Fall.
                                                                              Also auch in meinen Mobile First Bereich damit.

                                                                              Genau, auch dieser Teil muss in deinen Mobile First Bereich.

                                                                              1. Genau, auch dieser Teil muss in deinen Mobile First Bereich.

                                                                                Fein.

                                                                                Das folgende ist mir leider nicht ganz klar.
                                                                                Also, was damit erreicht wird.

                                                                                  
                                                                                  nav ul.klappen-on {  
                                                                                    display: block;  
                                                                                  }  
                                                                                
                                                                                
                                                                                1. Das folgende ist mir leider nicht ganz klar.
                                                                                  Also, was damit erreicht wird.

                                                                                  nav ul.klappen-on {
                                                                                      display: block;
                                                                                    }

                                                                                    
                                                                                  Damit sagst du, wenn die Navigation ausgeklappt wird, sprich im Handy Bereich, dass deine Navigationspunkte untereinander stehen. Also kommt es bei dir in dein Mobile First Bereich.
                                                                                  
                                                                                  1. Damit sagst du, wenn die Navigation ausgeklappt wird, sprich im Handy Bereich, dass deine Navigationspunkte untereinander stehen. Also kommt es bei dir in dein Mobile First Bereich.

                                                                                    OK, das mit dem "diplay: block;" ist mir klar.
                                                                                    Aber was ich bisher nicht verstanden habe, wie/wo die Klasse "klappen-on" "zustande" kommt.
                                                                                    Die wird doch vom JS geschrieben, oder?

                                                                                    1. Damit sagst du, wenn die Navigation ausgeklappt wird, sprich im Handy Bereich, dass deine Navigationspunkte untereinander stehen. Also kommt es bei dir in dein Mobile First Bereich.

                                                                                      OK, das mit dem "diplay: block;" ist mir klar.
                                                                                      Aber was ich bisher nicht verstanden habe, wie/wo die Klasse "klappen-on" "zustande" kommt.
                                                                                      Die wird doch vom JS geschrieben, oder?

                                                                                      Sie wird im CSS Code definiert und über JS gesteuert ja! Aber dein JS hat ja NICHTS mit Mobile First zu tun.

                                                                                      1. Aber dein JS hat ja NICHTS mit Mobile First zu tun.

                                                                                        OK alles klar.
                                                                                        Und da ich ja kein JS kann, befasse ich mich damit dann lieber nicht.

                                                                                        Weiter geht's ...
                                                                                        Zu dem hier:

                                                                                          
                                                                                        nav ul.klappen-on li, .no-js nav li {  
                                                                                          display: block;  
                                                                                        }  
                                                                                        
                                                                                        

                                                                                        Das ist ja das gleiche wie eben, nur dass es hier um die Listen-Elemente geht.
                                                                                        Richtig?
                                                                                        Die Klasse "no-js" hatte ich ja eh entfernt.
                                                                                        Somit müsste das hier doch auch in meinen Mobile-First-Bereich:

                                                                                          
                                                                                        nav ul.klappen-on li {  
                                                                                          display: block;  
                                                                                        }  
                                                                                        
                                                                                        
                                                                                        1. OK alles klar.
                                                                                          Und da ich ja kein JS kann, befasse ich mich damit dann lieber nicht.

                                                                                          Genau, da ich auch kein JS kann bzw. nur sehr wenig, kann ich auch nicht mehr darauf eingehen. Hab es ja vor ein paar Tagen schon geschrieben, das JS Script kommt nicht von mir.

                                                                                          Die Klasse "no-js" hatte ich ja eh entfernt.
                                                                                          Somit müsste das hier doch auch in meinen Mobile-First-Bereich:

                                                                                          nav ul.klappen-on li {
                                                                                            display: block;
                                                                                          }

                                                                                            
                                                                                          Richtig, da du die Class no-js nicht mehr hast, kannst du das so in den Mobile First Bereich übernehmen.  
                                                                                          
                                                                                          1. Richtig, da du die Class no-js nicht mehr hast, kannst du das so in den Mobile First Bereich übernehmen.

                                                                                            OK, erledigt.

                                                                                            Nun das hier:

                                                                                              
                                                                                              [data-icon]:before {  
                                                                                                content: attr(data-icon);  
                                                                                                speak: none;  
                                                                                                display: inline-block;  
                                                                                                font-size: 200%;  
                                                                                              }  
                                                                                            
                                                                                            

                                                                                            Stellt das auch einen Teil des Buttons dar?
                                                                                            Wenn ja, müsste das doch auch wieder in meinen Mobile First Bereich.

                                                                                            Und das hier:

                                                                                              
                                                                                              .screen-reader-text {  
                                                                                                position: absolute;  
                                                                                                top: -9999px;  
                                                                                                left: -9999px;  
                                                                                              }  
                                                                                            
                                                                                            

                                                                                            Ist doch dafür da, damit bei Screenreadern das Mort "Menü" vorgelesen werden kann.
                                                                                            Und auch das müsste dann doch wieder in meinen Mobile First Bereich.

                                                                                            Ist das beides korrekt?

                                                                                            1. @@oxo888oxo:

                                                                                              nuqneH

                                                                                              Und das hier:

                                                                                              .screen-reader-text {
                                                                                                  position: absolute;
                                                                                                  top: -9999px;
                                                                                                  left: -9999px;
                                                                                                }

                                                                                                
                                                                                              Autsch. Das sollte man [nicht tun](http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/).  
                                                                                                
                                                                                              Qapla'
                                                                                              
                                                                                              -- 
                                                                                              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                                                              
                                                                                            2. [data-icon]:before {
                                                                                                  content: attr(data-icon);
                                                                                                  speak: none;
                                                                                                  display: inline-block;
                                                                                                  font-size: 200%;
                                                                                                }

                                                                                              
                                                                                              > Stellt das auch einen Teil des Buttons dar?  
                                                                                                
                                                                                              Genau, dieser Abschnitt stellt den Button für dein Menü dar. Also muss es auch in den Mobile First Bereich.  
                                                                                                
                                                                                              
                                                                                              > ~~~css
                                                                                                
                                                                                              
                                                                                              >   .screen-reader-text {  
                                                                                              >     position: absolute;  
                                                                                              >     top: -9999px;  
                                                                                              >     left: -9999px;  
                                                                                              >   }  
                                                                                              > 
                                                                                              
                                                                                              

                                                                                              Ist doch dafür da, damit bei Screenreadern das Mort "Menü" vorgelesen werden kann.
                                                                                              Und auch das müsste dann doch wieder in meinen Mobile First Bereich.

                                                                                              Genau, dieser Bereich ist für Screenreader da. Muss also auch in den Mobile First Bereich. Gunnar Bittersmann hat dir dazu auch noch etwas verlinkt, wie man es „richtig“ machen sollte. Es gibt immer viele Wege die ans Ziel führen. In jedem guten Tutorial wird es genau so gemacht mit Negativ Werten. Also lass dich da nicht verunsichern und reite nicht darauf rum.

                                                                                              1. Genau, ...

                                                                                                OK prima.
                                                                                                Ich habe das nun mal genau so testweise umgesetzt.
                                                                                                Hier ein Link dorthin: http://spaceart.de/_xxxx_test_15.php
                                                                                                Wie man sehen kann, ist das Menü auch in den großen Viewports nun erstmal zugeklappt.
                                                                                                Das kommt ja mit Sicherheit durch meine "umgekehrte" Mobile First Reihenfolge.

                                                                                                Darum habe ich nun das hier in den Media Queries Bereich für die großen Viewports hinzugefügt:

                                                                                                  
                                                                                                  .js nav ul {  
                                                                                                    display: block;  
                                                                                                  }  
                                                                                                
                                                                                                

                                                                                                Um die Navigation in den großen Viewports einzublenden, da sie ja in meinem Code erstmal ausgeblendet wurde (wegen Mobile First).

                                                                                                Und dann habe ich noch das hier in den Media Queries Bereich für die großen Viewports hinzugefügt:

                                                                                                  
                                                                                                  .js .menu-klappen {  
                                                                                                    display: none;  
                                                                                                  }  
                                                                                                
                                                                                                

                                                                                                Um den Button für die großen Viewports auszublenden.

                                                                                                Ist das soweit denn erstmal alles korrekt?

                                                                                                Hier poste ich nochmal den kompletten Quelltext der Test-Seite:

                                                                                                  
                                                                                                <!doctype html>  
                                                                                                  
                                                                                                <html  
                                                                                                <head>  
                                                                                                  
                                                                                                <meta name="viewport" content="width=device-width, initial-scale=1">  
                                                                                                  
                                                                                                <style>  
                                                                                                /* Viewport: 0px - 740px */  
                                                                                                  
                                                                                                nav ul {  
                                                                                                  padding-left: 0;  
                                                                                                }  
                                                                                                  
                                                                                                nav li {  
                                                                                                  list-style: none;  
                                                                                                }  
                                                                                                  
                                                                                                /* Button zum Anzeigen des Menüs */  
                                                                                                .js .menu-klappen {  
                                                                                                  display: block;  
                                                                                                  cursor: pointer;  
                                                                                                  color: #fff;  
                                                                                                  background-color: #313131;  
                                                                                                  width: 2.5rem;  
                                                                                                  height: 2.5rem;  
                                                                                                  text-align: center;  
                                                                                                  line-height: 2.5rem;  
                                                                                                  font-weight: normal;  
                                                                                                }  
                                                                                                  
                                                                                                .js nav ul {  
                                                                                                  display: none;  
                                                                                                }  
                                                                                                  
                                                                                                nav ul.klappen-on {  
                                                                                                  display: block;  
                                                                                                }  
                                                                                                  
                                                                                                nav ul.klappen-on li {  
                                                                                                  display: block;  
                                                                                                }  
                                                                                                  
                                                                                                [data-icon]:before {  
                                                                                                  content: attr(data-icon);  
                                                                                                  speak: none;  
                                                                                                  display: inline-block;  
                                                                                                  font-size: 200%;  
                                                                                                }  
                                                                                                  
                                                                                                .screen-reader-text {  
                                                                                                  position: absolute;  
                                                                                                  top: -9999px;  
                                                                                                  left: -9999px;  
                                                                                                }  
                                                                                                  
                                                                                                  
                                                                                                /* Viewport: 740px - 960px */  
                                                                                                @media only screen and (min-width: 46.5em) {  
                                                                                                  
                                                                                                  .menu-klappen {  
                                                                                                    display: none;  
                                                                                                  }  
                                                                                                  
                                                                                                  .js nav ul {  
                                                                                                    display: block;  
                                                                                                  }  
                                                                                                  
                                                                                                  .js .menu-klappen {  
                                                                                                    display: none;  
                                                                                                  }  
                                                                                                  
                                                                                                }  
                                                                                                  
                                                                                                  
                                                                                                /* Viewport: ab 960px - unendlich */  
                                                                                                @media only screen and (min-width: 60.25em) {  
                                                                                                }  
                                                                                                  
                                                                                                  
                                                                                                /* Angaben für den Druck */  
                                                                                                @media print {  
                                                                                                }  
                                                                                                </style>  
                                                                                                  
                                                                                                </head>  
                                                                                                  
                                                                                                <body>  
                                                                                                <nav id="navigation">  
                                                                                                  <h3 class="menu-klappen">  
                                                                                                    <span data-icon="&#8801;" aria-hidden="true"></span>  
                                                                                                    <span class="screen-reader-text">Menü</span>  
                                                                                                  </h3>  
                                                                                                  <ul>  
                                                                                                    <li><a href="#">Kategorie 1</a></li>  
                                                                                                    <li><a href="#">Kategorie 2</a></li>  
                                                                                                    <li><a href="#">Kategorie 3</a></li>  
                                                                                                    <li><a href="#">Kategorie 4</a></li>  
                                                                                                    <li><a href="#">Kategorie 5</a></li>  
                                                                                                  </ul>  
                                                                                                </nav>  
                                                                                                  
                                                                                                <script src="/navigation-15.js"></script>  
                                                                                                  
                                                                                                </body>  
                                                                                                  
                                                                                                </html>  
                                                                                                
                                                                                                
                                                                                              2. @@Martin_Online:

                                                                                                nuqneH

                                                                                                Genau, dieser Bereich ist für Screenreader da. Muss also auch in den Mobile First Bereich. Gunnar Bittersmann hat dir dazu auch noch etwas verlinkt, wie man es „richtig“ machen sollte. Es gibt immer viele Wege die ans Ziel führen.

                                                                                                Was ist das Ziel, wenn nicht eine bestens benutzbare Website? Bestens benutzbar schließt möglichst performant ein. Der 9999px-Hack steht dem Ziel entgegen.

                                                                                                In jedem guten Tutorial wird es genau so gemacht mit Negativ Werten.

                                                                                                Millionen von Fliegen und die unsinnigsten Begründungen für irgendwas

                                                                                                Qapla'

                                                                                                --
                                                                                                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                                                              3. @@Martin_Online:

                                                                                                nuqneH

                                                                                                In jedem guten Tutorial wird es genau so gemacht mit Negativ Werten.

                                                                                                Das macht einen guten Artikel (wie diesen) nicht unbedingt schlecht. Aber es ist ein Makel, schlechte Praxis weiterzuverbreiten.

                                                                                                Qapla'

                                                                                                --
                                                                                                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                        2. Hallo,

                                                          Brauche ich denn dann das hier überhaupt noch, oder kann ich das dann wieder herausnehmen?
                                                          "window.onload = function () { ... }" anwenden?

                                                          Ob du das Ei nach dem Aufschlagen verquirlen musst, kommt darauf an, ob du ein Spiegelei oder ein Omelett machen willst.

                                                          Bitte verstehe einmal, was obige Anweisung tut. Die Frage solltest du dir durch die Lektüre von

                                                          http://molily.de/js/einbindung.html
                                                          http://molily.de/js/event-handling-grundlagen.html
                                                          http://molily.de/js/event-handling-onload.html

                                                          selbst erklären können.

                                                          Kurz: Das kommt auf ganz deine Scripte an. Wie sehen sie aus und was tun sie?

                                                          Wenn die Scripte auf das vollständige Laden der Website inklusive Bilder etc. warten müssen, dann musst du einen Event-Handler für das load-Ereignis registrieren. Das macht obiger Code.

                                                          Wenn die Scripte auf das DOM zugreifen, das vor den Scripten steht, musst du nichts weiter tun, denn das können sie bereits.

                                                          Wenn die Scripte nicht direkt auf das DOM zugreifen, sondern nur Funktionen oder fenster- und dokumentweite Event-Handler registrieren, dann musst du ebenfalls nichts tun.

                                                          Mathias

                                                2. Und es macht einen Unterschied, ob ein zu ladendes JavaScript den Seitenaufbau unterbricht oder nicht. Deshalb: ans Ende des body, wenn man nicht anderweitig (neue HTML5-Attribute) dafür sorgt, dass JavaScript asynchron geladen wird.

                                                  Erfüllt das hier nicht quasi den selben Zweck?
                                                  https://forum.selfhtml.org/?t=217681&m=1496213

                                                  Obwohl ... da ist ja die Rede von Ausführen des JS und nicht vom Laden des JS.
                                                  Ist das denn nicht eigentlich das gleiche?

                                                  Sollte ich denn das JS doch am Ende vor </body> einbinden UND das "window.onload = function () { ... }" anwenden?

                                                  Und zweitens heißt später oft nie.

                                                  Ja da muss ich gestehen, dass mir das selbst auch schon mehrfach so ergangen ist.
                                                  Außerdem macht es mir auch Spaß beim Neuerstellen wieder was zu lernen hier.
                                                  Als ich mich das letzte mal intensiver mit diesen Dingen beschäftigt hatte, fing man gerade an, sich vom alten Tabellen-Layout zu trennen. Ist ja schon ein paar Tage her :-)

                                          2. Hallo,

                                            window.onload = function () {

                                              
                                            
                                            > dieser Zeile Code sagst du, dass das JS erst ausgeführt werden darf, wenn die komplette Seite geladen ist.  
                                              
                                            Das sollte man möglichst vermeiden, es sei denn, das JavaScript erfordert tatsächlich, dass sie Seite mit allen Ressourcen geladen wurde. Das ist in der Regel nicht der Fall.  
                                              
                                            Scripte, die am Ende der Seite per <script> eingebunden werden, brauchen nicht auf den load- noch auf den DOMContentLoaded-Event zu warten, um auf das DOM zuzugreifen. Sie haben bereits Zugriff auf das volle DOM, das garantiert die Funktionsweise des HTML-Parsers.  
                                              
                                            Wenn ein Script vor den Elementen steht, auf die es zugreifen will, dann wäre DOMDocumentLoaded der Event der Wahl.  
                                              
                                            Nur wenn auf alle Scripts, Stylesheets, Grafiken, Icons, Fonts usw. gewartet werden soll, dann muss auf das load-Ereignis gewartet werden. So unspezifisch sind die Anforderungen eines Scripts aber selten.  
                                              
                                            Siehe auch <http://molily.de/js/event-handling-onload.html>  
                                              
                                            Mathias
                                            
                                            1. Das sollte man möglichst vermeiden, es sei denn, das JavaScript erfordert tatsächlich, dass sie Seite mit allen Ressourcen geladen wurde. Das ist in der Regel nicht der Fall.

                                              OK, dann nehme ich das wieder heraus.
                                              Vor Allem auch, weil ich das Script jetzt doch unten vor dem </body> einbiden werde.
                                              Dazu wurde mir ja hier mehrfach geraten.

            3. Hallo!

              Dort wird vorgeschlagen, dass Script von Extern im <head> der Seite einzubinden, weil:
              "... die Ladezeit verkürzt, da diese Datei zwischengespeichert werden kann.".

              Da höre ich ehrlich gesagt auch immer wieder verschiedene Meinungen. Die einen sagen oben die anderen sagen unten.

              Browser parsen den HTML-Code sequentiell wie er über die Leitung rauscht und führen dabei JavaScripte aus. Normal eingebundene JavaScripte blocken die Verarbeitung des HTML, teilweise auch das Herunterladen später eingebundener Ressourcen.

              JavaScript synchron im head zu laden und auszuführen ist in der Regel unnötig und negativ für die Performance. Die meisten Scripte brauchen Zugriff auf das DOM und müssen ohnehin auf DOMContentLoaded oder load warten. Es hat nur Nachteile, sie im head synchron (blockend) zu laden.

              JavaScript asynchron im head zu laden ist weniger problematisch, entweder indem per JavaScript ein script-Element eingefügt wird oder ein normales script-Element mit den Attributen defer oder async ausgestattet wird.

              Die älteste Grundregel ist »Put stylesheets at the top, scripts at the bottom«. Das gilt heute nicht mehr so absolut, ist aber in den meisten Fällen immer noch besser, als Scripte im head zu laden.

              Grüße
              Mathias

              1. Die älteste Grundregel ist »Put stylesheets at the top, scripts at the bottom«. Das gilt heute nicht mehr so absolut, ist aber in den meisten Fällen immer noch besser, als Scripte im head zu laden.

                Ah OK, wunderbar.
                Ich werde das also nun doch so machen.
                Also ich meine, das Script unten einzubinden.
                Vor </body> ist doch richtig, oder?
                Oder würde vor </html> noch mehr Sinn machen?

                1. @@oxo888oxo:

                  nuqneH

                  Vor </body> ist doch richtig, oder?
                  Oder würde vor </html> noch mehr Sinn machen?

                  Nein, das html-Element hat genau zwei Kindelemente: head und body, sonst nichts.

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. Hallo,

            Dort wird vorgeschlagen, dass Script von Extern im <head> der Seite einzubinden, weil:
            "... die Ladezeit verkürzt, da diese Datei zwischengespeichert werden kann.".

            Das Argument ist großer Quatsch.

            Das Zwischenspeichern (Caching) eines Scripts zwischen zwei Seitenaufrufen hat überhaupt nichts damit zu tun, wie das Script geladen wird. Das Caching funktioniert auf HTTP-Ebene, das muss im Webserver korrekt konfiguriert werden (z.B. lange Expires-Zeiten).

            Grüße
            Mathias

            1. Dort wird vorgeschlagen, dass Script von Extern im <head> der Seite einzubinden, weil:
              "... die Ladezeit verkürzt, da diese Datei zwischengespeichert werden kann.".

              Das Argument ist großer Quatsch.

              Alles klar. ich hatte mich darüber auch schon gewundert.
              Danke für Deine Aufklärung.

        3. Ich persönliche packe meinen JS Code entweder so wie du ans Ende der Seite, oder in eine externe eigene Datei und binde diese dann ebenfalls unten auf der Seite ein, hat den Vorteil, dass ich nicht auf allen Seiten meinen JS Code einfügen muss. Ist wohl Geschmackssache.

          Wenn ich die JS-Datei von extern folgendermaßen im <head>-Bereich der Seite einbinde, klappt es nicht: <script src="/navigation.js"></script>

          Wenn ich die JS-Datei von extern folgendermaßen unten vor dem </Body>-Tag Seite einbinde, klappt es: <script src="/navigation.js"></script>

          Woran kann das denn liegen?

    4. Hallo

      Ich schaffe es leider doch nicht.
      Hab mir jetzt echt ein paar tage ordentlich einen abgebrochen.

      Letztendlich bin ich daran gescheitert, die Angelegenheit auf meinen mobile-first-CSS Code umzubauen.
      Ich fürchte, dass das echt ne Nummer zu hoch für mich ist.
      Ich werde es dann wohl doch mal mit jQueri oder so probieren müssen.

      Oder vielleicht lasse ich das mit dem Klapp-Menü auch ganz.
      Ich denke, wenn auf Handys einfach die komplette Navi oben steht, geht es vielleicht auch.

      So wie hier nun:
      http://spaceart.de/

      Gruß
      Ingo

      1. Hallo

        Ich schaffe es leider doch nicht.
        Hab mir jetzt echt ein paar tage ordentlich einen abgebrochen.

        Aber du hattest doch vor ein paar Tagen eine Version online wo alles richtig funktioniert hat, was ist denn damit?

        1. Aber du hattest doch vor ein paar Tagen eine Version online wo alles richtig funktioniert hat, was ist denn damit?

          Ja, das war ja noch bevor ich versucht hatte, es in meinem mobile-first-CSS Code unterzubringen.
          Und das habe ich leider nicht hinbekommen.
          Darum habe ich da dann nach ein paar Tagen aufgegeben.

          1. Ja, das war ja noch bevor ich versucht hatte, es in meinem mobile-first-CSS Code unterzubringen.
            Und das habe ich leider nicht hinbekommen.
            Darum habe ich da dann nach ein paar Tagen aufgegeben.

            Kann ich aber ehrlich gesagt nicht ganz verstehen, du hattest zum Schluss doch einen Mobile First Code, den du Schritt für Schritt erstellt hast, da ging alles?

            Warum setzt du nicht einfach eine zweite CSS ein und bindest diese an der passenden Stelle ein? Ich sehe da jetzt wirklich kein Problem drin.

            1. Kann ich aber ehrlich gesagt nicht ganz verstehen, du hattest zum Schluss doch einen Mobile First Code, den du Schritt für Schritt erstellt hast, da ging alles?

              Ja richtig, ich hatte das ja extra Schritt für Schritt gemacht.
              Aber zum Schluss ging es dann eben doch nicht richtig.

              Ich habe heute mal einen ganz neuen Ansatz gemacht.
              Dieses mal mit jQuerie-Toggle:
              spaceart.de/test2.php

              Das funktioniert soweit auch erstmal gut.
              Aber auch da gibt es schon wieder ein Problem.
              Um das Problem nachzuvollziehen mach mal folgendes:
              * Offne spaceart.de/test2.php
              * Da sieht man die aufgeplatte Navi auf dem groen Viewport
              * Zieh das Browserfenster schmaler
              * Da sieht man dann die eingeklappte Navi und den Klappen-Link auf dem kleinen Viewport
              Soweit so guu!

              * Dann Klapp das Menü auf ... klappt auch gut.
              * Dann klapp das Menü wieder zu ... klappt auch.
              * Dann zieh das Browserfenster wieder groß
              * Nun bleibt die Navi leider zugekkappt
              Das ist das Problem!

              Jetzt könnte man fragen, wer macht denn solche Browser-Fenster-Zieh-Spielchen.
              Aber wenn man die Seite auf einem Tablet öffnet, wo zwischen Hoch- und Qerformat der Media Querie Breakpoint wechselt, hat man den Salat.

              Verstehst Du, was ich meine?
              Hast Du da eine Idee, wie man das lösen kann?

              Hier nochmal der komplette Code dazu:

                
              <!doctype html>  
                
              <html>  
                
                <head>  
                  <meta charset="utf-8">  
                  <meta name="viewport" content="width=device-width, initial-scale=1">  
                  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
                  <style>  
                    #panel {  
                      display: none;  
                    }  
                    .btn-slide {  
                      display: block;  
                    }  
                    @media only screen and (min-width: 46.5em) {  
                      #panel {  
                        display: block;  
                      }  
                      .btn-slide {  
                        display: none;  
                      }  
                    }  
                  </style>  
                </head>  
                
                <body>  
                
                <script>  
                  $(document).ready(function(){  
                    $(".btn-slide").click(function(){  
                      $("#panel").slideToggle("slow");  
                      $(this).toggleClass("active"); return false;  
                    });	  
                  });  
                </script>  
                
                <a href="#" class="btn-slide">Sliden</a>  
                
                <p id="panel">  
                  Kategorie 1<br>  
                  Kategorie 2<br>  
                  Kategorie 3<br>  
                  Kategorie 4<br>  
                  Kategorie 5<br>  
                  Kategorie 6<br>  
                </p>  
                
                </body>  
                
              </html>  
              
              
              1. Om nah hoo pez nyeetz, oxo888oxo!

                * Nun bleibt die Navi leider zugekkappt
                Das ist das Problem!

                Jetzt könnte man fragen, wer macht denn solche Browser-Fenster-Zieh-Spielchen.
                Aber wenn man die Seite auf einem Tablet öffnet, wo zwischen Hoch- und Qerformat der Media Querie Breakpoint wechselt, hat man den Salat.

                Hast Du da eine Idee, wie man das lösen kann?

                Dein JavaScript schreibt in den inline-style für das Element #panel ein display: none hinein. Das ist gegenüber deinem display: block in der CSS-Ressource (bzw. noch im style-Element) höher gewichtet.

                Wenn du das JavaScript nicht ändern kannst, kannst du als schnelle und schmutzige Lösung

                @media only screen and (min-width: 46.5em) {  
                #panel {  
                    display: block!important;  
                  }  
                .btn-slide {  
                    display: none;  
                  }  
                }
                

                verwenden.

                Siehe auch wiki Spezifität und in lustig #Weblinks

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Liter und Literaturpreis.

                1. Hallo Matthias

                  Wenn du das JavaScript nicht ändern kannst, kannst du als schnelle und schmutzige Lösung

                  @media only screen and (min-width: 46.5em) {

                  #panel {
                      display: block!important;
                    }
                  .btn-slide {
                      display: none;
                    }
                  }

                  
                  > verwenden.  
                    
                  Oh ja super.  
                  Das scheint ja wunderbar zu funktionieren.  
                  Du schreibst ja, es wäre im Grunde eine "schmutzige Lösung".  
                  Kann ich das denn trotzem anwenden, ohne dabei jetzt schlecht zu schlafen?  
                  Oder spricht was stark dagegen, es so zu machen?  
                    
                  Gruß  
                  Ingo
                  
                  1. Om nah hoo pez nyeetz, oxo888oxo!

                    Du schreibst ja, es wäre im Grunde eine "schmutzige Lösung".

                    Auf die Verwendung von !important sollte man nach Möglichkeit verzichten, bei dir würde es jedoch bedeuten, den JavaScript-Code anzupassen, der für das sliden zuständig ist. Das liegt offenbar außerhalb deiner Möglichkeiten.

                    Deshalb:

                    Kann ich das denn trotzem anwenden, ohne dabei jetzt schlecht zu schlafen?

                    Ja.

                    Oder spricht was stark dagegen, es so zu machen?

                    Nein.

                    Matthias

                    --
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Messer und Messergebnis.

    5. Hallo nochmal

      Ich bekomme es l´leider echt nicht hin.
      Ist wohl doch eine Nummer zu hoch für mich das mit dem Klappmenü.

      Hab nun ein paar Tage herumgebastelt und vieles versucht.
      Letztendlich bin ich daran gescheitert, dass ich es nicht auf mein mobile-first-CSS "umgebaut" bekomme.

      Naja, ist vielleicht auch nicht so schlimm.
      Nun auf Handys einfach die kompltte Navi oben zu sehen:
      http://spaceart.de/
      Damit kann man ja auch leben, glaube ich.

      Bitte etschuldigt mein Rumgeheule hier :)

      Gruß
      Ingo

    6. Mir fällt da gerade was ein.
      Du hattest doch mal erwähnt, dass Du Deine Lösung bei Dir auf Deiner WEbseite so auch im Einsatz hast.
      Könntest Du mir da mal eine URL senden?
      Ich würde mir das gerne mal ansehen.

  2. Hi,

    Es geht um die Navifation meiner Webseite auf mobilen Geräten.

    Ja, und zwar schon zum x-ten Mal jetzt – kannst du mit solchen Themen nicht bitte mal in einem Thread bleiben, anstatt ständig neue aufzumachen?

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. kannst du mit solchen Themen nicht bitte mal in einem Thread bleiben, anstatt ständig neue aufzumachen?

      Ja OK. Bite entschuldigt.

    2. Ja, und zwar schon zum x-ten Mal jetzt

      Jo, ich dachte, das es so besser ist, wenn man als Leser nicht riesig lange Thraeds durchlesen muss, um zu verstehen, worum es geht.
      Aber egal, ich gebe jetzt eh auf.
      Ich bekomme es nicht nin mit dem Menü.
      Alles hat immer irgendwelche störenden Neben-Effekte.

      Vielleicht finde ich ja jemanden, der mir sowas gegen Bezahlung erstellt.

      1. Ich bekomme es nicht nin mit dem Menü.
        Alles hat immer irgendwelche störenden Neben-Effekte.

        Was klappt denn jetzt nicht? Du bist schon so weit gekommen, willst du wirklich kurz vor Ende aufgeben?

        1. Was klappt denn jetzt nicht? Du bist schon so weit gekommen, willst du wirklich kurz vor Ende aufgeben?

          Also diese ganzen englischsprachigen tollen Beispiele für die diversen tollen Responsive Menüs bekomme ich nicht eingebaut. Das liegt letztendlich daran, dass ich davon doch nicht genug verstehe.
          Ist aber auch nicht so schlimm, weil mir die eigentlich oft eh zu komplex sind.

          Am liebsten würde ich es einfach so regeln:
          Einen "Container" (bei mir <nav>) per Klick ein- und ausblendbar machen.
          Wenn ich das nur rein per CSS lösen möchte, habe ich doch immer das Problem, dass das nur mit Hover geht, aber nicht per Mausklick bzw. Finger-Tab.
          Wenn ich dieses Ein- und Ausblenden per Mausklick realisieren möchte, muss ich ja Javascript anwenden.
          Kann ich aber inzwischen durchaus mit leben :-)

          Da ich Javascript aber nur für diese eine Sache brauche, würde ich das ungern mit so einem kompletten FGramework machen, sondern lieber mit einem kleinen feinen sauberen Script, dessen Aufgabe eben nur meine Mobile-Navi ist.

          Und es soll natürlich auch so sein, dass bei deaktivierem Javascript die Navi ganz normal eingeblendet ist.

          Bei meiner Lösung mit dem kleinen Script, welche ich weiter oben gepostet hatte, war z.B, das Problem:
          * Ich öffne die Seite auf einen Tablet mit einem schmalen hochanten Viewport.
          * Die Navi ist ausgeblendet und der Link ist zu sehen.
          * Dann klick ich den Link und die Navi öffnet sich.
          * Dann drehe ich das Tablet in die Waagerechte und ein anderer Viewport-Bereich kommt durch die Media Queries zum Einsatz.
          * Und schwupop-di-wupp ist die Navi wieder weg und ich muss erst einen Reload machen, um sie wieder zu sehen.

          Und weiter solcher Nebeneffekte sind aufgetreten.
          Da ich das heute wirklich den ganzen Tag versucht habe, bin ich nun bereit aufzugeben.

        2. Ich habe mir nochmal Gedanken gemacht zum Fall, dass kein Javascript aktiviert ist.
          Wäre dann nicht folgndes vorgehen gut?

          * Per Media Queries ist für schmale Viewports die Navi erstmal eingeblendet und der Navi-Link ausgeblendet.

          * Ein Javascript kommt nun zum Einsatz und blendet die Navi aus und den Link ein. (Das würde dann ja nur erfolgen, wenn beim User Javascript aktiviert ist, weil das Script seinen Job ja nur machen kann, wenn JS aktiviert ist).

          * Der Link bietet nun an, die Navi einzublenden. Und wenn die Navi eingeblendet ist, bietet der Link automatisch das Ausblenden an.

          Ist das denn soweit erstmal gescheit überlegt?
          Oder mache ich da schon wieder einen Denkfehler?

          1. Ich habe mir nochmal Gedanken gemacht zum Fall, dass kein Javascript aktiviert ist.
            Wäre dann nicht folgndes vorgehen gut?

            Wie man dir im Forum schon öfters geschrieben hat, wenn ein User warum auch immer JavaScript deaktiviert hat, dann hat er dieses aus einem ganz bestimmten Grund getan  und weiß in der Regel auch dass er dadurch diverse Nachteile auf einer Seite unter Umständen hat.

            Ich hab dir gestern meine Lösung gepostet, diese funktioniert mit und ohne JavaScript. Wenn kein JavaScript aktiv ist, dann ist die Navigation eingeblendet wenn JavaScript aktiv ist, klappt sie schön auf und zu. Eigentlich genau das, was du benötigst.

            1. Wie man dir im Forum schon öfters geschrieben hat, wenn ein User warum auch immer JavaScript deaktiviert hat, dann hat er dieses aus einem ganz bestimmten Grund getan  und weiß in der Regel auch dass er dadurch diverse Nachteile auf einer Seite unter Umständen hat.

              Jo klar. das habe ich verstanden und natürlich auch zur Kenntnis genommen.
              Aber schöner ist es denoch, wenn der Fall abgefangen wird.
              Man weis ja nie.

              Ich hab dir gestern meine Lösung gepostet, diese funktioniert mit und ohne JavaScript. Wenn kein JavaScript aktiv ist, dann ist die Navigation eingeblendet wenn JavaScript aktiv ist, klappt sie schön auf und zu. Eigentlich genau das, was du benötigst.

              Darüber habe ich mich auch sehr gefreut.
              Aber ich habe es nicht hinbekommen, das bei mir zu implementieren.
              Nun habe ich es gerade eben nochmal versucht.
              Und was soll ich sagen, es klappt erstmal.
              http://spaceart.de/_xxxx_versandkosten-3.php
              Da war ich wohl gestern dann doch zu Müde und habe fehler eingebaut.
              Ich danke Dir sehr für Deine Löung.

              Ich werde heute später am Tag, mal versuchen dass an meine Seite anzupassen.

      2. Hallo

        Nur, damit du verstehst, warum das Verteilen auf mehrere Threads hier so ungern gesehen wird.

        Ja, und zwar schon zum x-ten Mal jetzt

        Jo, ich dachte, das es so besser ist, wenn man als Leser nicht riesig lange Thraeds durchlesen muss, um zu verstehen, worum es geht.

        Nun, der potentiell geneigte Antworter muss sich mit den x verteilten Threads nicht _einen_riesig_langen_ Thread durchlesen, das spart Zeit. Er kann es aber auch nicht, selbst wenn es notwendig ist, was Verständnis und bei nachgeholter Lektüre wiederum Zeit kostet.

        Im Archiv liegen deine Threads zusammenhanglos herum. Wer sie erst dort zu lesen bekommt, versteht nicht, worauf du dich beziehst, wenn du auf vorher geklärte Probleme ansprichst. Nun könntest du in den Eröffnungspostings jeweils auf die vorherigen Threads verweisen. Es nötigt aber ab, mehrere Threads zu lesen und die Einstiegs- bzw. Übnergangspunkte zwischen den einzelnen Problemen zu finden. Zudem müsstest du, wenn du konsequent bist, eine immer länger werdende Liste von Links pflegen.

        Übrigens, im Fall, dass ein Thread mittlerweile in's Archiv entschwunden ist, musst du ja zwangsläufig einen neuen Thread öffnen. Dann ist es sinnvoll, den alten Thread zu verlinken, um den Zusammenhang herzustellen. Das ist aber ein anderes Szenario.

        Findet sich demgegenüber alles in einem Thread und wird bei Notwendigkeit die Kategorie und/oder der Threadtitel sauber angepasst, bleibt einerseits alles beieinander und man kann sich einzelnen Aspekten herauspicken. Im Archiv wird's aufgrund der Threadlänge etwas langwieriger, aber der Vorteil, alles beieinander zu haben, bleibt.

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
        1. Nur, damit du verstehst, warum das Verteilen auf mehrere Threads hier so ungern gesehen wird.

          Ja OK. Ich werde das dann in Zukunft auch so handhaben hier.
          Ich bin ja heilfroh, dass Ihr mir hier helft.
          Da will ich natürlich niemandem auf den Wecker gehen.

  3. @@oxo888oxo:

    nuqneH

    <script language="JavaScript">

    Der Diebstahl antiker Kunstobjekte

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Gunnar Bittersmann:

      nuqneH

      <script language="JavaScript">

      Der Diebstahl antiker Kunstobjekte

      ist kein Kavaliersdelikt.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)