Style via JS anpassen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Style via JS anpassen

    Hallo liebes Forum!

    Da hab ich endlich auch mal wieder ne Frage, und dann auch gleich eine die viele von euch bestimmt lachend beantworten können.

    Ich versuche, eine Art JavaScript-Menü zu bauen, sodass bei jedem Klick auf die "Hauptkategorie" eine Liste von Unterkategorien erscheinen soll. Das ganze soll jedoch Vertikal übereinander aufgebaut sein, das heißt also, alle Hauptkategorie-Punkte unter dem auf das man geklickt hat, müssen sich nach unten verschieben.

    Mein Ansatz ist: Ich bau ein <span> bzw <div> zwischen die Hauptkategorien, der die Unterkategorien beinhaltet. Zunächst ist jedoch alles Unsichtbar, da die Boxgröße 0 ist. Sobald auf die Hauptkategorie geklickt wird, soll die größe entsprechend angepasst werden. Das war jedenfalls mein ursprünglicher gedanke, aber nachdem ich das mit den größe anpassen überhaupt nicht hinbekommen hab, hab ich folgendes probiert:

    PHP-Code:
    <script type="text/javascript">
        function 
    anzeigen(){
            
    document.getElementById("menu1").innerHTML="Hier ist der Text";
            
    document.getElementById("menu1").style="border: 1px solid black;";
        }
        function 
    verstecken(){
            
    document.getElementById("menu1").innerHTML="";
            
    document.getElementById("menu1").style="border: 0px;";
        }
    </
    script>

    <
    a href="#" onClick="anzeigen()">Anzeigen</a> <a href="#" onClick="verstecken()">Verstecken</a

    <
    div id="menu1" ></div
    Ich hab leider noch nie richtig was in JavaScript gemacht, sonst hätte ich sicherlich ein bisschen mehr ahnung. Was gutes im Web hab ich auch nich gefunden, was mir bei meinem Problem helfen kann.

    Problem ist jetzt: Ich kann keine border einbauen, weil die beim klick auf "Verstecken" immernoch bestehen bleiben würde, wenn auch nur 2px groß.


    Weiß jemand Rat? Danke schonmal im Voraus!
    Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

  • #2
    Der Ansatz ist nix. Besser: Display oder visibility.

    http://de.selfhtml.org/css/eigenscha...ng.htm#display

    Kommentar


    • #3
      Hmmm nun gut da magst du wohl recht haben, aber mein eigentliches Problem is ja immernoch, wie passe ich denn den style über javascript an? So wies oben steht funzt es weder im IE noch im FF. Ich hab kA wie ich das machen soll. Wie gehtn sowas?
      Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

      Kommentar


      • #4
        Original geschrieben von ArSeN
        Hmmm nun gut da magst du wohl recht haben, aber mein eigentliches Problem is ja immernoch, wie passe ich denn den style über javascript an? So wies oben steht funzt es weder im IE noch im FF. Ich hab kA wie ich das machen soll. Wie gehtn sowas?
        indem Du dich über die korrekte Schreibweise informierst.

        document.getElementById("menu1").style.border="1px solid black;";

        Durch Bindestriche getrennte CSS-Begriffe (etwa "border-top") schreiben sich dabei so:
        style.borderTop

        Kommentar


        • #5
          http://de.selfhtml.org/javascript/objekte/style.htm
          mfg

          Kommentar


          • #6
            Ah - genau das hatte ich nicht gefunden. Ich danke euch vielmals.
            Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

            Kommentar


            • #7
              Problem mit vertikalem Dropdown-Menü

              Hallo!

              Ich bin dabei ein Dropdown menü zu schreiben, das Vertikal aufgebaut ist. Undzwar wie folgt:



              Auf diesem Bild sieht man, was passiert wenn man einmal auf die Hautpkategorie klickt. Es fährt darunter eine Fläche mit Unterkategorien aus, so wie es sein soll. Leider funktoiniert dies jedoch nur im Internet Explorer. Im FireFox erhalte ich auf der gleichen Seite ein unerklärliches Phänomen, das ich im Folgenden beschreibe.

              0 Mal Geklickt

              1 Mal Geklickt

              2 Mal Geklickt

              3 Mal Geklickt

              Diese Reihe kann man dann beliebig fortsetzen, und die weiteren Punkte verschieben sich immer weiter nach unten, so dass die weiße Fläche in der Höhe immer größer wird.

              Quelltext:

              PHP-Code:
              <script type="text/javascript">
                  function 
              drpdwn(id) {
                      if (
              document.getElementById(id).style.display=='none')
                          
              document.getElementById(id).style.display='block';
                      else 
                          
              document.getElementById(id).style.display='none';
                  }
              </
              script>

              <
              table border=0 cellspacing=0 cellpadding=0 width=175 bgcolor=white><tr><td>
              <
              table width=100bgcolor=white cellpadding=0 cellspacing=0>
              <
              tr><th bgcolor=#6694E7 align=left colspan=1>
              <font class=normtext>Inserate</font></th></tr>
              <
              tr><th bgcolor=#6694E7>
              <table border=0 cellpadding=0 cellspacing=0 width=100%>
              <
              tr>
               <
              td bgcolor=white style='height: 1px;'></td>
              </
              tr>
              <
              tr>
               <
              td bgcolor=black></td>
              </
              tr>
              <
              tr>
               <
              td bgcolor=white style='height: 1px;'></td>
              </
              tr>
              </
              table>
              </
              th></tr>
              <
              tr>
                           <
              td bgcolor=#6694E7>
                                
              <font class=normtext>
                                    <
              a href="javascript:drpdwn('menu1157902883')"><b>Computer Co.</b></a>
                                </
              font>
                           </
              td></tr>
                           <
              tr id='menu1157902883' style='display: none'>
                           <
              td bgcolor=#6694E7>                     
                                   
                                   
              <font class=normtext>
                                       
              • <a href=af_bs_index.php?af_cat=1157902883><b>Alle Kategorien</b></a><br>
                                       
              • <a href='ulink1'>UNTERLINK 1</a><br>
                                       
              • <a href='ulink2'>UNTERLINK 2</a><br>
                                       
              • <a href='ulink3'>UNTERLINK 3</a><br>
                                   </
              font>
                           </
              td>
                           </
              tr>
                           <
              tr>
                               <
              td bgcolor=white style='height: 1px;'></td>
                         </
              tr><tr>
                           <
              td bgcolor=#6694E7>
                                
              <font class=normtext>
                                    <
              a href="javascript:drpdwn('menu1159441333')"><b>Dienstleistungsbörse</b></a>
                                </
              font>
                           </
              td></tr>
                           <
              tr id='menu1159441333' style='display: none'>
                           <
              td bgcolor=#6694E7>                     
                                   
                                   
              <font class=normtext>
                                       
              • <a href=af_bs_index.php?af_cat=1159441333><b>Alle Kategorien</b></a><br>
                                       
              • <a href='ulink1'>UNTERLINK 1</a><br>
                                       
              • <a href='ulink2'>UNTERLINK 2</a><br>
                                       
              • <a href='ulink3'>UNTERLINK 3</a><br>
                                   </
              font>
                           </
              td>
                           </
              tr>
                           <
              tr>
                               <
              td bgcolor=white style='height: 1px;'></td>
                         </
              tr>

              ..............
              </
              table></td></tr></table><br></td>
                </
              tr>
              </
              table
              Kann mir jemand sagen was ich da falsch mache bzw. woher der Effekt kommt, und / oder wie ich ihn beheben kann?
              Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

              Kommentar


              • #8
                Re: Problem mit vertikalem Dropdown-Menü

                Was du falsch machst?

                Punkt 1) Du nervst uns mit Doppelpostings. *zusammenführ*

                Punkt 2) Du erstellst absolut grottiges HTML. So ein Menü lässt sich wunderbar als Liste auszeichnen, und wieso du immer noch an <font> hängst, kann jedem denkenden Menschen wohl nur ein Rätsel sein.
                Kurz gesagt: Du vergewaltigst HTML ganz schön.

                Punkt 3) Du weißt einer Tabellenzeile einen Wert für die CSS-Eigenschaft display zu, der höchst ungünstig ist. Der "normale" display-Wert für Tabellenzeilen ist nicht "block".
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar


                • #9
                  Zu 1) Sorry... das Thema hatte nur irgendwie nichmehr ganz gepasst.

                  Zu 2) Ich weiß, das Problem an dieser Stelle ist aber, dass ich ein gewaltiges Script für jemanden bearbeite, das dummerweise mit Tabellen layoutet. Ich hab den Typ auch gesagt das ich Tabellen im Generellen zum Layouten hasse, aber ich kann ja jetzt nich das ganze Script neuschreiben.

                  Zu 3) Aha, welches denn dann? Gibts sonst noch ne bessere Möglichkeit?

                  Danke allenfalls!
                  Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

                  Kommentar


                  • #10
                    Original geschrieben von ArSeN
                    Zu 3) Aha, welches denn dann?
                    RTFMchen, steht in der CSS-Spezifikation.

                    Dummerweise kann mit den table-Eigenschaften wiederum der IE nix anfangen ...
                    Gibts sonst noch ne bessere Möglichkeit?
                    display einen Leerstring zuweisen zum sichtbar machen - dann nimmt der Browser automatisch den richtigen Defaultwert für das Element.
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar


                    • #11
                      Super, das mit dem Leerstring funktoiniert auf Anhieb. Danke sehr wahsaga! *hut zieh*
                      Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

                      Kommentar

                      Lädt...
                      X