Chris Jasra

[Über ID nur ein Objekt anzeigen?]

Hay,

ich habe zwei Tabellen, die ich über einen Skript ein- und ausblenden kann. Wenn aber jetzt über den Link die eine Tabelle öffne und die andere jetzt auch öffnen will, sollte die andere Tabelle verschwinden und die aufgerufene soll wieder auftauchen. Falls man es (verständlicherweise) nicht ganz so recht verstanden hat: http://nmagazin.nm.funpic.de/test/test.html

Ich hatte mehrere Versuche mit den IDs und den Skript gemacht, indem ich eine neue ID für einen Skript angelegt habe, der beim Klick die andere verschwinden lässt und umgedreht. Aber es funktionierte von Grund auf nicht. Ich hatte mit der SELFHTML-Forumssuche zwar nach Threads mit diesen Tenor gesucht, jedoch keinen Thread mit solch einem Ansatz diesen Skriptes. Lösungsansätze?

Vielen Dank im Voraus =D
Chris Jasra

[3vi1]

Hoi,

also wenn ich es richtig verstanden habe, möchtest du das wenn du eine Tabelle anzeigen lässt alle anderen verschwinden, die evtl schon zu sehen sind?

function switchlayer(Layer_Name) {
 var Browser = document.getElementById? 1:1 ;

if (Browser) {
  document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=="") ? "none" : "";
 }
}

diese kleine Funktion könntest du z.B. so abändern das zuerst alle Tabellen auf display:none; gesetzt werden. Dann machst du nur die eine Tabelle wieder sichtbar die per Funktionsaufruf übergeben wurde.
Grüße

Markus

[Chris Jasra]

Hay,

also wenn ich es richtig verstanden habe, möchtest du das wenn du eine Tabelle anzeigen lässt alle anderen verschwinden, die evtl schon zu sehen sind?

So isses x)

diese kleine Funktion könntest du z.B. so abändern das zuerst alle Tabellen auf display:none; gesetzt werden. Dann machst du nur die eine Tabelle wieder sichtbar die per Funktionsaufruf übergeben wurde.

Und genau da liegt der Hund begraben. Selbst wenn alle auf "display: none" gesetzt sind und ich nun eine Tabelle wieder erscheinen lasse, habe ich keine Funtkion, die beim Aufrufen einer neuen Tabelle die andern wieder alle verschwinden lässt.

Vielen Dank für diesen wertvollen Lösungsansatz,
Chris Jasra

[Felix Riesterer]

Lieber Chris,

Selbst wenn alle auf "display: none" gesetzt sind und ich nun eine Tabelle wieder erscheinen lasse, habe ich keine Funtkion, die beim Aufrufen einer neuen Tabelle die andern wieder alle verschwinden lässt.

spätestens jetzt wäre es sinnvoller, mit CSS-Klassen und IDs zu arbeiten, anstatt das display:none direkt in die Tabellen zu schreiben.

Beispiel:

<table id="irgendwas">....</table>  
<table id="irgendwasanderes">....</table>  
<table id="nochirgendwas">....</table>  
<table id="immernochwas">....</table>

Nun kann man hergehen und per Javascript alle Tabellen durchforsten. Dazu nimmt man var alleTabellen = document.getElementsByName("table").
Da man nur bestimmte Tabellen, nämlich die Tabellen mit IDs hin- und herschalten möchte, kann man die jeweils anderen Tabellen ausschließen. Dazu prüft man, ob die Tabellen eine ID haben, und wenn ja, ob diese kein Leerstring ist.

var i;  
for (i = 0; i < alleTabellen.length; i+++) {  
    if (alleTabellen[i].id && alleTabellen[i].id != "") {  
        alleTabellen[i] = false; // Tabelle aus der Liste austragen, da sie keine ID hat  
    }  
}

Nun hat man alle "schaltbaren" Tabellen gefunden. Jetzt kann man ihnen CSS-Klassen geben. Wir vergeben die CSS-Klasse "inaktiv":

for (i = 0; i < alleTabellen.length; i++) {  
    // haben wir eine ausgetragene Tabelle ohne ID erwischt?  
    if (alleTabellen[i]) {  
        // Nö, Tabelle hat ID  
        alleTabellen[i].className = "inaktiv";  
    }  
}

So. Jetzt kannst Du mit CSS definieren, dass die Klasse "inaktiv" eben display:none gesetzt ist und somit sind alle Tabellen unsichtbar.

Um nun eine Tabelle sichtbar zu schalten, muss man nur ihre ID kennen und kann ihr dann die Klasse "inaktiv" wieder wegnehmen, um sie sichtbar zu schalten.

Das alles könnte zusammengefasst so aussehen (Code ungetestet!!!):
<script type="text/javascript">

    //<![CDATA[  
    var layerSwitcher = { // wir definieren ein Objekt (JSON-Schreibweise)  
        alleInaktiv : function () {  
            var i;  
            var alleLayer = document.getElementsByName(layerSwitcher.layerElement);  
            for (i = 0; i < alleLayer.length; i+++) {  
                if (alleLayer[i].id && alleLayer[i].id != "") {  
                    alleLayer[i] = false; // Layer aus der Liste austragen, da keine ID  
                }  
            for (i = 0; i < alleLayer.length; i++) {  
                // haben wir einen ausgetragenen Layer ohne ID erwischt?  
                if (alleLayer[i]) {  
                    // Nö, Tabelle hat ID  
                    alleLayer[i].className = "inaktiv";  
                }  
            }  
        },  
  
        aktivieren : function (layerID) {  
            // CSS-Klasse "inaktiv" entfernen  
            var layer = document.getElementById(layerID);  
            if (layer) {  
                cssClass = layer.className;  
                layer.className = className.replace(/\binaktiv\b/), '');  
            }  
        },  
  
        init : function () {  
            // Den layerSwitcher nach dem Laden der Seite ausführen lassen  
            layerswitcher.oldWinOnLoad = window.onload; // bereits bestehende onload-Funktion retten  
            window.onload = function () {  
                if (typeof(layerSwitcher.oldWinOnLoad) == "function") {  
                    // bereits bestehende onload-Funktion ausführen  
                    layerSwitcher.oldWinOnLoad();  
                }  
                // Jetzt alle Layer inaktiv schalten  
                layerSwitcher.alleInaktiv();  
  
                // ersten aktiven Layer aktivieren  
                if (layerSwitcher.erstAktiv && layerSwitcher.erstAktiv != "") {  
                    layerSwitcher.aktiviere(layerSwitcher.erstAktiv);  
                {  
            }  
        }  
    };  
  
    layerSwitcher.init();  
  
    // <table> als zu suchende Layer einstellen  
    layerSwitcher.layerElement = "table";  
  
    // ersten aktiven Layer einstellen  
    layerSwitcher.erstAktiv = "irgendwas";  
    //]]>

</script>  
  
...  
<a href="php-generierte Seite für Javascript-lose" onclick="layerSwitcher.aktiviere('irgendwasanderes')">Irgendwasanderes</a>  

Vielleicht hilft Dir dieser Code etwas weiter beim Javascript-lernen und beim Lösen Deines Problems...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Lieber Chris,

bitte poste das nächste Mal den relevanten Code. Danke.

Relevanter Code:
document.getElementById(Layer_Name).style.display=(document.getElementById(Layer_Name).style.display=="") ? "none" : "";

Du musst wissen, dass ohne eine explizite Nennung von <p style="display:irgendwas"> oder einer Zuweisung eines display-Wertes mittels Javascript die Abfrage von document.getElementById(...).style.display eine Art Fehlercode ergibt!

Was passiert eigentlich mit folgender Modifikation?

function switchLayer(layer_name) {  
    var BrowserHasGetElementById = (document.getElementById && typeof(document.getElementById) == "function");  
  
    if (BrowserHasGetElementById) {  
        element = document.getElementById(Layer_Name);  
        element.style.display = (element.style.display != "none") ? "none" : "";  
    }  
}

Noch ein Hinweis!
Code dieser Art ist nicht gut: <a onclick="javascript:switchlayer('zeile_werke'); return false;" href="">Erster Testlink</a>

In ein onclick-Attribut gehört Javascript-Code. Das Pseudo-Protokoll "javascript:" gehört nur in href-Attribute von Links. Besser noch Du setzt solchen rein Javascript-bezogenen Kram eben per Javascript, damit Deine Seite ansonsten von Javascript sauber bleibt. Besucher ohne Javascript sehen unter Umständen nämlich sonst nix.

Es ist meiner Meinung nach generell besser, wenn Du eine andere Lösung findest.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Chris Jasra]

Hay,

bitte poste das nächste Mal den relevanten Code. Danke.

tut mir Leid, das ist mir in der Eile wohl entfallen. Ich werde aber das nächste mal dran denken.

Um nun zum Thema zu kommen: Da ich von Javascript soviel wie ein Maulwurf vom Formationssprung verstehe, würde ich ein paar Sachen gerne hinterfragen.

Du musst wissen, dass ohne eine explizite Nennung von <p style="display:irgendwas"> oder einer Zuweisung eines display-Wertes mittels Javascript die Abfrage von document.getElementById(...).style.display eine Art Fehlercode ergibt!

Inwiefern eine explizite Nenung? Müsste ich in ein weiteres <script>-Element eine solche Nennung notieren?

function switchLayer(layer_name) {

var BrowserHasGetElementById = (document.getElementById && typeof(document.getElementById) == "function");

if (BrowserHasGetElementById) {
        element = document.getElementById(Layer_Name);
        element.style.display = (element.style.display != "none") ? "none" : "";
    }
}

  
Dieser Skript sieht mir tatsächlicher XHTML-konformer aus. Ich habe den jetzt auch in den Header eingefügt, jetzt muss noch aufgrund deiner Aussage  
  

> Noch ein Hinweis!  
> Code dieser Art ist nicht gut: `<a onclick="javascript:switchlayer('zeile_werke'); return false;" href="">Erster Testlink</a>`{:.language-html}  
  
das <a>-Attribut verändert werden.  
  

> In ein onclick-Attribut gehört Javascript-Code. Das Pseudo-Protokoll "javascript:" gehört nur in href-Attribute von Links.  
  
Klingt logisch, jedoch hab ich keinen blassen Schimmer, was ich in den  
  
<script type="text/javascript">  
...  
</script>  
  
-Bereich notieren sollte, da ich Javascript erst noch erlerne.  
  

> Es ist meiner Meinung nach generell besser, wenn Du eine andere Lösung findest.  
  
Mit PHP könnte man sicherlich etwas machen, aber bei PHP aktualisiert sich die Seite von Grund auf neu und das wäre bei manchen Sachen, die ich in die HP später noch einbinden möchte, nicht sonderlich empfehlenswert.  
  
Vielen Dank für diese sehr kompetente und ausführliche Antwort und Sorry für das Vertauschen vom Thread- und User-Namen x)  
Chris Jasra