[DHTML/JS] Eine Ganze Website "disable machen"?

[topfklao]

Hi!

Ich hab mal eine Frage bezüglich eines für mich sehr interessanten AJAX - Effektes:

Und zwar möchte, wenn man einen Klick auf einen Link macht,dass die ganze Seite "disabled" wird.
Ich hab das bis jetzt nur auf einer Seite; nämlich dem Google Calendar gesehen. Also müsste es auch möglich sein

Denke mal mit JavaScript und/ oder CSS usw. Also ein AJAX - Effekt!

Das Beispiel vom Google Kalender kann sich jeder hier anschauen:



Vielen Vielen Dank schon im Vorraus!

 

[wahnsinn]

Ich würde es auf folgende Weise machen:

Einen Layer mit Höhe und Breite 100% vor alles legen. Den musst du dann noch weiß machen und mit einer Teiltransparenz versehen.

Das mit der Transparenz geht leider von Browser zu Browser unterschiedlich, aber mit einer kurzen Google-Anfrage hast du sicher schnell die richtigen Methoden zusammen.

 

[topfklao]

Ich würde es auf folgende Weise machen:

Einen Layer mit Höhe und Breite 100% vor alles legen. Den musst du dann noch weiß machen und mit einer Teiltransparenz versehen.

Das mit der Transparenz geht leider von Browser zu Browser unterschiedlich, aber mit einer kurzen Google-Anfrage hast du sicher schnell die richtigen Methoden zusammen.

Ja an das hät ich auch schon irgendwie gedacht. Das mit Transperenz machen is dann auch wieder so ne Sache...

Naja vielleicht hat noch einer direkt ein Script auf Lager, dass dies erreicht.... Hat ja noch ein bisschen Zeit...

 

[tobias1985]

Ich vermute mal, der Google-Kalender ist nicht mit PHP oder ähnlichem programmiert. Sieht mir doch stark nach Java aus. Und da funktioniert das alles etwas anders.
Ich stelle also einfach mal die Behauptung auf, dass das deaktivieren der Seite mit JavaScript nicht möglich ist.
Die einzige Möglichkeit wäre zu tricksen, wie wahnsinn bereits geschrieben hat. Allerdings ist die Seite dann nicht deaktiviert wie in deinem Beispiel, sondern es liegt einfach nur etwas über der Seite. (Layer)

 

[wahnsinn]

Ich vermute mal, der Google-Kalender ist nicht mit PHP oder ähnlichem programmiert. Sieht mir doch stark nach Java aus. Und da funktioniert das alles etwas anders.

Ich glaub schon, dass das AJAX und irgendwas serverseitiges ist. GMail und die anderen Google-Dienste kommen ja auch mit tollen Funktionen daher, ohne dass das Java-Plugin oder ähnliches gestartet werden muss.

Warum also hier nicht auch?

 

[topfklao]

Ich hoff ich irr jetzt nicht! Aber Google setzt doch auch AJAX Technologie(steht jedenfalls in einer der letzten Chip - Ausgabe) ein. Und da müsst doch Javascript eingesetzt werden.

Aber naja; Google als Messlatte zum Coden hernehmen ist etwas hochgesetzt - Mit PHP und sowas werden die relativ wenig machen.

 

[theHacker]

Ich glaub schon, dass das AJAX und irgendwas serverseitiges ist.

Ihr wisst schon, was AJAX is ?

Auf dem Screen erkenn ich nicht wirklich, was gemeint is, wird sich aber wohl um einen DHTML-Effekt handeln.
Probiert man aus (IE vorausgesetzt) und klickt hier im Forum oben rechts auf "Logout"... ihr werdet den "Windows-Herunterfahren-Graudimmer" sehen. Sowas ähnliches wird das wohl auch sein.

 

[topfklao]

Ja DHTML könnt man auch sagen. Naja bei AJAX wird halt alles miteinander so verknüpft,dass sich schöne Effektchen ergeben...

Und beim Klammforum (im IE ) halt. Ist genau das gleiche, was ich suchen würd...

 

[wahnsinn]

Ihr wisst schon, was AJAX is ?

Ja. Ich schon.

Ich hab ja auch nicht gemeint, dass für die "Deaktivierung" AJAX nötig ist. Ich meinte mit dem von dir zitierten Abschnitt vielmehr die gesamte Funktionsweise des Kalenders.

Für die "Deaktivierung" braucht man kein AJAX. Da reicht ein bisschen DOM und CSS, so wie von mir in meinem ersten Post bereits beschrieben.

 

[theHacker]

Ja DHTML könnt man auch sagen. Naja bei AJAX wird halt alles miteinander so verknüpft,dass sich schöne Effektchen ergeben...

Ne, AJAX bedeutet grob gesagt "Nachladen von Daten ohne Neuladen der Seite".
Bsp im vB3.5: Geh auf neue PN und tipp "theH" als Empfänger ein und warte kurz... das is AJAX

 

[topfklao]

Ne, AJAX bedeutet grob gesagt "Nachladen von Daten ohne Neuladen der Seite".
Bsp im vB3.5: Geh auf neue PN und tipp "theH" als Empfänger ein und warte kurz... das is AJAX

Aha. Aber das erreicht man nur durch Einsatz dieser beschriebenen Techniken!

Aber um zurück zum Thema zu kommen: Weiß jemand wies geht?

 

[wahnsinn]

Aber um zurück zum Thema zu kommen: Weiß jemand wies geht?

Ja. Oben beschrieben.

Aber um dir jetzt den fertigen Code zu bauen bin ich zu faul.

 

[theHacker]

Aber um zurück zum Thema zu kommen: Weiß jemand wies geht?

Steht doch schon da:
- Mozilla etc. bieten dir Transparenz an
- IE hat die Filter (hättet du dir mein Bsp genauer angesehen)

edit:
Um Verwechslungen auszuschließen, tu ich mal das blöde AJAX aus dem Titel raus

 

[topfklao]

Ja. Oben beschrieben.

Aber um dir jetzt den fertigen Code zu bauen bin ich zu faul.

Naja ich würd mich schon für diese Lösung entscheiden. Aber vielleicht gibts ja was einfacheres.
Dann brauch jetzt nicht einen ganzen DIV Bereich machen.


edit:

- IE hat die Filter (hättet du dir mein Bsp genauer angesehen)

Hab mir deine Beispiel genau angeschaut ;-)
Nur: Vielleicht gäbs noch eine andere Lösung....

 

[veers]

Kannst das div ja auch per DOM anlegen wenn dir das lieber ist.

 

[topfklao]

@veers: Da wär mir dann die erste Lösung lieber!

Naja; wahrscheinlich gibts wohl keinen schönen Befehl!

Darum: Danke - vor allem an den Herrn Wahnsinn^^ (super Nick).
Ich wär dann hier fertig!

 

[tleilax]

Auch wenn Du schon fertig bist, lasse ich es mir mal nicht nehmen, ein funktionierendes Beispiel zu posten.

<html>
<head>
<title>"Disable Page"-Layer Demo</title>

<style type="text/css">
<!--
body {
  margin: 0px;
}
#header {
  background-color: red;
  text-align: center;
  font-size: 2em;
}
#blankdiv {
  background-color: #FFF;
  -moz-opacity: 0.5;
  filter:Alpha(opacity=50);
}
#enableDiv {
  border: 1px solid #000;
  background-color: #CCF;
  text-align: center;
  width: 200px;
  cursor: pointer;
}
-->
</style>

<script type="text/javascript">
<!--
function disablePage() {
  var width,height;
  if (self.innerHeight) {
	  width = self.innerWidth;
	  height = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {
	  width = document.documentElement.clientWidth;
	  height = document.documentElement.clientHeight;
  } else if (document.body) {
	  width = document.body.clientWidth;
	  height = document.body.clientHeight;
  }

  var enableDiv = document.createElement("div");
  enableDiv.appendChild( document.createTextNode("und wieder hin") );
  enableDiv.setAttribute("id", "enableDiv");
  enableDiv.style.position = "absolute";
  enableDiv.style.left = Math.floor(width/2)-100;
  enableDiv.style.top = Math.floor(height/2)-20;
  enableDiv.style.zIndex = 2;
  enableDiv.onclick=enablePage;
  document.getElementById("container").insertBefore(enableDiv, document.getElementById("content"));

  var blankDiv = document.createElement("div");
  blankDiv.setAttribute("id", "blankDiv");
  blankDiv.style.position = "absolute";
  blankDiv.style.width = "100%";
  blankDiv.style.height = "100%";
  blankDiv.style.zIndex = 1;
  document.getElementById("container").insertBefore(blankDiv, document.getElementById("content"));
}

function enablePage() {
  var blankDiv = document.getElementById("blankDiv");
  document.getElementById("container").removeChild( blankDiv );
  var blankDiv = document.getElementById("enableDiv");
  document.getElementById("container").removeChild( enableDiv );
}
-->
</script>

</head>
<body>
<div id="container">
  <div id="content">
    <div id="header">foo bar</div>
    <p>
      <button onclick="disablePage();">klick und weg</button>
    </p>
  </div>
</div>  
</body>
</html>

 

[topfklao]

Nein ich hab noch nicht angefangen ;.)

Deshalb danke ich umso mehr!