Thomas: Flackern, Anzeigeverzögerung

Liebe versammelte Fachmänner und -frauen: Ich habe zwei Fragen zu zwei mir nicht ganz erklärlichen Phänomenen. Es geht um mein jüngstes Projekt, eine Sudoku-Variante in dynamischem HTML, die (anders als viele andere) neue Sudokus _errechnet_ und daher bei der Überprüfung der fertigen Lösungen nicht einfach auf Passung mit einer vorgegebenen Lösung hin überprüft, sondern tatsächlich die Einhaltung der Regeln kontrolliert. (Auf diese Weise können, falls möglich, auch unterschiedliche Lösungen als richtig gewertet werden, falls alle Regeln eingehalten wurden.)

So weit, so gut - die Version 1.0 steht und rechnet richtig. Aber in der Darstellung treten zwei Unschönheiten auf.

1. In Internet Explorer flackert die Anzeige nach jeder Zifferneingabe kurz auf. Das liegt sicherlich daran, dass nach jeder Eingabe die gesamte Bildschirmanzeige erneuert wird - etwas unschön, ich weiss es wohl. Auszug:

display="[längere HTML-Sequenz]";
document.getElementById("Id").innerHTML=display;

(Das gesamte Skript steht unter http://www.mah-jongg.ch/sudoku/source.js)

Mich befremdet dieses Flackern, weil es in meinem grösseren Spiel, Mahjongg Solitaire unter http://www.mah-jongg.ch, nicht auftritt, obwohl da _noch wesentlich mehr_ Elemente und Code immer wieder neu geladen werden. Also: Was mache ich hier falsch?

2. In Safari/Apple Macintosh werden die mittels CSS formatierten Eingabefelder nicht richtig dargestellt - die Borders werden trotz Setzens auf Null dargestellt, die Zentrierung der Eingaben funktioniert nicht und der Hintergrund ist auch nicht transparent, wie er eigentlich sein sollte. Mozilla Firefox 1.5.x stellt alles richtig dar. Hier meine Frage: Kann es sein, dass Safari CSS nicht vollständig unterstützt? Wohl kaum - viel eher ist mein Code fehlerhaft. Wo? Das Stylesheet steht hier:

http://www.mah-jongg.ch/sudoku/format.css

Mit grossem Dank vorneweg! Thomas

  1. Hallo Thomas,

    ... eine Sudoku-Variante in dynamischem HTML, die (anders als viele andere) neue Sudokus _errechnet_ ...

    also so etwas: http://www.j-berkemeier.de/Sudoku.html.

    Zu Deinem Problem: ich konnte es nicht nachvollziehen (FF1.5). Ich habe einige Zahlen eingegeben und es hat nichts geflackert.

    Ich habe Dein JS jetzt nicht komplett durchgesehen, daher meine Frage: Baust du das ganze Sudoku bei jeder Eingabe neu auf? Ich kümmere mich bei meiner Variante nur um das jeweilige Eingabefeld.

    Gruß, Jürgen

    PS: Mit welchem Algorithmus berechnest du das Sudoku?

    1. Zu Deinem Problem: ich konnte es nicht nachvollziehen (FF1.5). Ich habe einige Zahlen eingegeben und es hat nichts geflackert.

      MSIE flackert auf einigen Systemen; Firefox dagegen tut genau das, was ich von ihm möchte. Weshalb der IE flackert, kann ich nicht nachvollziehen - Extras, Internetoptionen, Temporäre Internetdateien, Einstellungen steht auf "Automatisch", wie's sein soll.

      Ich habe Dein JS jetzt nicht komplett durchgesehen, daher meine Frage: Baust du das ganze Sudoku bei jeder Eingabe neu auf?

      Ja, bei mir wird das ganze Feld neu aufgebaut, weil's doch recht wenig Code ist und ausser dem Hintergrund keine Bilder geladen werden müssen.

      PS: Mit welchem Algorithmus berechnest du das Sudoku?

      Der von mir angewendete Algorithmus ist in Wikipedia als "3. Weg" beschrieben.

      http://de.wikipedia.org/wiki/Sudoku#Algorithmus

      Ausgehend von einem Basis-Sudoku habe ich insgesamt 47 Transformationen geschrieben, die (jede für sich) die Integrität des Puzzles nicht antasten. n-mal wird danach zufällig eine dieser Transformationen angewandt, und zum Schluss werden - abhängig vom gewählten Schwierigkeitsgrad - x Ziffern durch Eingabefelder ersetzt.

      Herzlich, Thomas

      1. Hallo Thomas,

        MSIE flackert auf einigen Systemen; Firefox dagegen tut genau das, was ich von ihm möchte. Weshalb der IE flackert, kann ich nicht nachvollziehen - Extras, Internetoptionen, Temporäre Internetdateien, Einstellungen steht auf "Automatisch", wie's sein soll.

        ich habe mal meinen IE hervorgeholt, bei mir flackert es auch.

        Ich habe Dein JS jetzt nicht komplett durchgesehen, daher meine Frage: Baust du das ganze Sudoku bei jeder Eingabe neu auf?

        Ja, bei mir wird das ganze Feld neu aufgebaut, weil's doch recht wenig Code ist und ausser dem Hintergrund keine Bilder geladen werden müssen.

        Ich glaube, hier liegt das Problem. Es muss das ganze "innerHTML" interpretiert und die ganze Tabelle muss neu aufgebaut werden, das "dauert" eben seine Zeit. Warum kümmerst du dich nicht nur um das aktuelle Feld, es müssen doch nur value und Farbe geändert werden. An das jeweilige input-Element kommst du z.B. über "this".

        PS: Mit welchem Algorithmus berechnest du das Sudoku?

        Der von mir angewendete Algorithmus ist in Wikipedia als "3. Weg" beschrieben.

        Danke. Die Seite habe ich mir auch schon zu Gemüte geführt. Eine einfachere Version verwende ich als schnellen Generator.

        Gruß, Jürgen

        1. Ich glaube, hier liegt das Problem. Es muss das ganze "innerHTML" interpretiert und die ganze Tabelle muss neu aufgebaut werden, das "dauert" eben seine Zeit. Warum kümmerst du dich nicht nur um das aktuelle Feld, es müssen doch nur value und Farbe geändert werden. An das jeweilige input-Element kommst du z.B. über "this".

          Das ist ohne Zweifel richtig, Jürgen. Da ich aber auch im gleichen Atemzug auch noch andere Elemente verändere (Inputs, Statuszeile, ggf. künftig auch Menubar), halte ich den Neuaufbau des ganzen innerHTML für effizienter.

          Das Problem erwies sich am Schluss als ganz etwas anderes: Ich hatte es (shame on me!) unterlassen, einen Image-Preloader fürs Hintergrundbild zu schreiben. Jetzt ist der drin und das Flackern im IE Geschichte. Trotzdem: Dank! Herzlich, Thomas

          1. Hallo Thomas,

            ... halte ich den Neuaufbau des ganzen innerHTML für effizienter.

            da sieht meine Erfahrung anders aus. Bei einfachen Gebilden , z.B. Text mit Auszeichnungen wie strong, ist innerHTML recht flink, bei komplexen Gebilden, wie z.B. ganzen Tabellen, ist es effektiver, sich nur um die Inhalte der TDs zu kümmern.

            Gruß, Jürgen

            1. da sieht meine Erfahrung anders aus. Bei einfachen Gebilden , z.B. Text mit Auszeichnungen wie strong, ist innerHTML recht flink, bei komplexen Gebilden, wie z.B. ganzen Tabellen, ist es effektiver, sich nur um die Inhalte der TDs zu kümmern.

              Stattgegeben, lieber Jürgen. Allerdings ist bei einer einfachen Tabelle wie meinem Sudoku der Unterschied auf heutigen Rechnern kaum mehr auszumachen. Aber Du hast Recht: Eleganter ist Dein Weg tatsächlich.

              In meinem Fall (Anzeige-Flackern) aber lag der Fall allem voran bei einem (blödsinnigerweise) fehlenden Image-Preloader.

  2. Hallo Thomas.

    1. In Safari/Apple Macintosh werden die mittels CSS formatierten Eingabefelder nicht richtig dargestellt […]

    Doch, durchaus. Nämlich konsistent zur restlichen GUI.

    Safari lässt Formularelemente außer button absichtlich nicht per CSS formatieren. Denn dadurch sehen die Formularelemente genauso aus, wie es der Nutzer von den Bedienelementen in seiner Benutzeroberfläche gewohnt ist. Und das ist gewollt.

    Einen schönen Montag noch.

    Gruß, Mathias

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]