Muh: Kompatibilitätsproblem Firefox

Ich versuche ein JavaApplet mittels JavaScript immer so zu skalieren, das die Bildproportion des Applets erhalten bleibt. Folgender Script funktioniert im IE, nicht aber im Firefox ..kann mir jemand weiterhelfen ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
        <title>applet html page</title>  
        <style type="text/css">  
            body {  
                overflow: hidden;  
                margin:0;  
                padding:0;  
            }  
            #javaapp {  
                position: relative;  
                margin:0;  
                padding:0;  
            }  
        </style>  
  
        <script type="text/javascript">  
            onresize = BodyGroesse;  
            function BodyGroesse () {  
                var Breite = document.body.offsetWidth;  
                var Hoehe = Breite/16*9;  
  
                if (Hoehe > document.body.offsetHeight) {  
                  Hoehe = document.body.offsetHeight;  
                  document.getElementById('JavaFenster').height = Hoehe;  
                  Breite = Hoehe*16/9;  
                  document.getElementById('JavaFenster').width = Breite;  
                } else {  
                  document.getElementById('JavaFenster').width = Breite;  
                  document.getElementById('JavaFenster').height = Hoehe;  
                }  
            }  
  
        </script>  
  
    </head>  
    <body>  
        <div id="JavaApp">  
            <applet id="JavaFenster" codebase="classes" code="GUI/StartGui.class" ></applet>  
        </div>  
  
        <script type="text/javascript">BodyGroesse();</script>  
  
    </body>  
</html>
  1. @@Muh:

    nuqneH

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    Transitional-Doctype ohne System-Identifier schaltet Browser in den Quirksmodus. Gib den <http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Doctype vollständig> an!

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@Muh:

      nuqneH

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      Transitional-Doctype ohne System-Identifier schaltet Browser in den Quirksmodus. Gib den <http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Doctype vollständig> an!

      Qapla'

      danke, habe ich korrigiert. Fehler besteht aber nach wie vor .... es ist sogar so das es jetzt mit richtiger doctype Zeile überhaupt nichts mehr geht, also in keinem Browser ^^ ohne doctype tuts zumindest im IE ....

      was tun ?

      1. Hi,

        es ist sogar so das es jetzt mit richtiger doctype Zeile überhaupt nichts mehr geht, also in keinem Browser ^^ ohne doctype tuts zumindest im IE ....

        Jetzt toleriert der IE deine fehlerhaften Höhen- und Breitenangaben, die du per Javascript setzt, eben auch nicht mehr.

        DAU-Nachhilfe: Längenangaben in CSS erfordern bei einem Wert ungleich 0 *immer* eine Einheit.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. @@ChrisB:

          nuqneH

          Längenangaben in CSS erfordern bei einem Wert ungleich 0 *immer* eine Einheit.

          Zum Nachlesen: [CSS21 §4.3.2]

          Oder auf deutsch (an der Stelle wird sich ja nicht viel geändert haben): [CSS2 §4.3.2]

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. danke für den Hinweis .. aber ich glaube nicht das dies der Grund ist warum es nicht geht ...

            folgender vereinfachter Code funktioniert nämlich sowohl im Firefox als auch im IE und beachtet auch keine einheiten ... :/

            was ich will ist diesen vereinfachten code um eine zusätzliche weiche verstärken der nicht nur auf breitenänderunng sondern auch auf höhenänderungen skaliert ...

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
              
            <html>  
                <head>  
                    <title>applet html page</title>  
                    <style type="text/css">  
                        body {  
                            overflow: hidden;  
                            margin:0%;  
                            padding:0%;  
                        }  
                        #javaapp {  
                            position: relative;  
                            margin:0%;  
                            padding:0%;  
                        }  
                    </style>  
              
                    <script type="text/javascript">  
                        onresize = BodyGroesse;  
                        function BodyGroesse () {  
                            var Breite = document.body.offsetWidth;  
                            var Hoehe = Breite/16*9;  
              
                            document.getElementById('JavaFenster').width = Breite;  
                            document.getElementById('JavaFenster').height = Hoehe;  
              
                        }  
              
                    </script>  
              
                </head>  
                <body>  
                    <div id="JavaApp">  
                        <applet id="JavaFenster" codebase="classes" code="GUI/StartGui.class" ></applet>  
                    </div>  
              
                   <script type="text/javascript">BodyGroesse();</script>  
              
                </body>  
            </html>
            

            @@ChrisB:

            nuqneH

            Längenangaben in CSS erfordern bei einem Wert ungleich 0 *immer* eine Einheit.

            Zum Nachlesen: [CSS21 §4.3.2]

            Oder auf deutsch (an der Stelle wird sich ja nicht viel geändert haben): [CSS2 §4.3.2]

            Qapla'

            1. @@Muh:

              nuqneH

              Längenangaben in CSS erfordern bei einem Wert ungleich 0 *immer* eine Einheit.

              folgender vereinfachter Code funktioniert nämlich sowohl im Firefox als auch im IE und beachtet auch keine einheiten ... :/

              Ähm ja, wir sind ja auch nicht in CSS …

              document.getElementById('JavaFenster').width = Breite;
                              document.getElementById('JavaFenster').height = Hoehe;

              … du setzt ja nicht .style.width bzw. .style.height.

              BTW, es ist unsinnig, document.getElementById('JavaFenster') wieder und wieder aufs DOM loszulassen. Das sollte man einmal tun und sich die Referenz auf das Elementobjekt in einer Variablen merken:

              var javaFensterElement = document.getElementById('JavaFenster');

              und dann

              javaFensterElement.width = Breite;  
              javaFensterElement.height = Hoehe;
              

              Qapla'

              PS: Bitte kein TOFU!

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. BTW, es ist unsinnig, document.getElementById('JavaFenster') wieder und wieder aufs DOM loszulassen. Das sollte man einmal tun und sich die Referenz auf das Elementobjekt in einer Variablen merken:

                var javaFensterElement = document.getElementById('JavaFenster');

                und dann

                javaFensterElement.width = Breite;

                javaFensterElement.height = Hoehe;

                  
                gut das werde ich dankend übernehmen :D  
                  
                
                > PS: Bitte kein [TOFU](http://de.wikipedia.org/wiki/TOFU)!  
                  
                das auch ;D  
                  
                  
                löst beides aber wohl nicht wirklich mein Problem ^^  
                wieso ist "mein document.body.offsetHeight" meines ursprünglichen Versuches immer auf 200 ???
                
                1. Hi,

                  wieso ist "mein document.body.offsetHeight" meines ursprünglichen Versuches immer auf 200 ???

                  https://forum.selfhtml.org/?t=205930&m=1396990

                  MfG ChrisB

                  --
                  RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        2. Hi,

          es ist sogar so das es jetzt mit richtiger doctype Zeile überhaupt nichts mehr geht, also in keinem Browser ^^ ohne doctype tuts zumindest im IE ....

          Jetzt toleriert der IE deine fehlerhaften Höhen- und Breitenangaben, die du per Javascript setzt, eben auch nicht mehr.

          DAU-Nachhilfe: Längenangaben in CSS erfordern bei einem Wert ungleich 0 *immer* eine Einheit.

          MfG ChrisB

          stimmt nicht ..siehe vereinfachten code weiter unten ...

          DAU-Nachhilfe: Es sind nicht immer die kleinen Fehler an allem schuld ;D

          MfG
          Holger

          1. Hi,

            Jetzt toleriert der IE deine fehlerhaften Höhen- und Breitenangaben, die du per Javascript setzt, eben auch nicht mehr.

            DAU-Nachhilfe: Längenangaben in CSS erfordern bei einem Wert ungleich 0 *immer* eine Einheit.

            stimmt nicht ..siehe vereinfachten code weiter unten ...

            Sorry, mein Fehler - du arbeitest dort ja gar nicht mit CSS, sondern setzt direkt HTML-Attributes des applet-Elements.

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
  2. Der Wert document.body.offsetHeight hat immer 200 ... wie kann das sein .. ich glaube das hier der Fehler liegt ...

    was kann ich tun ?

    1. Yerf!

      was kann ich tun ?

      Dem Body eine Höhe geben, denn momentan hat er keine und damit nimmt er die Ausgangsgröße seines Inhalts (das Applet im Ladezustand) an.

      Die Gewünschte Höhe dürfte wohl 100% sein, wobei sich das auf das Elternelement bezieht. Damit musst du dem html-Element auch 100% geben.

      Gruß,

      Harlequin

      --
      RIP --- XHTML 2
      nur die Besten sterben jung
      1. Hab ich alles gemacht .. leider ohne erfolg .. hier der neue Code mit dem selben Problem, die alerst sind nur zum debuggen drin udn zeigen die falschen werte ;/ :

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
          
        <html height="100%">  
            <head>  
                <title>applet html page</title>  
          
                <style type="text/css">  
                    body {  
                        overflow: hidden;  
                        margin:0%;  
                        padding:0%;  
                        height:100%;  
                    }  
                    #javaapp {  
                        position: relative;  
                        margin:0%;  
                        padding:0%;  
                    }  
                </style>  
          
                <script type="text/javascript">  
                    var Breite, Hoehe;  
                    var Fenster = document.getElementById('JavaFenster');  
          
                    function BodyGroesse () {  
                        Breite = document.body.offsetWidth;  
                        Hoehe = Breite/16*9;  
                        alert(Breite);  
                        alert(Hoehe);  
          
          
                        if (Hoehe > document.body.offsetHeight) {  
                          alert(document.body.offsetHeight);  
                          Hoehe = document.body.offsetHeight;  
                          Breite = Hoehe*16/9;  
                          Fenster.height = Hoehe;  
                          Fenster.width = Breite;  
                        } else {  
                          alert('bbb');  
                          Fenster.width = Breite;  
                          Fenster.height = Hoehe;  
                        }  
                        onresize = BodyGroesse;  
                     }  
                </script>  
            </head>  
            <body>  
                <div id="JavaApp">  
                    <applet id="JavaFenster" codebase="classes" code="GUI/StartGui.class" ></applet>  
                </div>  
               <script type="text/javascript">BodyGroesse();</script>  
            </body>  
        </html>
        
        1. Hi,

          Hab ich alles gemacht ..

          Nein, hast du nicht.
          Lies den letzten Satz von Harlequins Hinweis noch mal.

          MfG ChrisB

          --
          RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
          1. Hi,

            Hab ich alles gemacht ..

            Nein, hast du nicht.

            OK, *versucht* hast du es ... aber html hat kein height-Attribut. Nutze CSS.

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
            1. OK, *versucht* hast du es ... aber html hat kein height-Attribut. Nutze CSS.

              Yo hab ich , danke für den Hinweis...

              lustigerweise geschieht jetzt folgendes:

              die alerts stimmen unter firefox alle, trotzdem wird das applet wieder stark verkleinert

              unter IE gehts anders als im firefox direkt in die else verzweigung

              *verzweifel*

              1. Hi,

                die alerts stimmen unter firefox alle, trotzdem wird das applet wieder stark verkleinert

                Sollte ja kein Problem sein, mit den tatsächlichen Werten den Scriptablauf und die berechneten/gesetzten Werte nachzuvollziehen.

                unter IE gehts anders als im firefox direkt in die else verzweigung

                Und was ergab die Kontrolle der Werte da?

                MfG ChrisB

                --
                RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        2. Yerf!

          <html height="100%">

          Wie ChrisB schon gesagt hat: nutze auch hierfür CSS.

          Gruß,

          Harlequin

          --
          RIP --- XHTML 2
          nur die Besten sterben jung
  3. var Breite = document.body.offsetWidth;

    Di übliche Methode ist
    window.innerWidth und window.innerHeight
    und alternativ für Browser, die das nicht kennen,
    document.documentElement.clientWidth und document.documentElement.clientHeight
    verwenden.
    (Für IE < 6 bzw. IEs im Quirks-Modus bräuchte man noch document.body.clientWidth/Height, aber das kann man sich heute wohl sparen.)
    document.documentElement liefert das html-Element.

    Siehe
    innerWidth/Height
    http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

    Mathias