Anzeigen/Verbergen

[Maike]

Hallo,

ich sehe immer öfter eine Technik, bei der man Inhalte per Link anzeigen bzw. verbergen kann, z.B. Wikipedia Inhaltsverzechnis.

Es ist sieht so aus, als ob das mit JS realisiert wird.
Kann mir bitte jemand erklären, wie das funktioniert?

Und zum Thema Usability/Barrierefreiheit: WAs paaiert bei abgeschaltetem JS? Gibt es eine rein (X)HTML/CSS-basierte Alternative?

Schönen Dank

Maike

[globe]

n'abend,

Es ist sieht so aus, als ob das mit JS realisiert wird.
Kann mir bitte jemand erklären, wie das funktioniert?

entweder wird einem Objekt eine neue (CSS-)Klasse zugewiesen, oder das Attribut style.display wird direkt manipuliert.

Und zum Thema Usability/Barrierefreiheit: WAs paaiert bei abgeschaltetem JS? Gibt es eine rein (X)HTML/CSS-basierte Alternative?

bei abgeschaltetem Javascript wird dieses ein-/ausblenden nicht funktionieren. Objekte, die per default ausgeblendet sind, können dann auch nicht eingeblendet werden.

weiterhin schönen abend...

[Swen Wacker]

Moin,

Es ist sieht so aus, als ob das mit JS realisiert wird.
Kann mir bitte jemand erklären, wie das funktioniert?

Schau mal in den Quelltest der Datei bei Wikipedia. Dort findest Du irgendwo die JavaScript-Funktion, das das bewirkt (irgend etwas mit "toggle"). Dann schau im Quelltest weiter oben nach, wo die Javascript-Dateien eingebunden werden. Da steht irgendwo ein Verweis auf wikibits.js. Die lädst Du Dir runter und schaust nach, wie es dort gemacht wird.

Und zum Thema Usability/Barrierefreiheit: WAs paaiert bei abgeschaltetem JS? Gibt es eine rein (X)HTML/CSS-basierte Alternative?

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility in Verbindung mit rel="alternate stylesheet" wäre ein Ansatz.

Viele Grüße

Swen Wacker

[Cybaer]

Hi,

Kann mir bitte jemand erklären, wie das funktioniert?

Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe

WAs paaiert bei abgeschaltetem JS?

Ist (hoffentlich) nichts versteckt.

Gibt es eine rein (X)HTML/CSS-basierte Alternative?

Nein, aber HTML/CSS-pur + serverseitige Technik (z.B. PHP) war nicht unüblich, als es noch kein modernes DOM-JS gab. Ist halt nerviger ...

Gruß, Cybaer

[Manfred]

Hallo,

hier mal ein kurzes Beispiel, wie so etwas realisierbar ist:

Hier das Javascript:

function getStyleSheet(name) {
 if(!name || !document.styleSheets) return null;
 var i = document.styleSheets.length;
    while(i--) {
     var rules = document.styleSheets[i].rules ? document.styleSheets[i].rules :
        document.styleSheets[i].cssRules;
     var j = rules.length;
        while(j--) {
         if(rules[j].selectorText == name) return rules[j];
        }
    }
    return null;
}

function setStyle(name, attr, value) {

// Beispiel: setStyle('.KLASSE', 'EIGENSCHAFT', 'WERT');

var rule = getStyleSheet(name);
    if(!rule) return null;
    if(value) rule.style[attr] = value;
    return rule.style[attr];
}

Du definierst dann eine CSS Klasse wie z.B:

.hide {
 visibility:hidden;
}

Diese Klasse weist du dann einem Element z.B. <div class="hide"></div> oder <img src="..." class="hide">  zu.

In den Link schreibst du dann einfach:

<a href="#" onclick="setStyle('.hide', 'visibility', 'visible');"

Es gibt noch andere Eigenschaften:
   visible = sichtbar
   hidden = versteckt (der Platz wird aber trotzdem belegt)
   collapse = versteckt (der Platz wird für andere Elemente frei)
              Ob es z.B mit img geht weiß ich nicht
   inherit = übernimmt die Eigenschaft vom Elternelement

Beispiel:
<div class="hidden">
   <div class="hidden_inherit">
      ...
   </div>
</div>

Im obigen Beispiel sollten also 2 Klassen definiert werden:

.hide {
 visibility:hidden;
}
.hide_inherit {
 visibility:inherit;
}

Damit kannst du Elemente ein- bzw ausblenden.

Viel Spaß beim Programmieren.

mfg MAnfred

[Cybaer]

Hi,

hier mal ein kurzes Beispiel, wie so etwas realisierbar ist:

Vorsicht, auch wenn es nur ein Beispiel ist, führt es IMHO in die Irre!

Ich habe mich ja mal an einer ähnlichen Funktion versucht: Coding: CSS-Regeln (& Stylesheets) auslesen & ändern

Warum ist meine Funktion deutlich länger? Von mehr Funktionalität mal abgesehen: Weil die Browser das CSS leider *sehr* unterschiedlich interpretieren (von Bugs & JS/CSS-spezifischen Besonderheiten mal ohnehin abgesehen) und intern bis zur Unkenntlichkeit verändern - selbst innerhalb ein und derselben Browserfamilie! Change style sheet bietet eine kleine, wenn auch unvollständige Übersicht (ältere Mozillas als 1.75 reagieren z.B. auch anders als neuere).

D.h., was man mit selectorText bekommt, ist nicht nur keineswegs immer das, was man im CSS notiert hat (das ist eher die Ausnahme) - es unterscheidet sich auch noch von Browser zu Browser ...

Gruß, Cybaer