Basierend auf einem Forums-Beitrag vom 30.07.1998 von:
Paul Hobrecker, hobrecker@solutions-partner.de
Sowohl in Netscape als auch im Microsoft Internet-Explorer können
im Browserfenster Bereiche mit beliebigem HTML-Inhalt frei positionierbar definiert werden.
Dies geschieht bei Netscape mit Layern, deren Funktionalität beim Internet-Explorer im "document.all"-Objekt enthalten ist (lesen Sie hierzu 
Dynamisches Positionieren (Netscape) und Das all-Objekt).
Das Code-Beispiel aus diesem Beitrag hat den Vorteil,
mit relativ wenig Aufwand auf beiden Browsern zu laufen. Insbesondere
kann hier für beide Browser der selbe HTML-Block verwendet werden.
Damit dies funktioniert, muss man wissen, dass die Positionierung
bei beiden Browsern mit
dem <div ...>-Tag auf nahezu gleiche Weise funktioniert.
Lediglich die unterschiedliche JavaScript-Referenzierung der
Koordinaten,
wird im Beispiel durch die String-Variablen Objekt_Referenz und IE_Style gelöst, welche abhängig vom Browsertyp in function start() definiert werden. In der ersten Variable wird der Vorsatz document.all bzw. document.layers und in der zweiten der Zusatz .style für IE 4.x gespeichert. In der Funktion Objekt_Positionieren(Objekt_Name, links, oben) wird nun mit diesen Variablen und dem Objektnamen ein String zusammengesetzt, der genau einem JavaScript-Befehl zur Positionierung entspricht und dieser mit der eval("...")-Funktion ausgeführt.
<html>
<head><title>Bewegliche Objekte für Netscape und Microsoft IE</title>
<script language="JavaScript">
<!--
var pausenLaenge = 0,
Objekt1_Step = 5,
Objekt2_Winkelgeschw = 0.05,
Objekt1_XPos = 200,
Objekt2_Winkel = 0,
Objekt_Referenz="",
IE_Style="";
function start() {
if (navigator.appName == "Netscape") {
Objekt_Referenz="document.layers";
IE_Style="";
}else{
Objekt_Referenz="document.all";
IE_Style=".style";
}
bewegung();
}
function bewegung() {
Objekt_Positionieren("Objekt1",Objekt1_XPos,10);
if (Objekt1_XPos > 300 || Objekt1_XPos < 100)
Objekt1_Step = Objekt1_Step * (-1);
Objekt1_XPos += Objekt1_Step;
Objekt2_XPos = Math.sin(Objekt2_Winkel)*70 + 100;
Objekt2_YPos = Math.cos(Objekt2_Winkel)*70 + 200;
Objekt_Positionieren("Objekt2", Objekt2_XPos, Objekt2_YPos);
Objekt2_Winkel += Objekt2_Winkelgeschw;
MeinTimer = window.setTimeout("bewegung();", pausenLaenge);
}
function Objekt_Positionieren(Objekt_Name, links, oben){
eval(Objekt_Referenz+'["'+Objekt_Name+'"]'+IE_Style+'.top = oben');
eval(Objekt_Referenz+'["'+Objekt_Name+'"]'+IE_Style+'.left = links');
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onload="start()">
<div id="Objekt1" style="position:absolute;top:200;left:100;">
<img src="objekt1.gif" width="90" height="90" border="0" alt="">
</div>
<div id="Objekt2" style="position:absolute;top:200;left:300;">
<img src="objekt2.gif" width="90" height="90" border="0" alt="">
</div>
</body></html>
|
Weitere Erläuterungen zu diesem Beispiel finden Sie im Quellcode der entsprechenden Datei unter:
http://www.videoaktuell.de/dhtml
 
|
Basierend auf einem Forums-Beitrag vom 11.01.1999 von:
Ralph Gröger, r.groeger@abo.freiepresse.de
Wenn man in einem HTML-Dokument eine Fußzeile oder ein Objekt benötigt, welches z.B. immer am unteren Fensterrand fixiert ist, kann man dies zum einen über ein Frameset erreichen. Interessant ist aber auch die hier vorgestellte Methode, ein (<div>)-Objekt dynamisch an den Fensterrand zu binden. Das Beispiel funktioniert mit Netscape 4.x sowie IE 4 und 5.
<html><head><title>Dynamische Fußzeile ohne Frameset</title></head>
<script language="JavaScript">
function watching()
{
if(document.layers) {
document.Fusszeile.top = window.innerHeight-25;
}
if(document.all) {
document.all.Fusszeile.style.top
= window.document.all.fenstergroesse.offsetHeight-30;
}
window.onresize = watching;
}
</script>
<body ID="fenstergroesse" onLoad="watching()" >
<DIV ID="Fusszeile" STYLE="position:absolute; top:auto;">
<PRE>Dies ist ein Text, der ganz unten stehen soll</PRE>
</DIV>
</body>
</html> |
|
|
Basierend auf einem Forums-Beitrag vom 25.03.1999 von:
Stefan Muenz, muenz@csi.com
Um einen <div>-Bereich dynamisch zu positionieren, ist es oft nützlich, wenn man dessen eigene Abmessungen kennt. Beim Internet Explorer funktioniert das wie folgt: Angenommen, im Dokument wurde mit
<div id="Bereichsname" style="position:absolute; [weitere CSS-Angaben zur Positionierung]">...</div>
ein Bereich definiert. Dann erhält man dessen Höhe und Breite durch folgende Befehle:
if(document.all) /* MSIE 4+ */
{
Hoehe = document.all.Bereichsname.offsetHeight;
Breite = document.all.Bereichsname.offsetWidth;
}
|
|
Basierend auf einem Forums-Beitrag vom 03.02.1999 von:
Svenja Noä, svenja@insigno.de
Befinden sich in einem HTML-Dokument mehrere Bilder, so ist die Reihenfolge, in der diese beim Laden der Seite angezeigt werden, im allgemeinen recht zufällig. Manchmal wird jedoch aus optischen Gründen gewünscht, die Reihenfolge der Anzeige vorgeben zu können. Dies kann mit Hilfe der Style-Option visibility und der window.setTimeout("function", ms)-Funktion bewerkstelligt werden. Das folgende Beispiel hierzu funktioniert mit IE4 und IE5.
<html><head><title>bilder laden</title>
<script language="JavaScript">
<!--
function showPic() {
window.setTimeout("document.all.bild1.style.visibility = 'visible'",1000);
window.setTimeout("document.all.bild2.style.visibility = 'visible'",2000);
window.setTimeout("document.all.bild3.style.visibility = 'visible'",3000);
}
//-->
</script>
</head>
<body onLoad="showPic()">
<img id="bild1" src="bild1.jpg" width=211 height=137 border="0" style="visibility:hidden">
<img id="bild2" src="bild2.jpg" width=211 height=137 border="0" style="visibility:hidden">
<img id="bild3" src="bild3.jpg" width=211 height=137 border="0" style="visibility:hidden">
</body></html>
|
|
|
Basierend auf einem Forums-Beitrag vom 04.01.1999 von:
Stefan Muenz, muenz@csi.com
Für gewisse Anwendungen ist es praktisch, ein Browser-Dokument einfach im Vollbildmodus zu öffnen, z.B. für HTML-Präsentationen in öffentlich zugänglichen Räumen (Museen etc.), bei denen verhindert werden soll, dass ein Besucher das Fenster einfach schließt. Beim Internet-Explorer existiert dafür eine spezielle Anweisung, "fullscreen=yes", die im window-features-String der window.open-Methode angegeben wird. Kleine Warnung: Es ist etwas mühsam, den Internet Explorer im Vollbildmodus wieder zu schließen, was aber - wie erwähnt - beabsichtigt ist.
<html><head><title>TESTPAGE</title></head>
<body>
<script language="JavaScript">
<!--
if (navigator.appName == "Microsoft Internet Explorer") {
newwindow=window.open("http://irgendeine.url.com","Fenster","fullscreen=yes");
}
//-->
</script>
</body>
</html>
|
|
| |
weiter: |
Dynamisches Ändern von Inhalten
|
zurück: |
JavaScript - Sonstiges
|
SELFHTML
Forums-Auslese
DHTML |
|
© 2000 das Redaktionsteam