AllOnline: Auf und Zuklappen Komform

Hallo,

ich suche eine konforme Art um ein div ein und auszubelden.

Weiterhin sollen Leute die kein JS aktiviert haben den Text trotzdem sehen können.

Eine Idee wäre es, erst nach body onload via JS die betroffenen divs zu verstecken. Allerdings habe ich keinen Einfluss auf dem body-tag. (Interne Struktur erlaubt dies nicht, trennung vom Design und content.

Danke für die Hilfe!

  1. Habe noch was vergessen;

    es sollte zudem möglichsein über einen Link genau auf ein Div zuzeigen,
    also das alle anderen zusammen gerückt (unsichtbar) sind und nur der eine Ausgeklappt ist.

    Danke sehr

    1. Tachchen!

      es sollte zudem möglichsein über einen Link genau auf ein Div zuzeigen,
      also das alle anderen zusammen gerückt (unsichtbar) sind und nur der eine Ausgeklappt ist.

      Kann es sein, dass du schlicht ein (Achtung: Suchbegriff) "Accordion-Script"
      suchst? Die gibt es - wenn denn gewünscht - inzwischen fertig wie Sand am Meer.

      Gruß

      Die schwarze Piste

      1. Tachchen!

        es sollte zudem möglichsein über einen Link genau auf ein Div zuzeigen,
        also das alle anderen zusammen gerückt (unsichtbar) sind und nur der eine Ausgeklappt ist.

        Kann es sein, dass du schlicht ein (Achtung: Suchbegriff) "Accordion-Script"
        suchst? Die gibt es - wenn denn gewünscht - inzwischen fertig wie Sand am Meer.

        Gruß

        Die schwarze Piste

        Suchen kann ich auch, aber danke für den Suchbegriff!
        Aber leide ist nirgends oder nur sehr selten eis vorhanden was alles erfüllt was ich brauche!

        Brauchbar wenn jemand JS aktiv und nicht aktiv hat.
        Aufklappbar per Link (direkt link)
        verschieden viele Divs

        Bin für jede Hilfe dankbar!

        1. Aber leide ist nirgends oder nur sehr selten eis vorhanden was alles erfüllt was ich brauche!

          Wenn selten eins vorhanden ist, dass alles erfüllt was du brauchst sind doch welche vorhanen - wo ist das Problem?

          Brauchbar wenn jemand JS aktiv und nicht aktiv hat.

          Dann komms du nicht drumrum, den HTML-Code zu ändern - ohne Änderung dessen wirds "etwas" schwierig, wenns ohne JavaScript funktionieren soll.

          1. Aber leide ist nirgends oder nur sehr selten eis vorhanden was alles erfüllt was ich brauche!

            Wenn selten eins vorhanden ist, dass alles erfüllt was du brauchst sind doch welche vorhanen - wo ist das Problem?

            Ich habe keins gefunden!

            Brauchbar wenn jemand JS aktiv und nicht aktiv hat.
            Dann komms du nicht drumrum, den HTML-Code zu ändern - ohne Änderung dessen wirds "etwas" schwierig, wenns ohne JavaScript funktionieren soll.

            den html code kann ich ja verändern,
            nur ich komme nicht an den body tag selber und nicht in den header, sondern nur css und zwischen den bodytags!

            1. Aber leide ist nirgends oder nur sehr selten eis vorhanden was alles erfüllt was ich brauche!

              Wenn selten eins vorhanden ist, dass alles erfüllt was du brauchst sind doch welche vorhanen - wo ist das Problem?

              Ich habe keins gefunden!

              Warum schreibst du dann selten?

              Btw: anhand deiner Beschreibung lässt sich kein konkretes Anforderungsprofil ableiten - wenn du nicht sagst, was du genau haben willst, wird man dir nur schwer helfen können.

              1. anhand deiner Beschreibung lässt sich kein konkretes Anforderungsprofil ableiten - wenn du nicht sagst, was du genau haben willst, wird man dir nur schwer helfen können.

                Also ich Suche eine JS Funktion die mir 'div' unsichtbar macht wenn JS aktiv ist. Ist JS nicht aktiv bleibt alles Sichtbar. Weiterhin ist über den Div ein Text der als Link fungiert um eben diese 'div' Sichtbar zu machen.
                Darüberhinaus sollte es möglich sein einen Link zuerzeugen der es möglich macht wenn man von einer externen Seite kommt ein bestimmtes div sichbar zumachen.

                Als vorlage (ohne js funktion etc) besteht bisher folgende Seite:
                Beispielseite

                1. Also ich Suche eine JS Funktion die mir 'div' unsichtbar macht wenn JS aktiv ist. Ist JS nicht aktiv bleibt alles Sichtbar. Weiterhin ist über den Div ein Text der als Link fungiert um eben diese 'div' Sichtbar zu machen.
                  Darüberhinaus sollte es möglich sein einen Link zuerzeugen der es möglich macht wenn man von einer externen Seite kommt ein bestimmtes div sichbar zumachen.

                  Du suchst ein Accordion oder Tabs mit Ankernavigation.

                  In diesem Thread gibts mittlerweile genug hinweise, um das zu realiseren - und wie gesagt auch schon viele fertige Geschichten.

        2. Tachchen!

          Suchen kann ich auch, aber danke für den Suchbegriff!

          Bitte, gerne.

          Aber leide ist nirgends oder nur sehr selten eis vorhanden was alles erfüllt was ich brauche!

          Also meine Suche nach accordion menu ergibt in den ersten 5 Treffern
          zwei Scripts, die dir zusagen sollten (wenn ich dich richtig verstanden habe).

          Gruß

          Die schwarze Piste

  2. Hi,

    ich suche eine konforme Art um ein div ein und auszubelden.
    Weiterhin sollen Leute die kein JS aktiviert haben den Text trotzdem sehen können.

    guter Gedanke. :-)

    Eine Idee wäre es, erst nach body onload via JS die betroffenen divs zu verstecken.

    Ja, das ist die bevorzugte Methode.

    Allerdings habe ich keinen Einfluss auf dem body-tag.

    Nein, aber du kannst Javascripts einbinden?

    trennung vom Design und content.

    Eben, also warum sollte man dann den Eventhandler direkt im HTML notieren wollen? Viel sauberer ist es doch, das im Script selbst zu tun:

    window.onload = function()  
     { // Hier der Code für  
       // den onload-Handler  
     }
    

    So long,
     Martin

    --
    Warum können wir heute so sicher sagen, dass Gott keine Frau sein kann?
    Weil dann nach "Es werde Licht" der nächste Satz "Wie sieht denn das hier aus?!" gewesen wäre.
    1. @@Der Martin:

      nuqneH

      Eine Idee wäre es, erst nach body onload via JS die betroffenen divs zu verstecken.

      Ja, das ist die bevorzugte Methode.

      Nein, denn onload ist zu spät: Erst wird das Ding dargestellt, um kurz darauf zu verschwinden? Das Flackern ist unschön und irritierend.

      Die bevorzugte Methode ist, dem 'body'-Element (bzw. 'html'-Element) per JavaScript so früh wie möglich(!) eine Klasse zu verpassen und das entsprechende Element per Nachfahrenselektor gar nicht erst erscheinen zu lassen. [PERFORMANCE-BP2]

      Markup:

      <body>  
        <script type="text/javascript>document.body.className += " js";</script>  
        <div id="foo">unsichtbar, wenn JavaScript aktiviert</div>
      

      Stylesheet:

      .js #foo  
      {  
        display: none;  
      }
      

      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
      1. @@Der Martin:

        nuqneH

        Eine Idee wäre es, erst nach body onload via JS die betroffenen divs zu verstecken.

        Ja, das ist die bevorzugte Methode.

        Nein, denn onload ist zu spät: Erst wird das Ding dargestellt, um kurz darauf zu verschwinden? Das Flackern ist unschön und irritierend.

        Die bevorzugte Methode ist, dem 'body'-Element (bzw. 'html'-Element) per JavaScript so früh wie möglich(!) eine Klasse zu verpassen und das entsprechende Element per Nachfahrenselektor gar nicht erst erscheinen zu lassen. [PERFORMANCE-BP2]

        Markup:

        <body>

        <script type="text/javascript>document.body.className += " js";</script>
          <div id="foo">unsichtbar, wenn JavaScript aktiviert</div>

        
        >   
        > Stylesheet:  
        > ~~~css
        
        .js #foo  
        
        > {  
        >   display: none;  
        > }
        
        

        Qapla'

        Also ich fügen allen divs die ich unsichtbar machen will per js eine klasse hinzu?! Undzwar eine die ich in css mit display:none deklariert habe?

        Ich verstehe aber in dem fall nicht warum das body in die klasse soll?!

        Wenn ich jetzt mehrere Divs habe mit den ids foo1 - foo10 oder eben Namen,
        wie mache ich das dann?

        Sry, für die etwas dummen Fragen bin eher phpler als JavaScriptler.

        Danke für die Hilfe

        1. @@AllOnline:

          nuqneH

          Also ich fügen allen divs die ich unsichtbar machen will per js eine klasse hinzu?!

          Nein. Du gibst allen 'div', die du unsichtbar machen willst, im HTML eine Klasse.

          Ich verstehe aber in dem fall nicht warum das body in die klasse soll?!

          Damit du per JavaScript nur einem Element eine Klasse verpassen musst und nicht vielen. Den Nachfahrenselektor kennst du? [CSS2 §5.1, CSS2 §5.5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]

          Qapla'

          PS: Bitte keine Fullquotes!

          --
          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
          1. Du gibst allen 'div', die du unsichtbar machen willst, im HTML eine Klasse.

            und durch deinen JavaScript Code gebe ich der Klasse das Atribut hidden?!
            und wenn kein JavaScript vorhanden ist wird das eben nicht ausgeführt und demnach bleibt es sichtbar.
            Wenn die Klasse in CSS nicht vorhanden ist gibt es dann aber einen validierungsfehler?!

            1. @@AllOnline:

              nuqneH

              und durch deinen JavaScript Code gebe ich der Klasse das Atribut hidden?!

              Nein. Das einzige, was die Zeile JavaScript tut, ist dem 'body' eine Klasse "js" zu geben. Nicht mehr und nicht weniger.

              und wenn kein JavaScript vorhanden ist wird das eben nicht ausgeführt

              Ja. Dann hat 'body' nicht die Klasse "js" …

              und demnach bleibt es sichtbar.

              … und demnach grift der Selektor '.js #foo' nicht. Das 'div[@id="foo"]' bleibt sichtbar.

              Da du mehrere 'div' ausblenden möchtest, solltest du allen diesen eine Klasse "bar" verpassen (einen passenden Namen zu finden überlasse ich dir) und so ausblenden:

              .js .bar  
              {  
                display: none;  
              }
              

              Wenn die Klasse in CSS nicht vorhanden ist gibt es dann aber einen validierungsfehler?!

              Häh?? Wie bitte?

              Qapla'

              --
              Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
            2. Du gibst allen 'div', die du unsichtbar machen willst, im HTML eine Klasse.

              und durch deinen JavaScript Code gebe ich der Klasse das Atribut hidden?!

              Nein, das JavaScript gibt dem body-Element die Klasse "js"

              und wenn kein JavaScript vorhanden ist wird das eben nicht ausgeführt und demnach bleibt es sichtbar.

              Wenn JavaScript ein ist, sieht das DOM etwa so aus:

              <body class="js">  
                <div id="foo">foobar</div>  
              </body>
              

              Ohne JavaScript so:

              <body>  
                <div id="foo">foobar</div>  
              </body>
              

              Folgender Selektor trifft also nur auf die Version mit JavaScript ein.

              .js #foo { display: none; }

              Wenn die Klasse in CSS nicht vorhanden ist gibt es dann aber einen validierungsfehler?!

              Nein, der Selektor ist dennoch gültig - führt aber ins leere bzw. "greift nicht".

              Ich persönlich tendiere zu einer Klasse "js-on" im html-Element. Zum debuggen verwende ich folgende CSS-Zeilen:

                     body { border: 5px solid red; }  
              .js-on body { border: 5px solid green; }
              

              Damit ist beim Entwicklen sofort ersichtlich, ob JavaScript eingeschaltet ist oder nicht - und man verarscht sich nicht selbst, wenn man es immer wieder aus und einschaltet :)

  3. Hallo AllOnline,

    Scripte (natürlich in einem script-Block) dürfen auch im Bereich zwischen <body> und </body> stehen. Du kannst also problemlos das Div da platzieren, wo du es benötigst, und es direkt danach per Javascript ausblenden. Ebenso kannst du den Einblendeknopf per css unsichtbar machen und dann im Script einblenden.

    Gruß, Jürgen