hallo mitsammen!
In Foren begebe ich mich sehr ungern, also auch jetzt erst nach mehrstündigen Versuchen und Suchen.
Folgende Funktion, in eine eigene JS-Datei ausgelagert, funktioniert im Hauptfenster tadellos, aber nicht im iFrame. Und das sowohl bei FF, IE und Safari. Also liegts wohl an mir ;-) Und ich kapier einfach nicht, weshalb.
umd diese Funktion gehts:
function centerElement(elem, mode) {
if (mode == "vert" || mode == "both") {
document.getElementById(elem).style.top = ((getSize()[1] - parseInt(document.getElementById(elem).style.height)) / 2) + getScrollXY()[1] + 'px';
}
if (mode == "horz" || mode == "both") {
document.getElementById(elem).style.left = ((getSize()[0] - parseInt(document.getElementById(elem).style.width)) / 2) + getScrollXY()[0] + 'px';
}
}
sie verwendet diese:
function getSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [ myWidth, myHeight ];
}
Das Element, das er nicht mag ist:
<div id="pwquest" class="pw0" name"hupsi">
<form name="pwform" method="get" action="../main/square.php">
<div class="pw1">Passwortabfrage</div>
<div class="pw2"><a href="javascript:showPwQuest('hidden');"><img src="../graphic/close.gif" width="16" height="16" border="0"></a></div>
<div class="pw3" style="top: 15px;">
Passwort: <input type="password" id="pw" name="pw" size="12" class="input">
<input type="hidden" id="catpw" name="catpw" value="">
<input type="hidden" name="page" value=" <?php echo"$page"; ?>">
<input type="hidden" name="cat" value=" <?php echo"$cat"; ?>">
</div>
<div class="pw3" style="top:30px">
<input type="image" src="../graphic/btngo.gif" alt="Abschicken">
<a href="javascript:showPwQuest('hidden');"><img src="../graphic/btncancel.gif" width="100" height="20" border="0"></a></div>
</form>
</div>
CSS-Infos sind ausgelagert:
.pw0 {position: absolute; top: 10px; left: 100px; width: 250px; height: 110px; z-index: 3; background-color: #D8D8D8; color: #000; border: 1px gray solid; visibility: hidden;}
.pw1 {position: relative; width: 230px; left: 0px; background-color: #818181; color: #FFF; text-align: center; font-weight: bold; float: left; padding: 1px; letter-spacing: 2px}
.pw2 {position: relative; width: 16px; right: 0px; background-color: #818181; color: #000; text-align: center; font-weight: bold; float: right; padding: 1px;}
.pw3 {position: relative; width: 246px; right: 0px; background-color: #D8D8D8; text-align: center; vertical-align: middle; float: left; padding: 2px;}
und der Funktionsaufruf lautet:
centerElement('pwquest', 'both')
doctype ist dieser (aber ich habs ohne Erfolg auch mit anderen probiert):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Beim Debugger vom IE mosert er übrigens bei "document.getElementById(elem)..." mit 'ungültiges Argument'.
Ich vermute, dass es an der Tatsache liegt, dass es im iFrame lauft, aber logisch ist mir das nicht wirklich. Pfhh... für Hilfe wäre ich echt und wirklich sehr froh!
Schönen Abend/Morgen!
Martin