graue "Wait" Webseite

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • graue "Wait" Webseite

    Hallo,

    ich bin heute in einer Intranet-Anwendung auf einen netten Effekt gestossen, den ich gerne für ein eigenes Projekt nutzen möchte. Leider weis ich aber nicht, wie das dort realisiert wurde und ich hatte keine Möglichkeit mir den Source der Seite anzuschaun.

    Jedesmal wenn man auf der Seite eine Aktion ausgeführt hat, ist, so lange man auf die Ausführung der Aktion warten musste, die ganze Webseite grau geworden. War die Aktion zu ende, wurde die Seite wieder farbig.

    Also z.B. wenn ich nach etwas gesucht habe, wurde die Seite so lange grau, bis das Suchergebnis da war.

    Ich denke mal der Effek wurde über Ajax getriggert, das sollte nicht so das Problem sein. Aber wie kann man es erreichen, das die ganze Seite grau wird? Gibt es da irgend eine Filter-Möglichkeit? Sicher, man könnte ein anderes Stylesheet zuweisen, in dem alle Farben in Grauwerte umgesetzt sind, aber ich bin mir ziemlich sicher, das das irgendwie anders realisiert wurde.

    70abc

    PS: Konnte das Ganze nur im IE testen, könnte also sein, das es etwas Spezielles für den IE ist...

  • hehe, du bist nicht zufälligerweise mit nem XGL Linux oder einer Beta von [coderwiki]Informationen/Vista[/coderwiki] unterwegs, oder?
    dort werden Wartezeiten oder Überlastungen auch durch graufärben der Oberfläche angezeigt

    online habe ich sowas noch nie gesehen.. allein beim wort alpha blending im browser laufen bei mir schon die lüfter an *gg*

    nichts desto trotz hab ich mal was dazu erstellt
    funktioniert sowohl mit Mozilla (über MozOpacity) als auch mit IE (img.filters.alpha.opacity)

    Quellcode

    1. <html>
    3. <head>
    5. <title>Alpha-Fading</title>
    6. <style type="text/css">
    7. <!--
    8. #grey {
    9. position:absolute;
    10. left:0px;
    11. top:0px;
    12. width:100%;
    13. height:100%;
    14. background-color:#afafaf;
    15. display:none;
    16. }
    17. //-->
    18. </style>
    21. <script type="text/javascript">
    23. function increase() {
    25. theobject = document.getElementById('grey');
    26. theobject.style.display="block";
    28. highlighting = setInterval("highlight(theobject)",75); // Erhoehe diesen Wert um den Effekt zu verlangsamen
    30. }
    32. function abort() {
    34. img = document.getElementById('grey');
    35. img.style.display="none";
    37. img.style.MozOpacity = 0.0;
    38. if (img.filters)
    40. img.filters.alpha.opacity = 0;
    43. }
    47. function highlight(img) {
    48. // Maximale Transparenz = 50%
    50. if (img.style.MozOpacity < 0.5)
    52. img.style.MozOpacity = parseFloat(img.style.MozOpacity) + 0.01;
    55. else if (img.filters && img.filters.alpha.opacity < 50)
    57. img.filters.alpha.opacity += 1;
    60. else if (window.highlighting)
    62. clearInterval(highlighting);
    64. }
    66. </script>
    68. </head>
    70. <body>
    73. <center><div style="width:300px;"><a href="#" onclick="increase()">Start</a>
    75. <br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lorem. Curabitur dui velit, accumsan interdum, nonummy vitae, ullamcorper in, risus. Ut et turpis ut libero bibendum egestas. Maecenas pulvinar. Vestibulum faucibus, nunc ut egestas tincidunt, <a href="">pede</a> est scelerisque sem, vitae posuere arcu quam vulputate ipsum. Fusce elit. Nam vulputate mi ac velit. Integer porta. Etiam sit amet lectus non orci faucibus aliquam. Mauris suscipit ullamcorper nisi. Donec molestie suscipit turpis.</div></center>
    78. <div style="filter:alpha(opacity=0);-moz-opacity:0.0" id="grey" onClick="abort()"></div>
    79. </body>
    80. </html>
    Alles anzeigen

  • "d0nUt" schrieb:


    online habe ich sowas noch nie gesehen.. allein beim wort alpha blending im browser laufen bei mir schon die lüfter an *gg*

    nichts desto trotz hab ich mal was dazu erstellt
    funktioniert sowohl mit Mozilla (über MozOpacity) als auch mit IE (img.filters.alpha.opacity)


    Danke für den Versuch, aber das war's leider nicht so ganz... Du überlagerst ja mehr oder weniger mit Grau, aber die Website wurde wirklich richtig grau, als wie wenn man ein Bild in Graustufen umwandelt...

    Mal sehen, vielleicht habe ich nochmal die Möglichkeit an den Source zu kommen

  • Das ist Lightbox... davon ist gerade ne neue Version raus. Lightbox V2, das teilt rockt ziemlich :) Mich ärgert bloss das es auf der prototype bibliothek basiert, da ich es nicht nutzen mag. Daher empfehle ich eigentlich jedem Thickbox ( auch gerade V2 raus ) das bibliothek von thickbox -> JQUERY ist gerade mal 15 KB gross :) zusammen macht das 25 KB. Im Unterschied dazu ist lightbox + prototype über 60, 70 KB gross. Man bedenke, das bei vielen user, das ziemlich traffic erzeugt.

    Naja schauts euch an :)

    siehe Linke: Klick mich

    Da kannste dir das auch Downloaden, brauchst net anderen source durchstöbern 8)

  • Grüß Euch!

    Ich hab das Ganze auch mal selbst realisiert, dafür braucht man nich mal prototype, denn was diese Libs alle machen, ist eine Überlagerung mit einem durchsichtigen "Layer".

    Ist eigentlich ein sehr nettes Feature. Allerdings bekommt man dann Probleme, wenn man eine Fortschrittsanzeige oder ein anim. gif verwenden möchte, und länger dauernde Veränderungen am DOM vornimmt, bzw. der Browser neu rendern muss... Denn in diesem Fall wird der Browser solange keine animated gifs anzeigen, bis der Renderprozess abgeschlossen ist, und man sieht keinen Fortschritt.

    Sollte das doch jmd hinbekommen, hätte ich gerne ne Info, wie ;)