[S] JS-"Objekt" zum Abdunkeln der ganzen Seite / einzelner DIVs

[Stex]

Hi,

wie der Titel schon sagt bin ich im Moment auf der Suche nach einer JS-Komponente, die ich in die Seite einbinden und dann einfach per Funktionsaufruf ein einzelnes DIV oder auf Wunsch auch die ganze Seite abdunkeln / wieder aufhellen kann. Ich weiß, dass ich das schon gesehen habe, zu dem Zeitpunkt brauchte ich es leider nicht und jetzt finde ich es nicht wieder.

Vielleicht hat jemand dieses Script ja mal benutzt und weiß, wie es heißt bzw. wo ich es finden kann.

Vielen Dank schonmal im Voraus!

 

[ice-breaker]

einer der Scriptaculous effects?

 

[Stex]

In den Scriptaculous-Effekten habe ich nicht gefunden, was ich gesucht habe.

In meinem Falle benötige ich die komplette "Unbrauchbarmachung" eines Divs, da sich ihn selbigem ein Kalender befindet, der eine gewisse Zeit benötigt, um sich per Ajax neue Informationen über zu deaktivierende Tage zu holen.
In der Zeit zwischen Ändern des Monats und der Antwort aus dem Ajax-Request werden leider die alten Tage noch angezeigt und sind anklickbar, daher möchte ich gern in dieser Zeit das DIV, das den Kalender enthält, abdunkeln.

Da ich dafür einen Layer brauche, der über dem Div liegt, könnte ich zwar mit den scriptaculous-effekten den Layer transparenter machen, aber nicht erstellen. Da der Kalender Drag-fähig ist, kann sich somit auch die Position immer wieder ändern.

Das Script, das ich früher mal gesehen hatte, hat automatisch einen Layer erstellt, ihn über das DIV geschoben und den Layer transparent gemacht.

 

[tleilax]

Benutzst Du denn irgendein Framework (Prototype, jQuery) oder müsste alles von Hand gemacht werden? Einen Div derart anzupassen, wie Du es schreibst, ist ja nun nicht so das Riesenproblem:

• Div relativ positionieren
• Als erstes Element in diesem Div einen neuen Div erzeugen mit position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: 0.5; z-index: 1000;.
  Die Positionsangaben greifen dabei nur, wenn der äußere Div per CSS eine feste Höhe und Breite kriegt, ansonsten muss man halt die Werte per JS bestimmen.

Und beim Wegnehmen eben diesen erzeugten Div einfach wieder aus dem DOM entfernen...

 

[Stex]

Danke für deine ausführliche Antwort.

Ich nutze im Moment Prototype. Das Problem im Moment ist, dass der Kalender von einem Script automatisch generiert wird. Ich habe den Vormittag damit zugebracht, zu versuchen, ein DIV um das generierte div class="calendar" zu erstellen und schwarz zu färben. Der Kalender, um den es hier geht ist https://www.dynarch.com/projects/calendar/

Ich habe allerdings nicht versucht, innerhalb des Divs und außerhalb der Tabelle noch ein Div zu erstellen, vielleicht funktioniert das, ich werde es morgen auf der Arbeit mal versuchen.

 

[Stex]

Ha, doppelposting doch noch sinnvoll genutzt *g*

Hat wunderbar geklappt, vielen Dank!

 

[Stex]

Ok, ich habe mich nun mal daran gesetzt, eine javascript-funktion zu schreiben, die genau das macht, was ich gesucht habe.
Das ganze funktioniert im FireFox auch ganz wunderbar, aber der IE weigert sich, das ganze DIV abzudunkeln, sobald im übergeordneten DIV keine feste Breite angegeben ist. Die Höhe kann ich mir über clientHeight holen und selbst der IE kapiert es, aber die Breite muss scheinbar angegeben sein (über clientWidth geht es nicht), sonst verdunkelt er mir nur immer die oberste Zeile meines Divs.

Style:

lightbox.style.position = "absolute";
                lightbox.style.top = 0;
                lightbox.style.bottom = 0;
                lightbox.style.left = 0;
                lightbox.style.right = 0;
                lightbox.style.backgroundColor = "#000";
                lightbox.style.opacity = 0.8;
                lightbox.style.zIndex = 2000;
                lightbox.style.display = "block";
                lightbox.style.filter = "alpha(opacity = 80)"; // IE
                lightbox.style.width = "100%"; //Stupid IE
                lightbox.style.height = document.getElementById(sElementID).clientHeight; // &&&!§&!§"$&!!! IE

Übergeordnetes DIV:

<div id="testdiv" style="position: relative;">Line <br />
Line <br />
Line <br />
Line <br />
Line <br />
Line <br />
Line
</div>

Anzeige im FF3:


Anzeige im IE7:


Hat da noch jemand eine Idee? Im Internet habe ich darüber nichts gefunden


------------------------------------

Edit: Ich hab´s gefunden... Microsoft wieder -.-

Das übergeordnete Div muss die Style-Eigenschaft "hasLayout" im IE haben. Diese wird dem Element automatisch zugeordnet, wenn man ihm bestimmte Eigenschaften zuweist, die da unter anderem wären: Width und Height.
Ich weise dem übergeordneten Div jetzt automatisch "Zoom: 100%" zu, was dazu führt, dass es auf jeden Fall die Eigenschaft "hasLayout" hat und somit auch das Shade-Div korrekt anzeigt.