Deine Seite auf dem Handy von Martin_Online, 12.06.2014 12:57

Navigation auf mobilen Geräten ein- und ausklappen

oxo888oxo Homepage des Autors 09.06.2014 10:10

javascript

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

Beitrag melden

– Informationen zu den Bewertungsregeln

Navigation auf mobilen Geräten ein- und ausklappen
Martin_Online 09.06.2014 10:44

javascript
+1 Informationen zu den Bewertungsregeln
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');  
  
} )();;  
```
Beitrag melden

+1
Informationen zu den Bewertungsregeln
1. Navigation auf mobilen Geräten ein- und ausklappen
  
  Gunnar Bittersmann Homepage des Autors 10.06.2014 07:50
  
  javascript
  +1 Informationen zu den Bewertungsregeln
  @@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)
  Beitrag melden
  
  +1
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Navigation auf mobilen Geräten ein- und ausklappen
    
    oxo888oxo 10.06.2014 11:55
    
    javascript
    
    +1 Informationen zu den Bewertungsregeln
    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
    Beitrag melden
    
    +1
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
  2. Navigation auf mobilen Geräten ein- und ausklappen
    
    oxo888oxo 14.06.2014 07:12
    
    javascript
    
    – Informationen zu den Bewertungsregeln
    <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?
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
2. Navigation auf mobilen Geräten ein- und ausklappen
  
  oxo888oxo 10.06.2014 12:36
  
  javascript
  – Informationen zu den Bewertungsregeln
  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>
```
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Navigation auf mobilen Geräten ein- und ausklappen
    
    Gunnar Bittersmann Homepage des Autors 11.06.2014 13:07
    
    javascript
    
    +1 Informationen zu den Bewertungsregeln
    @@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)
    Beitrag melden
    
    +1
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Navigation auf mobilen Geräten ein- und ausklappen
      
      oxo888oxo 11.06.2014 16:54
      
      javascript
      
      – Informationen zu den Bewertungsregeln
      
      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.
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
3. Wohin mit dem Javascript im HTML Code?
  
  oxo888oxo 12.06.2014 12:08
  
  javascript
  – Informationen zu den Bewertungsregeln
  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?
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Wohin mit dem Javascript im HTML Code?
    
    Martin_Online 12.06.2014 12:43
    
    javascript
    
    +1 Informationen zu den Bewertungsregeln
    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.
    Beitrag melden
    
    +1
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Nachtrag
      
      Martin_Online 12.06.2014 12:48
      
      html
      
      +1 Informationen zu den Bewertungsregeln
      
      Du hast noch einen kleinen Fehler
      
      <h3 class="menu-klappen""> sollte so heißen <h3 class="menu-klappen">
      
      Beitrag melden
      
      +1
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
      1. Deine Seite auf dem Handy
        
        Martin_Online 12.06.2014 12:57
        
        html
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Deine Seite auf dem Handy
        
        oxo888oxo 12.06.2014 13:03
        
        html
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
      2. Nachtrag
        
        oxo888oxo 12.06.2014 13:00
        
        html
        
        – Informationen zu den Bewertungsregeln
        
        <h3 class="menu-klappen""> sollte so heißen <h3 class="menu-klappen">
        
        Oh ja. Danke. Ich habe das soeben korrigiert.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
    2. Wohin mit dem Javascript im HTML Code?
      
      oxo888oxo 12.06.2014 13:03
      
      javascript
      
      – Informationen zu den Bewertungsregeln
      
      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?
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
      1. JS Script im Kopf oder Fuß Bereich?
        
        Martin_Online 12.06.2014 13:09
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        Auge 12.06.2014 13:24
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        oxo888oxo 12.06.2014 13:50
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        Auge 12.06.2014 14:17
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        oxo888oxo 12.06.2014 14:31
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        <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
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        Auge 12.06.2014 16:38
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        oxo888oxo 12.06.2014 20:27
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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!
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Funktioniert doch noch nicht mit Script im head
        
        oxo888oxo 12.06.2014 20:41
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Funktioniert doch noch nicht mit Script im head
        
        Martin_Online 12.06.2014 22:24
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Funktioniert doch noch nicht mit Script im head
        
        oxo888oxo 12.06.2014 23:48
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Funktioniert doch noch nicht mit Script im head
        
        Martin_Online 13.06.2014 12:15
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Nachtrag: Android Browser
        
        Martin_Online 13.06.2014 12:23
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Nachtrag: Android Browser
        
        oxo888oxo 13.06.2014 12:41
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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 :-)
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Nachtrag: Android Browser
        
        Martin_Online 13.06.2014 12:48
        
        css
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Nachtrag: Android Browser
        
        oxo888oxo 13.06.2014 13:20
        
        css
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Nachtrag: Android Browser
        
        Gunnar Bittersmann Homepage des Autors 13.06.2014 18:40
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        @@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)
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Gunnar spricht in fremden Zungen
        
        Auge 16.06.2014 10:56
        
        menschelei
        
        – Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Funktioniert doch noch nicht mit Script im head
        
        Auge 13.06.2014 09:31
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Habe ich Hinweis auf Fehler im Script richtig verstanden?
        
        oxo888oxo 13.06.2014 12:19
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Habe ich Hinweis auf Fehler im Script richtig verstanden?
        
        Auge 13.06.2014 12:46
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Habe ich Hinweis auf Fehler im Script richtig verstanden?
        
        oxo888oxo 13.06.2014 13:26
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Habe ich Hinweis auf Fehler im Script richtig verstanden?
        
        Auge 13.06.2014 13:55
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Habe ich Hinweis auf Fehler im Script richtig verstanden?
        
        Martin_Online 13.06.2014 14:07
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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!
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Habe ich Hinweis auf Fehler im Script richtig verstanden?
        
        oxo888oxo 13.06.2014 15:38
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        An die JS Speziallisten
        
        Martin_Online 13.06.2014 15:45
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        An die JS Speziallisten
        
        oxo888oxo 13.06.2014 15:48
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        An die JS Speziallisten
        
        Martin_Online 13.06.2014 16:08
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        Martin_Online 13.06.2014 16:14
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        oxo888oxo 13.06.2014 17:19
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        Martin_Online 13.06.2014 17:30
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        Gunnar Bittersmann Homepage des Autors 13.06.2014 18:47
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        @@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)
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        Martin_Online 13.06.2014 18:52
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        Gunnar Bittersmann Homepage des Autors 13.06.2014 20:09
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        @@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)
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        oxo888oxo 13.06.2014 22:06
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        Martin_Online 13.06.2014 22:39
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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 ;)
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        oxo888oxo 14.06.2014 06:03
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        Martin_Online 14.06.2014 10:13
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        oxo888oxo 14.06.2014 12:10
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Aktuelle Version ohne <html class="no-js">
        
        oxo888oxo 15.06.2014 13:23
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Aktuelle Version ohne <html class="no-js">
        
        Martin_Online 15.06.2014 13:37
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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
        
        Android Browser Hochformat
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Aktuelle Version ohne <html class="no-js">
        
        oxo888oxo 15.06.2014 13:47
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Aktuelle Version ohne <html class="no-js">
        
        oxo888oxo 15.06.2014 14:58
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 16.06.2014 07:43
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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; }
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Martin_Online 16.06.2014 10:18
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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; > } >
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 16.06.2014 13:32
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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; }
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Martin_Online 16.06.2014 15:31
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        Richtig soweit?
        
        .menu-klappen {
          display: none;
        }
        
        genau!
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 16.06.2014 17:23
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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; }
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Martin_Online 16.06.2014 17:32
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 16.06.2014 18:02
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Martin_Online 16.06.2014 18:16
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 16.06.2014 19:32
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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; }
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Martin_Online 16.06.2014 20:03
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 16.06.2014 20:43
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Martin_Online 16.06.2014 20:58
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 16.06.2014 21:30
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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; }
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Martin_Online 16.06.2014 22:23
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 17.06.2014 07:07
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Gunnar Bittersmann Homepage des Autors 17.06.2014 10:05
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        @@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)
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Martin_Online 17.06.2014 12:13
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        [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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        oxo888oxo 17.06.2014 12:53
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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="≡" 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>
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Gunnar Bittersmann Homepage des Autors 18.06.2014 09:57
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        @@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)
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        CSS-Code für Mobile-First umbauen
        
        Gunnar Bittersmann Homepage des Autors 18.06.2014 11:56
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        @@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)
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        molily Homepage des Autors 14.06.2014 15:14
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Also JS doch lieber unten einbinden, ja?
        
        oxo888oxo 13.06.2014 22:15
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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 :-)
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        molily Homepage des Autors 14.06.2014 04:09
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Fehler gefunden
        
        oxo888oxo 14.06.2014 06:04
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        molily Homepage des Autors 14.06.2014 03:55
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        --
        Chaplin.js - JavaScript application architecture on top of Backbone.js
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        oxo888oxo 14.06.2014 09:58
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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?
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        JS Script im Kopf oder Fuß Bereich?
        
        Gunnar Bittersmann Homepage des Autors 14.06.2014 13:48
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        @@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)
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
      2. Wohin mit dem Javascript im HTML Code?
        
        molily Homepage des Autors 14.06.2014 03:57
        
        javascript
        
        +1 Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Wohin mit dem Javascript im HTML Code?
        
        oxo888oxo 14.06.2014 12:08
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
    3. Wohin mit dem Javascript im HTML Code?
      
      oxo888oxo 12.06.2014 15:53
      
      javascript
      
      – Informationen zu den Bewertungsregeln
      
      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?
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
4. Ich schaffe es einfach nicht ... schnieef :)
  
  oxo888oxo Homepage des Autors 24.06.2014 20:55
  
  javascript
  – Informationen zu den Bewertungsregeln
  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
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Ich schaffe es einfach nicht ... schnieef :)
    
    Martin_Online 24.06.2014 21:33
    
    javascript
    
    – Informationen zu den Bewertungsregeln
    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?
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Ich schaffe es einfach nicht ... schnieef :)
      
      oxo888oxo 24.06.2014 22:58
      
      javascript
      
      – Informationen zu den Bewertungsregeln
      
      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.
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
      1. Ich schaffe es einfach nicht ... schnieef :)
        
        Martin_Online 24.06.2014 23:09
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Ich schaffe es einfach nicht ... schnieef :)
        
        oxo888oxo 24.06.2014 23:24
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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>
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Ich schaffe es einfach nicht ... schnieef :)
        
        Matthias Apsel Homepage des Autors 25.06.2014 08:56
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Ich schaffe es einfach nicht ... schnieef :)
        
        oxo888oxo 25.06.2014 13:50
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Ich schaffe es einfach nicht ... schnieef :)
        
        Matthias Apsel Homepage des Autors 25.06.2014 13:55
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
5. Ich bekomme es nicht hin ... muss wohl echt aufgeben nun.
  
  oxo888oxo Homepage des Autors 24.06.2014 21:02
  
  javascript
  – Informationen zu den Bewertungsregeln
  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
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
6. Navigation auf mobilen Geräten ein- und ausklappen
  
  oxo888oxo 24.06.2014 23:59
  
  javascript
  – Informationen zu den Bewertungsregeln
  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.
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Bitte nicht ständig neue Threads zur gleichen Grundthematik
ChrisB 09.06.2014 16:14

zu diesem forum
+3 Informationen zu den Bewertungsregeln
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 :/
Beitrag melden

+3
Informationen zu den Bewertungsregeln
1. Bitte nicht ständig neue Threads zur gleichen Grundthematik
  
  oxo888oxo 09.06.2014 17:57
  
  zu diesem forum
  – Informationen zu den Bewertungsregeln
  kannst du mit solchen Themen nicht bitte mal in einem Thread bleiben, anstatt ständig neue aufzumachen?
  
  Ja OK. Bite entschuldigt.
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
2. Bitte nicht ständig neue Threads zur gleichen Grundthematik
  
  oxo888oxo 09.06.2014 23:51
  
  zu diesem forum
  – Informationen zu den Bewertungsregeln
  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.
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Bitte nicht ständig neue Threads zur gleichen Grundthematik
    
    Martin_Online 10.06.2014 00:04
    
    zu diesem forum
    
    +1 Informationen zu den Bewertungsregeln
    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?
    Beitrag melden
    
    +1
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Bitte nicht ständig neue Threads zur gleichen Grundthematik
      
      oxo888oxo 10.06.2014 01:04
      
      zu diesem forum
      
      – Informationen zu den Bewertungsregeln
      
      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.
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
    2. Bitte nicht ständig neue Threads zur gleichen Grundthematik
      
      oxo888oxo 10.06.2014 01:37
      
      zu diesem forum
      
      – Informationen zu den Bewertungsregeln
      
      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?
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
      1. Bitte nicht ständig neue Threads zur gleichen Grundthematik
        
        Martin_Online 10.06.2014 08:13
        
        zu diesem forum
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
        
        Bitte nicht ständig neue Threads zur gleichen Grundthematik
        
        oxo888oxo 10.06.2014 08:29
        
        zu diesem forum
        
        +1 Informationen zu den Bewertungsregeln
        
        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.
        
        Beitrag melden
        
        +1
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
  2. Bitte nicht ständig neue Threads, Begründung
    
    Auge 10.06.2014 14:34
    
    zu diesem forum
    
    +3 Informationen zu den Bewertungsregeln
    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
    Beitrag melden
    
    +3
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Bitte nicht ständig neue Threads, Begründung
      
      oxo888oxo 10.06.2014 22:49
      
      zu diesem forum
      
      – Informationen zu den Bewertungsregeln
      
      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.
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
Navigation auf mobilen Geräten ein- und ausklappen
Gunnar Bittersmann Homepage des Autors 10.06.2014 07:15

javascript
+1 Informationen zu den Bewertungsregeln
@@oxo888oxo:

nuqneH

<script language="JavaScript">

Der Diebstahl antiker Kunstobjekte

Qapla'

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

+1
Informationen zu den Bewertungsregeln
1. Navigation auf mobilen Geräten ein- und ausklappen
  
  Gunnar Bittersmann Homepage des Autors 10.06.2014 07:17
  
  javascript
  +1 Informationen zu den Bewertungsregeln
  @@Gunnar Bittersmann:
  
  nuqneH
  
  <script language="JavaScript">
  
  Der Diebstahl antiker Kunstobjekte
  
  ist kein Kavaliersdelikt.
  
  Qapla'
  
  --
  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  Beitrag melden
  
  +1
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

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