mikrocontroller.net

Forum: PC-Programmierung CSS/HTML: div ausgrauen/disablen


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
Autor: Tim (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

: Verschoben durch Admin
Autor: Daniel A. (daniel-a)
Datum:

Bewertung
0 lesenswert
nicht lesenswert

Autor: Tim (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Das Problem damit ist, dass man per Tastatur noch überall hinkommt und 
tippen kann. Die Kontrollen sind zwar alle "tot" und ohne Funktion, aber 
es sollte eben auch tot aussehen.

Autor: Daniel A. (daniel-a)
Datum:

Bewertung
0 lesenswert
nicht 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.
for(let d of Array.from(document.querySelectorAll(".disabled input, .disabled textarea")))
  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%);).

Autor: Tim (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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. :/

Autor: Daniel A. (daniel-a)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Dann musst du die verschiedenen Methoden eben kombinieren. Fix fertige 
Lösungen wird dir hier übrigens vermutlich niemand liefern, es geht in 
diesem Forum mehr um Beratung, Diskussion, Möglichkeiten, und mögliche 
Lösungswege.

Autor: Nop (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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 schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.