nicht angemeldet Felix Riesterer
Felix Riesterer
Gunnar Bittersmann
Gunnar Bittersmann
Felix Riesterer
Felix Riesterer
Gunnar Bittersmann
Gunnar Bittersmann
Felix Riesterer
Guten Tag,
ich habe ein Aufklappmenü:
#JS#
function abs1(element)
{
var status = document.getElementById(element).style.display;
document.getElementById('zus1').style.display = 'none';
if(status == "none"){document.getElementById(element).style.display = "block";}
}
#JS#
#HTML#
<ul>
<li><a href="javascript:abs1('zus1')"><span class="bullet">Link</span></a></li>
</ul>
<ul id="zus1" style="display: none;">
<li><a href="#"><span class="bullet">Link</span></a></li>
<li><a href="#"><span class="bullet">Link</span></a></li>
</ul>
#HTML#
Sieht komisch aus aber ich brauch es so.
Nun hab ich das Problem, wenn nun ein Nutzer Javascript Deaktivert, sieht er die Links nicht.
Ich hab schon viel gesucht, aber leider nix gefunden.
Gibt es eine möglichkeit display:block zu erzeugen wenn javascript deaktiviert wurde?
Ich bedanke mich herzlich,
ella
Hi,
Gibt es eine möglichkeit display:block zu erzeugen wenn javascript deaktiviert wurde?
Die gängige Methode ist, dem html- (document.documentElement) oder body-Element (document.body) mit einem Script direkt beim Laden der Seite eine zusätzliche Klasse zu verpassen - und dann im CSS entsprechende Selektoren (bspw. den Nachfahrenselektor) zu nutzen, um bestimmte Formatierungen nur zu Anwendung zu bringen, wenn diese Klasse vorhanden ist.
MfG ChrisB
Hallo,
ich bedanke mich sehr für die Antworten.
Leider bin ich dem Thema js nicht so sehr bewandert.
würdet ihr mir dies vieleicht näher erklären?
vielen dank.
Liebe(r) ella,
Leider bin ich dem Thema js nicht so sehr bewandert.
würdet ihr mir dies vieleicht näher erklären?
wenn Du _genau_ sagen kannst, wo Dein Wissen bzw. Verständnis aufhört, und mit welchem Ansatz Du es wie und mit welchem Ergebnis probiert hast, dann ja. Sonst liest sich so eine Frage wie "kannst Du mir das eben mal machen?" - und das hast Du doch nicht gemeint, oder?
Liebe Grüße,
Felix Riesterer.
Guten Abend,
natürlich hab ich das nicht gemeint. Ich freue mich schon wenn ich Tipps bekomme
Ich hab es so Probiert. (Danke an Gunnar Bittersmann)
css:
#zus1 {
display: block;
}
.navigation #zus1 {
display: none;
}
...
html:
<div class="navigation">
<ul>
<li><a href="javascript:abs1('zus1')"><span class="bullet">Link</span></a>
</li>
</ul>
<ul id="zus1">
<li><a href="#"><span class="bullet">Link</span></a></li>
<li><a href="#"><span class="bullet">Link</span></a><hr></li>
</ul>
</div>
und im header:
<script type="text/javascript">document.documentElement.className += ” navigation”;</script>
Leider funktioniert es nicht.
Wenn javascript deaktiviert ist wird nix angezeigt.
Und wenn es aktiviert ist passiert nix wenn ich das submenü per Klick aufklappen möchte.
hab ich etwas vergessen?
Liebe(r) ella,
1. ohne JS muss alles sichtbar sein.
2. mit JS kann manches "klappbar" werden (mit einer Klasse für <body>!)
<script type="text/javascript">document.documentElement.className += ” navigation”;</script>
Du hast dasselbe Problem wie Das_Land.
Liebe Grüße,
Felix Riesterer.
@@Felix Riesterer:
nuqneH
Du hast dasselbe Problem wie Das_Land.
Nein.
Qapla'
Hallo,
danke euch zwei für die Mühe, aber leider kapier leider nicht was gemeint ist. Ich lass es einfach wie es ist. Ich setze ne Info auf die Seite das Javascript aktiviert sein sollte.
Einen schönen Abend noch.
Hallo,
großen Dank nochmal.
Ich hab es nun hinbekommen.
html: (habs es jetzt nur für das forum zusammengepappt)
<script>document.documentElement.className += " js";</script>
<style>.js body #zus1{display: none}</style>
_
<body class="js">
_
<ul>
<li><a href="javascript:abs1('zus1')"><span class="bullet">GLink</span></a>
</li>
</ul>
<ul id="zus1">
<li><a href="#"><span class="bullet">Link</span></a></li>
<li><a href="#"><span class="bullet">Link</span></a><hr></li>
</ul>
Wenn ich es aufklappen möchte muss ich mindestens zwei mal drauf klicken bis es aufklappt. Woran kann das liegen?
@@ella:
nuqneH
<style>.js body #zus1{display: none}</style>
Ein Selektor sollte so kurz wie möglich sein. Hier also: .js #zus1 (ohne body).
Dazu ist allerdings noch folgende Berichtigung notwendig:
<body class="js">
Nei-en!!
Die Klasse "js" dient dazu, um anzugeben, ob JavaScript aktiviert ist. Sie soll also nur vorhanden sein, wenn JavaScript aktiviert ist. Deshalb wird sie per JavaScript gesetzt – und zwar fürs 'html'-Element.
Beim 'body'-Element hat die Klasse "js" nichts zu suchen. Und schon gar nicht im HTML-Quelltext.
Qapla'
okay allso nur dieses:
<script>document.documentElement.className += " js";</script>
<style>.js #zus1{display: none;}
#zus1 {display: block;}</style>
Trotzdem muss ich zweimal auf den Link klicken bis es aufklappt.
__________ ps: ___________
ich hatte mich hier gestern registriert, ich find aber nirgends ein Einlogformular.
Hi,
Trotzdem muss ich zweimal auf den Link klicken bis es aufklappt.
Weil du auf display == "none" vergleichst, aber diesen Wert bekommst du beim ersten Auslesen der display-Eigenschaft nicht geliefert. Nur direkt per style-Attribut oder zuvor bereits per JavaScript gesetzte Werte kannst du auch wieder über element.style auslesen.
Es gibt zwar auch Methoden, mit denen du den tatsächlichen aktuellen Wert auch ohne dass diese Bedingungen zutreffen auslesen kannst (Stichwort getComputedStyle) - aber simpler ist es, die Logik einfach umzudrehen.
if (element.style.display != "block") { element.style.display = "block"; }
else { element.style.display = "none"; }
ich hatte mich hier gestern registriert, ich find aber nirgends ein Einlogformular.
Das Forum einfach über http://forum.de.selfhtml.org/my/ aufrufen.
MfG ChrisB
if (element.style.display != "block") { element.style.display = "block"; }
else { element.style.display = "none"; }
>
>
>
`if(status == "none"){document.getElementById(element).style.display = "block";}`{:.language-javascript}
mit deinen obrigen Code Ersetzen?
Liebe(r) ella,
warum hast Du's nicht schon längst ausprobiert?
Liebe Grüße,
Felix Riesterer.
Liebe(r) ella,
warum hast Du's nicht schon längst ausprobiert?
Liebe Grüße,
Felix Riesterer.
Hatte ich wohl vergessen mit zu Posten.
Mit dem obrigen Beispiel funktioniert es nicht.
Hab zitiert.
Siehe Text oben.
komm mit dem Zitieren in diesen Forum noch nit so ganz klar. Tut mir leid.
Hallo zusammmen,
ich danke euch für die Geduld.
Ich habe es nun hinbekommen mit den Beispielen.
Es ist auch nur noch eine Funktion.
##head##
<script type="text/javascript">
function toggle(elementId) {
var elementStyleObj = document.getElementById(elementId).style;
elementStyleObj.display = elementStyleObj.display != "block" ? "block" : "none";
}
</script>
<script>document.documentElement.className += " js";</script>
<style>.js #1beispiel{display: none;}
#1beispiel {display: block;}</style>
##body##
<ul>
<li><a href="javascript:toggle('1beispiel')"><span class="bullet">Link</span></a>
</li>
</ul>
<ul id="1beispiel">
<li><a href="#"><span class="bullet">Link</span></a></li>
<li><a href="#"><span class="bullet">Link</span></a><hr></li>
</ul>
Auf der dementspechenden Unterseite, damit die Navi auch offen bleibt.
<script type="text/javascript">toggle('1beispiel');</script>
Ich hoffe das kann man so lassen.
Liebe grüße.
Hi,
[...] mit deinen obrigen Code Ersetzen?
Ungefähr so:
function abs1(elementId) {
var elementStyleObj = document.getElementById(elementId).style;
if (elementStyleObj.display != "block") {
elementStyleObj.display = "block";
}
else {
elementStyleObj.display = "none";
}
}
MfG ChrisB
@@ChrisB:
nuqneH
Ungefähr so:
function abs1(elementId) {
var elementStyleObj = document.getElementById(elementId).style;
if (elementStyleObj.display != "block") {
elementStyleObj.display = "block";
}
else {
elementStyleObj.display = "none";
}
}
Oder <http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=kürzer>:
~~~javascript
function abs1(elementId) {
var elementStyleObj = document.getElementById(elementId).style;
elementStyleObj.display = elementStyleObj.display != "block" ? "block" : "none";
}
Anstelle immer den Wert der display-Eigenschaft abzufragen, könnte man dem Elementbjekt auch ein Flag spendieren:
function abs1(elementId) {
var elementObj = document.getElementById(elementId);
elementObj.isVisible = !elementObj.isVisible;
elementObj.style.display = elementObj.isVisible ? "block" : "none";
}
Oder kürzer:
function abs1(elementId) {
var elementObj = document.getElementById(elementId);
elementObj.style.display = (elementObj.isVisible = !elementObj.isVisible) ? "block" : "none";
}
Aber eigentlich sollte man mit JavaScript keine CSS-Eigenschaften ändern.
Qapla'
PS: Was ist das eigentlich für ein du^Wunglücklich gewählter Funktionsbezeichner? abs1?? Wofür steht das?
Ich würde die Funktion toggle nennen.
@@ChrisB:
nuqneH
Ungefähr so:
function abs1(elementId) {
var elementStyleObj = document.getElementById(elementId).style;
if (elementStyleObj.display != "block") {
elementStyleObj.display = "block";
}
else {
elementStyleObj.display = "none";
}
}
>
> Oder <http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=kürzer>:
>
> ~~~javascript
function abs1(elementId) {
> var elementStyleObj = document.getElementById(elementId).style;
> elementStyleObj.display = elementStyleObj.display != "block" ? "block" : "none";
> }
Anstelle immer den Wert der display-Eigenschaft abzufragen, könnte man dem Elementbjekt auch ein Flag spendieren:
function abs1(elementId) {
var elementObj = document.getElementById(elementId);
elementObj.isVisible = !elementObj.isVisible;
elementObj.style.display = elementObj.isVisible ? "block" : "none";
}
>
> Oder kürzer:
>
> ~~~javascript
function abs1(elementId) {
> var elementObj = document.getElementById(elementId);
> elementObj.style.display = (elementObj.isVisible = !elementObj.isVisible) ? "block" : "none";
> }
Aber eigentlich sollte man mit JavaScript keine CSS-Eigenschaften ändern.
Qapla'
PS: Was ist das eigentlich für ein du^Wunglücklich gewählter Funktionsbezeichner?
abs1?? Wofür steht das?Ich würde die Funktion
togglenennen.
Hi,
weill ich damit weiterarbeiten möchte. Damit die einzelnen Absätze auch offen bleiben.
zb so:
function abs1(element)
{
var status = document.getElementById(element).style.display;
document.getElementById('zus1').style.display = 'none';
document.getElementById('zus2').style.display = 'none';
...usw..
if(status == "none"){document.getElementById(element).style.display = "block";}
}
##
function abs2(element)
{
var status = document.getElementById(element).style.display;
document.getElementById('zus1').style.display = 'none';
document.getElementById('zus2').style.display = 'none';
..usw..
if(status == "none"){document.getElementById(element).style.display = "block";}
}
Und auf den Unterseiten, damit die Navi "abs1" auch offen bleibt:
<script type="text/javascript">abs1('zus1');</script>
oder
<script type="text/javascript">abs1('zus2');</script>
bsw. auf anderer Seite wo "abs2" offen bleiben soll.
<script type="text/javascript">abs2('zus1');</script>
@@ella:
nuqneH
PS: Was ist das eigentlich für ein du^Wunglücklich gewählter Funktionsbezeichner?
abs1?? Wofür steht das?Ich würde die Funktion
togglenennen.Hi,
weill ich damit weiterarbeiten möchte. Damit die einzelnen Absätze auch offen bleiben.
?? Worauf war das die Antwort? Auf die Frage, wofür abs1 steht, wohl nicht.
BTW, zitiere sinnvoll, nicht alles!
function abs1(element)
{
var status = document.getElementById(element).style.display;document.getElementById('zus1').style.display = 'none';
document.getElementById('zus2').style.display = 'none';
...usw..
if(status == "none"){document.getElementById(element).style.display = "block";}}
function abs2(element)
{
var status = document.getElementById(element).style.display;document.getElementById('zus1').style.display = 'none';
document.getElementById('zus2').style.display = 'none';
..usw..
if(status == "none"){document.getElementById(element).style.display = "block";}
}
Worin unterscheiden sich die Funktionen?
Und selbst wenn es einen minimalen Unterschied geben sollte: [DRY](http://de.wikipedia.org/wiki/DRY)! Verwende dieselbe Funktion, evtl. mit zusätzlichem Parameter.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
Lieber Gunnar Bittersmann,
Du hast dasselbe Problem wie Das_Land.
Nein.
zumindest nicht nur.
Liebe Grüße,
Felix Riesterer.
@@Felix Riesterer:
nuqneH
Du hast dasselbe Problem wie Das_Land.
Nein.
zumindest nicht nur.
Nein, überhaupt nicht. Der Ausführungszeitpunkt von document.documentElement.className += " js"; ist für das Wirken einer Regel .js #foo { bar: baz } egal: Sobald das Script ausgeführt wurde, grift der Selektor.
(Um Flackern der Anzeige zu vermeiden, sollte das Script natürlich ASAP ausgeführt werden, bevor der Seiteninhalt erst anders gerendert wird.)
Und das Script wird ausgeführt. Selbst bei kaputtem Markup wie
<script>[code lang=javascript]document.documentElement.className += " js";</script>
<html><style>.js body {background: green}</style>[/code]
Da beim 'html'-Element Start- und End-Tag optional sind, wird mit dem <script>-Tag implizit vorher ein 'html'-Element geöffnet. Das zweite 'html'-Element (das <html>-Tag) ist natürlich ein Fehler, der tut aber nichts zur Sache. document.documentElement bezieht sich auf das Wurzelelement: das implizit geöffnete äußere 'html'-Element. Und dieses ist zur Ausführungszeit des Scriptes auf jeden Fall vorhanden.
Qapla'
Lieber Gunnar Bittersmann,
document.documentElementbezieht sich auf das Wurzelelement: das implizit geöffnete äußere 'html'-Element.
jetzt weiß ich, wo ich vorhin nicht genau genug gelesen habe. Klar, wenn man das <html>-Element selbst anstatt das <body>-Element mit einer Klasse versieht, dann geht das auch "sofort". Stimmt. Und dem Nachfahren-Selektor ist es egal, welcher Vorfahre der Navi die Klasse trägt.
Liebe Grüße,
Felix Riesterer.
@@ella:
nuqneH
Leider funktioniert es nicht.
Wenn javascript deaktiviert ist wird nix angezeigt.
Ja, der Selektor '.navigation #zus1' greift ja auch bei deaktiviertem JavaScript, weil das 'div'-Element ebenfalls der Klasse "navigation" angehört.
Das 'html'-Element sollte nicht per JavaScript die Klasse "navigation" bekommen. Der Klassenbezeichner sollte beschreiben, wofür die Klasse steht – in dem Fall eben dafür, dass JavaScript aktiviert ist. Wenn die "js" als Bezeichner nicht gefällt, kannst du sie auch "javascript-enabled" nennen, aber nicht "navigation".
Qapla'
Hallo,
danke euch zwei für die Mühe, aber leider kapier leider nicht was gemeint ist. Ich lass es einfach wie es ist. Ich setze ne Info auf die Seite das Javascript aktiviert sein sollte.
Einen schönen Abend noch.
@@ella:
nuqneH
danke euch zwei für die Mühe, aber leider kapier leider nicht was gemeint ist.
Was genau verstehst du an meiner Antwort nicht?
Du willst, dass .navigation #zus1 { display: none } nur dann wirkt, wenn JavaScript aktiviert ist, also für das 'html'-Element die Klasse "navigation" per JavaScript document.documentElement.className += ” navigation”; gesetzt wird.
Die Regel wikt aber auch bei deaktiviertem JavaScript. Das Element mit der ID "zus1" ist dann zwar nicht Nachfahre des 'html'-Elements der Klasse "navigation", aber dennoch des 'div'-Elements der Klasse "navigation". Demzufolge wirkt die Regel, das Element mit der ID "zus1" wird nicht angezeigt.
Du möchtest die per JavaScript vergebene Klasse nicht "navigation" nennen; das sagte ich doch.
Ich lass es einfach wie es ist. Ich setze ne Info auf die Seite das Javascript aktiviert sein sollte.
Keine gute Lösung. Nicht mal eine Lösung.
Qapla'
@@ella:
nuqneH
würdet ihr mir dies vieleicht näher erklären?
Das tut der Abschnitt „Javascript mehrstufig zünden“ in [PERFORMANCE-BP2].
Qapla'
Liebe(r) ella,
verleihe dem body eine spezielle Klasse (z.B. "no-js") und verwende Deine Selektoren entsprechend. Das könnte z.B. so aussehen:
.no-js #zus1 {
display: block;
}
Mit Deinem JavaScript sorgst Du dafür, dass das <body>-Element diese Klasse eben nicht mehr hat. Dann wird das Menü wieder verschwinden.
Das Ganze setzt natürlich voraus, dass Du keine(!!) inline-Styles benutzt.
Liebe Grüße,
Felix Riesterer.
@@Felix Riesterer:
nuqneH
verleihe dem body eine spezielle Klasse (z.B. "no-js")
So eine Klasse hat eigentlich nichts im Markup zu suchen.
Mit Deinem JavaScript sorgst Du dafür, dass das <body>-Element diese Klasse eben nicht mehr hat.
Außerdem ist es schwieriger, eine Klasse wegzunehmen als eine hinzuzufügen.
Also wie ChrisB sagte, keine Klasse bei deaktiviertem JavaScript; mit JavaScript Klasse setzen.
Qapla'
Lieber Gunnar Bittersmann,
Außerdem ist es schwieriger, eine Klasse wegzunehmen als eine hinzuzufügen.
oder so rum. Auch gut.
Liebe Grüße,
Felix Riesterer.