Kompatibilitätsproblem Firefox
Muh
- javascript
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>
@@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'
@@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 ?
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
@@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'
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'
@@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!
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 ???
Hi,
wieso ist "mein document.body.offsetHeight" meines ursprünglichen Versuches immer auf 200 ???
https://forum.selfhtml.org/?t=205930&m=1396990
MfG ChrisB
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
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
Der Wert document.body.offsetHeight hat immer 200 ... wie kann das sein .. ich glaube das hier der Fehler liegt ...
was kann ich tun ?
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
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>
Hi,
Hab ich alles gemacht ..
Nein, hast du nicht.
Lies den letzten Satz von Harlequins Hinweis noch mal.
MfG ChrisB
Hi,
Hab ich alles gemacht ..
Nein, hast du nicht.
OK, *versucht* hast du es ... aber html hat kein height-Attribut. Nutze CSS.
MfG ChrisB
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*
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
Yerf!
<html height="100%">
Wie ChrisB schon gesagt hat: nutze auch hierfür CSS.
Gruß,
Harlequin
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