verena: fade-seitenübergänge bei DIV-inhalten

halli hallo,
ich habe eine einfache seite (links menü, rechts inhalt), die ohne php/asp unterstützung gehostet ist. ich verwende keine frames um die inhalte aufzurufen, sondern ein ajax javascript. so könnt ihr euch meine seite vorstellen:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

alles funktioniert wunderbar, außer dass mit dieser methode keine fließenden seitengänge mehr funktionieren, so wie hier beschrieben:
http://de.selfhtml.org/dhtml/modelle/dynamische_filter.htm#seitenuebergaenge

habt ihr ne idee, wie ich dennoch fließende seitenübergänge (einen fade) hinbekomme?

mit hilfe des Spry framework würde das sicherlich irgendwie gehen, doch dafür bin ich zu blond. hier ist ein beispiel für die vielseiten effekte von Spry (was eigentlich auch nur javascripte sind...):
http://labs.adobe.com/technologies/spry/demos/effects/

vielleicht gibts auch stinknormale javascripts, die beim laden/verlassen die seite faden? hab leider bisher keins gefunden.

also, help appreciated :) vielen dank an euch!

  1. Hallo!

    ich habe eine einfache seite (links menü, rechts inhalt), die ohne php/asp unterstützung gehostet ist. ich verwende keine frames um die inhalte aufzurufen, sondern ein ajax javascript. so könnt ihr euch meine seite vorstellen:

    AJAX ist nicht dafür gedacht, den Inhalt ganzer Seiten auszutauschen. Dafür nimmt man normalerweise ganz normale HTML-Links. Die Vorteile liegen klar auf der Hand: Browser ohne, bzw. mit deaktiviertem JS können die Seite trotzdem anschauen; Suchmaschinen kommen auf deiner Seite weiter...

    http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

    Wie man Links einbindet: http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden :-)

    alles funktioniert wunderbar, außer dass mit dieser methode keine fließenden seitengänge mehr funktionieren, so wie hier beschrieben:
    http://de.selfhtml.org/dhtml/modelle/dynamische_filter.htm#seitenuebergaenge

    Du weißt dass dieses Beispiel nur im IE ab Version 5 funktionieren?

    habt ihr ne idee, wie ich dennoch fließende seitenübergänge (einen fade) hinbekomme?

    Mit JavaScript. Die CSS-Eigenschaft opacity dürfte für dich interessant sein. Die kannst du per JavaScript verändern. Sieht dann zwar auch nicht so aus, wie der Filter von Microsoft aber ich kenne keine andere Möglichkeit um einen Übergang zu erzwingen. Da der IE AFAIK bis Version 7 die Eigenschaft opacity nicht kennt musst du ein bisschen tricksen. Du kannst den Alpha-Filter benützen. Suche mal im Internet und bei SELFHTML.

    ciao, ww

    --
    Schäuble:
      "Wir können alles. Außer Rechtsstaat."
    1. hallo ww, erstmal ein dickes dankeschön, du hast mir richtig weitergeholfen. ich habe mir ein funktionierendes fade-script gebastelt, das bei firefox die opacity verändert und beim IE den fade effekt mittels style simuliert. funktioniert sogar bei mir (habe slimbrowser mit IE6 als basis).
      jedoch gibts immer noch ein problem: mal abgesehen davon, dass der fade effekt nicht so viel fps hat wie der microsoft filter (ist aber nicht schlimm), wird beim laden der seite im DIV mittels diesem ajax script leider nichts gefaded.
      du hast schon recht, die methode is eigentlich total unpraktisch für meinen verwendungszweck und ich könnte mir auch einfach frames basteln, aber ich wollte es unbedingt so hinkriegen.
      ich schätze mal das problem liegt daran, dass nicht die komplette seite als HTML seite geladen wird, sondern nur der body-teil als inhalt. der inhalt wird dann mit dem bereits gecachten CSS-file gepimpt und schon sieht die reingeladene seite perfekt aus. aber weil eben nicht der head beachtet wird, ist wohl die einzige möglichkeit eines fades mittels style möglich, den ich unabhängig vom globalen CSS-file in die einzubindende seite schreibe. aber der style steht ja auch im head, also würde das überhaupt gehen?
      wie gesagt, wenns unmöglich ist, dann steig ich auf frames um und sage herzlichen dank fürs kopf zerbrechen :))

      V.

      1. Hallo!

        hallo ww, erstmal ein dickes dankeschön, du hast mir richtig weitergeholfen.

        Bitte :)

        jedoch gibts immer noch ein problem: mal abgesehen davon, dass der fade effekt nicht so viel fps hat wie der microsoft filter (ist aber nicht schlimm),

        Was meinst du mit FPs?

        wird beim laden der seite im DIV mittels diesem ajax script leider nichts gefaded.

        Du meinst, wenn du den Content mittels AJAX in deine HTML-Seite lädst?

        Du hast doch sicherlich eine JavaScript-Funktion, die das Faden der Seite übernimmt. Diese rufst du eben nach dem Laden des Contents auf.

        Wenn das nicht des Rätsels Lösung ist, dann beschreibe bitte etwas genauer, was das Problem ist.

        du hast schon recht, die methode is eigentlich total unpraktisch für meinen verwendungszweck und ich könnte mir auch einfach frames basteln, aber ich wollte es unbedingt so hinkriegen.

        Von Frames solltest du generell die Finger lassen ;) Warum willst du denn keine normale HTML-Seiten benützen? Vielleicht hilft dir das: Quelltext auslagern. Du kannst das auch mit jeder anderen serverseitigen Sprache machen. Bei PHP z.B. mit include.

        ich schätze mal das problem liegt daran, dass nicht die komplette seite als HTML seite geladen wird, sondern nur der body-teil als inhalt.

        Dann rufe in (bzw. nach) der Funktion, die das Laden veranlasst, die Fade-Funktion auf.

        aber weil eben nicht der head beachtet wird, ist wohl die einzige möglichkeit eines fades mittels style möglich, den ich unabhängig vom globalen CSS-file in die einzubindende seite schreibe. aber der style steht ja auch im head, also würde das überhaupt gehen?

        Nein, so wie du dir das vorstellst geht das mMn nicht. Du kannst z.B. den opacity-Wert für den Container mit den neugeladenen Inhalten auf 0 setzen und danach mit deinem Fade-Script den Wert wieder fließend auf 1 hochsetzen. Aber einen eigenen <style>-Bereich dafür schreiben geht nicht.

        wie gesagt, wenns unmöglich ist, dann steig ich auf frames um

        Ich zitiere: "******. Nichts ist unmöglich" ;-)) Aber lass bloß die Finger von den bösen Frames :-) Damit hast du nur Nachteile. Und die vermeintlichen Vorteile kannst du auf besseren Wegen auch haben.

        ciao, ww

        --
        Schäuble:
          "Wir können alles. Außer Rechtsstaat."