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
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.
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%);).
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. :/
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.
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.
Beitrag #6096400 wurde von einem Moderator gelöscht.
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.