CSS/HTML: div ausgrauen/disablen

Tim Gast #5406095
Lesenswert?
• ▲
▼ 
Ich habe HTML-Seiten mit einem Menübereich und jeweils einem separaten 
DIV mit Inhalt. Jetzt möchte ich dieses DIV ausgrauen und deaktivieren 
können (und nur das DIV), d.h. man soll anschauen dürfen, aber nichts 
darin soll anklickbar sein, keine Links, aber vor allem keine inputs 
o.ä.
Auch nicht mit der Tastatur oder dem Touchscreen auf dem Smartphone.

Wie kriege ich das hin? Ein großes DIV über die ganze Seite, das 
halbdurchscheinend ist, scheidet aus, weil es das Menü außer Kraft 
setzt, welches ja bedienbar bleiben soll.
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Daniel A. #5406239
Lesenswert?
• ▲
▼ 
Tim schrieb:
> Das Problem damit ist, dass man per Tastatur noch überall hinkommt und
> tippen kann.

Das Problem scheint mit CSS nicht lösbar zu sein. Man müsste jedem input 
Feld ein readonly oder ein disabled attribut verpassen. Man könnte das 
zwar auch mit JS machen, ist aber auch unschön.

1
for(let d of Array.from(document.querySelectorAll(".disabled input, .disabled textarea")))

2
  d.disabled="disabled";


> Die Kontrollen sind zwar alle "tot" und ohne Funktion, aber
> es sollte eben auch tot aussehen.

Um die Idee ein halb transparentes div darüberzulegen wieder 
aufzugreifen, das geht auch mit einzelnen Elementen statt über die ganze 
Seite. Man muss nur dem darüberliegenden Element etwas anderes als 
"position: static;" zuweisen, z.B. "relative", und dem div "position: 
absolute; left:0; right:0; top:0; bottom: 0;". Geht auch mit dem 
::before pseudoelement. Oder mit einem filter könnte man das auch 
anpassen (filter: grayscale(100%) contrast(50%);).
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Tim Gast #5406271
Lesenswert?
• ▲
▼ 
disabled ist irgendwie doof. Es sind nicht nur inputs vorhanden, sondern 
auch canvas mit onclick/onmousemove/ontouchstart/ondragstart und solchen 
Späßen. Da bringt ein disabled gar nichts. Das ist leider sehr 
unbefriedigend und halbherzig implementiert. :/
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Nop Gast #5406413
Lesenswert?
• ▲
▼ 
Zu welchem Zeitpunkt bzw. aufgrund welcher Kriterien entscheidet sich, 
ob Dein Zusatzbereich ausgegraut werden soll?

Wenn beim Laden der Seite, dann geht das mit CSS. Als Beispiel wäre hier 
eine simple Menüführung zu nennen, in der jeweils derjenige Menü-Eintrag 
ausgegraut und disabled ist, der zur aktuellen Seite gehört. Der Witz 
ist hier, daß der betreffende Menülink von vornherein im Source nicht 
als Link vorhanden ist.

Ist der Wunsch eine Änderung nach dem Laden und aufgrund einer 
Nutzerinteraktion mit dem Menü, dann ist Javascript fällig.

Faustregel: alles, was zustandslos ist, geht mit CSS. Zustandsbehaftete 
Sachen brauchen Javascript.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Beitrag #6096400 wurde von einem Moderator gelöscht.
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren