Jörg: Bildübergang tutorial Felix nicht mehr aktuell?

Hi,

ich beziehe mich mal auf:
http://forum.de.selfhtml.org/archiv/2008/9/t177181/

und somit auf:
http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/

Die dortigen Beispiele erzeugen bei meinem Browser ( IE 10 ) keine Übergänge, nur Bildfolgen ohne Übergang. Bedeutet das, die Technik/Scripte in dem Tutorial sind veraltet oder macht der Browser Probleme?

  1. Hallo,

    Die dortigen Beispiele erzeugen bei meinem Browser ( IE 10 ) keine Übergänge, nur Bildfolgen ohne Übergang.

    Die Positionierung der Bilder ist falsch. Das ist wahrscheinlich bloß ein CSS-Problem. Es liegt daran, dass hier mit Inline- anstatt Block-Elementen gearbeitet wird, die relativ absolute zu einem Inline-Element positioniert werden. Es dürfte kein Problem sein, diesen Fehler zu beheben. Warum nur IE 10 hier bei position: absolute; top: 0; ein anderen Koordinatenursprung wählt, verstehe ich nicht.

    Bedeutet das, die Technik/Scripte in dem Tutorial sind veraltet oder macht der Browser Probleme?

    JavaScript-basierte Animationen mit setTimeout/style sind konzeptionell veraltet, ja. Dafür gibt es requestAnimationFrame oder besser CSS-Transitions.

    Allerdings sind Animationen mit setTimeout/style immer noch die sichersten, die browserübergreifend zu guten und gleichwertigen Ergebnissen führen. Keine Animation kommt ohne einen solchen Fallback aus, es sei denn, man verzichtet in älteren Browsern auf sie.

    Mathias

    1. Hi,

      Die dortigen Beispiele erzeugen bei meinem Browser ( IE 10 ) keine Übergänge, nur Bildfolgen ohne Übergang.

      Die Positionierung der Bilder ist falsch. Das ist wahrscheinlich bloß ein CSS-Problem. Es liegt daran, dass hier mit Inline- anstatt Block-Elementen gearbeitet wird, die relativ absolute zu einem Inline-Element positioniert werden. Es dürfte kein Problem sein, diesen Fehler zu beheben. Warum nur IE 10 hier bei position: absolute; top: 0; ein anderen Koordinatenursprung wählt, verstehe ich nicht.

      hmmm, verstehe jetzt zwar nicht, was das mit den Fadings zu tun haben soll, aber gut habe es trotzdem mal geändert. Doch nach wie vor direkte Einblendung, kein Übergang.

      Bedeutet das, die Technik/Scripte in dem Tutorial sind veraltet oder macht der Browser Probleme?

      Allerdings sind Animationen mit setTimeout/style immer noch die sichersten, die browserübergreifend zu guten und gleichwertigen Ergebnissen führen. Keine Animation kommt ohne einen solchen Fallback aus, es sei denn, man verzichtet in älteren Browsern auf sie.

      Ja, genau deshalb suche ich danach.

      Gruss
      Jörg

      1. Om nah hoo pez nyeetz, Jörg!

        Die dortigen Beispiele erzeugen bei meinem Browser ( IE 10 ) keine Übergänge, nur Bildfolgen ohne Übergang.

        http://wiki.selfhtml.org/mediawiki/extensions/SELFHTML/example.php/Beispiel:Fader-Framework_Slideshow.html erzeugt weiche Übergänge im IE10.

        Die Positionierung der Bilder ist falsch. Das ist wahrscheinlich bloß ein CSS-Problem. Es liegt daran, dass hier mit Inline- anstatt Block-Elementen gearbeitet wird, die relativ absolute zu einem Inline-Element positioniert werden. Es dürfte kein Problem sein, diesen Fehler zu beheben.

        etwa durch Verwendung eines passenden block-Elementes oder display: block für .fader (letzteres getestet und für gut befunden in http://wiki.selfhtml.org/mediawiki/extensions/SELFHTML/example.php/Beispiel:Fader-Framework_Endergebnis.html

        hmmm, verstehe jetzt zwar nicht, was das mit den Fadings zu tun haben soll, aber gut habe es trotzdem mal geändert. Doch nach wie vor direkte Einblendung, kein Übergang.

        Der Übergang findet statt, bevor das neue Bild an die richtige Stelle kommt, deshalb siehst du ihn nicht.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen äh und ähnlich.

        1. Hallo Matthias,

          http://wiki.selfhtml.org/mediawiki/extensions/SELFHTML/example.php/Beispiel:Fader-Framework_Slideshow.html erzeugt weiche Übergänge im IE10.

          danke, ja das funktioniert so weit mit minimalem Effekt. Leider schreibst Du Javascript in Kurzschreibweise (blick da noch nicht richtig durch). Ich versuche noch die Überblendeffekte klarer heraus zu stellen. also in bissschen an den Steps zu versuchen, bisher leider noch ohne Erfolg.

          etwa durch Verwendung eines passenden block-Elementes oder display: block für .fader (letzteres getestet und für gut befunden in http://wiki.selfhtml.org/mediawiki/extensions/SELFHTML/example.php/Beispiel:Fader-Framework_Endergebnis.html

          Das geht im IE10 gar nicht, nur tanzende Seite. Im FF geht's, allerdings sind auch hier die Überblendungen fast nur zu erahnen.

          Dank dir für deine Mühe
          Jörg

          1. Om nah hoo pez nyeetz, Jörg!

            etwa durch Verwendung eines passenden block-Elementes oder display: block für .fader (letzteres getestet und für gut befunden in http://wiki.selfhtml.org/mediawiki/extensions/SELFHTML/example.php/Beispiel:Fader-Framework_Endergebnis.html

            Das geht im IE10 gar nicht, nur tanzende Seite. Im FF geht's, allerdings sind auch hier die Überblendungen fast nur zu erahnen.

            Das kann ich beides nicht bestätigen.

            Ich habe mit den Entwicklertools ([F12]) lediglich für .fader display: block; gesetzt.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kot und Kotelett.