Chris Jasra: Ausklappbare Leiste

Hay,

ich möchte wie im Beispielbild

http://img463.imageshack.us/img463/9834/beispielwt0.png

auf Abruf eines Links ein neue Leiste haben, die auf Abruf des gleichen Links auch wieder verschwindet.

Hier habe ich auch ein Beispiel, wie so etwas funktionieren könnte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
<script type="text/javascript">
function switchlayer(Layer_Name)
{
var GECKO = document.getElementById? 1:0 ;
var NS = document.layers? 1:0 ;
var IE = document.all? 1:0 ;

if (GECKO) {
  document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=='block') ? 'none' : 'block';
 }
 else if (NS) {
  document.layers[Layer_Name].display=(document.layers[Layer_Name].display=='block') ? 'none' : 'block';
 }
 else if (IE) {
  document.all[Layer_Name].style.display=(document.all[Layer_Name].style.display=='block') ? 'none' : 'block';
 }
}
</script>

</head>

<body style="background-color: white;">

<table border="1" style="width: 100%;">
 <tr>
 <td><a href="#" onclick="javascript:switchlayer('1'); return false;">Link</a>
 </tr>
</table>
<table border="1" style="width: 100%;">
 <tr>
 <td style="display:none" id="1">Neue Tabelle</td>
 </tr>
</table>

</body>

</html>

Mit dem Öffnen des Links wird die versteckte Leiste (in Tabellenform) gezeigt, beim zweiten Klick wird sie wieder versteckt. Wo es im IE schön angezeigt wird, hakt es nachher auf Browsern mit Mozilla-Engine. Beim wiederholten Öffnen der Leiste sah sie ziemlich fehlerhaft aus. Ich konnte zwar den Fehler entdecken, dass es an den Befehl "Display: ..." lag und hab auch gleich auf SELFHTML nachgeschaut, um den Problem auf die Spur zu kommen, jedoch habe ich aus dem Text dort rein gar nichts verstanden und bin auch überfragt, was ich nun wo einsetzen bzw. korrigieren soll.

Wäre um Hilfe dankbar =)
Chris Jasra

  1. Hi,

    var GECKO = document.getElementById? 1:0 ;

    ??? IE kennt getElementById, Opera kennt's, Safari kennt's, Konqueror auch.
    Warum heißt die Variable "GECKO"?

    <td style="display:none" id="1">Neue Tabelle</td>

    "1" ist kein gültiger Wert für das id-Attribut.
    Wenn's damit nicht klappt, darf man sich nicht wundern.

    Mit dem Öffnen des Links wird die versteckte Leiste (in Tabellenform) gezeigt, beim zweiten Klick wird sie wieder versteckt. Wo es im IE schön angezeigt wird, hakt es nachher auf Browsern mit Mozilla-Engine. Beim wiederholten Öffnen der Leiste sah sie ziemlich fehlerhaft aus.

    document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=='block') ? 'none' : 'block';

    Wundert Dich das? "block" ist nicht der geeignete display-Wert für eine Tabellenzelle - das wäre table-cell.
    Wenn Du aus der Tabellenzelle ein block-Element machst, dann machen die Geckos genau das - sie zeigen es nicht als Tabellenzelle, sondern wie gewünscht als block-Element an.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hay,

      erstmal vielen Dank für den Hinweis, habe den id-Attribut geändert und die Variable umbenannt. Außerdem habe ich bei meinem ersten Post einen Fehler gemacht. Der id-Wert sollte eigentlich in table rein, damit die ganze Tabelle verschwindet oder wieder erscheint. Das Problem ist wohl, dass Netscape und Internet Explorer die Angaben verschieden interpretieren. Will ich die Tabelle sauber verstecken oder öffnen, bräuchte ich "table", aber Internet Explorer versteht anscheinend nur "block". Was soll ich nun machen?

      fixed:
      <script type="text/javascript">
      function switchlayer(Layer_Name) {
       var Browser = document.getElementById? 1:0 ;

      if (Browser) {
        document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=='table-cell') ? 'none' :

      table-cell';
       }
      }
      </script>

      Ich habe den originalen Skript von der Site http://www.it-academy.cc/article/1236/JavaScript:+aufklappbares+Menue.html, aber der scheint nicht Browser-konform zu sein. Und ehrlich gesagt habe ich von Javascript nicht viel Ahnung und möchte auch wegen dieser Kleinigkeit nicht gleich eine komplett neue Internetsprache erlernen, da dies sowieso das einzige Javascript-Element ist. Deswegen würde ich mich über noch einmalige Hilfe freuen.

      Vielen Dank =)
      Chris Jasra

      1. Hallo Chris,

        deine Frage aus dem Doppelposting https://forum.selfhtml.org/?t=160826&m=1046163:

        Mit diesen Skript kann ich die Tabelle auf Klick wieder verschwinden oder erscheinen lassen:

        <script type="text/javascript">
        function switchlayer(Layer_Name) {
          var Browser = document.getElementById? 1:0 ;

        if (Browser) {
            document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=='table') ? 'none' : table';
          }
        }
        </script>

        [...]

        <table border="1" style="width: 100%;">
          <tr>
            <td><a href="#" onclick="javascript:switchlayer('1'); return false;">Link</a>
          </tr>
        </table>
        <table border="1" style="width: 100%; display: none;" id="1">
          <tr>
            <td>Neue Tabelle</td>
          </tr>
        </table>

        Zur Info: Dieses ist ein leicht modifizierter Skript von der Seite http://www.it-academy.cc/article/1236/JavaScript:+aufklappbares+Menue.html aber dieser ist ziemlich Browser-unkonform. Lasse ich jetzt die zwei table-Variablen im Skript stehen, funktioniert er zwar im Netscape, jedoch nicht im Internet Explorer. Für den IE scheint nur die Variable block zu funktionieren. Deshalb sehe ich als einzigen Ausweg, diesen Skript über den Haufen zu werfen und auf eine alternative Lösung zurückzugreifen. Existiert da irgendwo ein Ansatz?

        ------------------------------------------------------------------------
        Meine Antwort darauf:

        id="Tabelle1" ist auch in Tabellen erlaubt. Aber vieleicht liegt dein Problem ja hier:

        document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=='table') ? 'none' : table';

        Hast du schon mal geprüft, welche Eigenschaft die Tabelle überhaupt hat? CSS-Eigenschaften können nur ausgelesen werden, wenn sie auch gesetzt wurden, und der IE kennt display:table nicht. Ich denke, diesen Teil wirst du umschreiben müssen.

        Gruß, Jürgen

    2. Hello out there!

      <td style="display:none" id="1">Neue Tabelle</td>

      "1" ist kein gültiger Wert für das id-Attribut.
      Wenn's damit nicht klappt, darf man sich nicht wundern.

      Siehe [HTML401 §6.2]

      document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=='block') ? 'none' : 'block';

      Wundert Dich das? "block" ist nicht der geeignete display-Wert für eine Tabellenzelle - das wäre table-cell.
      Wenn Du aus der Tabellenzelle ein block-Element machst, dann machen die Geckos genau das - sie zeigen es nicht als Tabellenzelle, sondern wie gewünscht als block-Element an.

      Siehe [</archiv/2007/9/t158722/#m1032147>]

      See ya up the road,
      Gunnar

      PS: Beide „Siehes“ @Chris, nicht @MudGuard. ;-)

      --
      „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
      1. "1" ist kein gültiger Wert für das id-Attribut.

        Habe ich gefixt.

        Siehe [</archiv/2007/9/t158722/#m1032147>]

        Vielen Dank, das hat das Problem tatsächlich gelöst. Im Skript

        <script type="text/javascript">
        [...]
        if (Browser) {
          document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=="") ? "none" : "";
          }
        }
        </script>

        den Wert "table" löschen, damit die Grundeinstellung geladen wird. Da dieses Problem jetzt doch noch hier gelöst werden konnte, kann der andere Thread mit den Bezug auf diesen Thread gelöscht werden.

        Vielen Dank für die kompetente Problemlösung
        Chris Jasra