Style via JS anpassen

[ArSeN]

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:

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

[pekka]

Der Ansatz ist nix. Besser: Display oder visibility.

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

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

[pekka]

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

[hall]

http://de.selfhtml.org/javascript/objekte/style.htm

[ArSeN]

Ah - genau das hatte ich nicht gefunden. Ich danke euch vielmals.

[ArSeN]

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:

<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=100% bgcolor=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?

[wahsaga]

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

[ArSeN]

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!

[wahsaga]

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.

[ArSeN]

Super, das mit dem Leerstring funktoiniert auf Anhieb. Danke sehr wahsaga! *hut zieh*