Probleme bei Netscape (div-layer wird nicht dargestellt)
Thomas Häber
- javascript
Seit gegrüßt,
Ich habe mal wieder ein Problem;
Dieses mal betrifft es eine durch Javascript erzeugte Kreisbewegung von drei Links um ein bestimmtes Bild. Es klappt prima mit dem Internet Explorer, nur Natscape scheint absout nichts damit anfangen zu können obwohl dieses script zusätlich für Netscape programmiert worden ist. Liegt das an der Version 6.0 des Netscape N. oder gibt es einen Tippfelher oder sonstiges?
Hier der Programmcode (Ihr könnt ihn ruhig ausprobieren, indem Ihr ihn einfach kopiert.):
<html><!-- Created by Thomas Häber --><head>
<title>... Transportation Services</title>
<meta name="description" content="... Transportation Services">
<meta name="keywords" content="transport, transportation, airways. airline, service,services, company, infos">
<script language="JavaScript" type="text/javascript">
<!--
var r = 90; // radius
var pi = Math.PI; // pi
var a=-1; // Startwinkel
var breite, hoehe;
var Bildbreite=60, Bildhoehe=60;
function Abfrage()
{
if (navigator.appName=='Netscape' && navigator.appVersion.charAt(0)>='4')
{ breite=screen.width;
hoehe=window.innerHeight;
window.document.logo.left=breite/2-Bildbreite/2;
window.document.logo.top=hoehe/2-Bildhoehe/2;
window.setTimeout ('rotation_nc()', 20);
}
if (navigator.appName=='Microsoft Internet Explorer' && navigator.appVersion.charAt(0)>='4')
{
breite=screen.width;
hoehe=screen.height;
logo.style.left=breite/2-Bildbreite/2;
logo.style.top=hoehe/2-Bildhoehe/2;
window.setTimeout ('rotation_ie()', 20);
}
}
function rotation_nc ()
{
a++;
window.document.neu.left=(r * Math.cos(a*(pi/180))) + breite/2-Bildbreite/2;
window.document.neu.top=(r * Math.sin(a*(pi/180))) + hoehe/2-Bildhoehe/2;
window.document.impressum.left=(r * Math.cos((a+120)*(pi/180))) + breite/2-Bildbreite/2;
window.document.impressum.top=(r * Math.sin((a+120)*(pi/180))) + hoehe/2-Bildhoehe/2;
window.document.feedback.left=(r * Math.cos((a+240)*(pi/180))) + breite/2-Bildbreite/2;
window.document.feedback.top=(r * Math.sin((a+240)*(pi/180))) + hoehe/2-Bildhoehe/2;
window.setTimeout ('rotation_nc()', 75);
}
function rotation_ie ()
{
a++;
neu.style.left=(r * Math.cos(a*(pi/180))) + breite/2-Bildbreite/2;
neu.style.top=(r * Math.sin(a*(pi/180))) + hoehe/2-Bildhoehe/2;
impressum.style.left=(r * Math.cos((a+120)*(pi/180))) + breite/2-Bildbreite/2;
impressum.style.top=(r * Math.sin((a+120)*(pi/180))) + hoehe/2-Bildhoehe/2;
feedback.style.left=(r * Math.cos((a+240)*(pi/180))) + breite/2-Bildbreite/2;
feedback.style.top=(r * Math.sin((a+240)*(pi/180))) + hoehe/2-Bildhoehe/2;
window.setTimeout ('rotation_ie()', 75);
}
//-->
</script>
</head>
<body onload="Abfrage()" bgcolor="#5555FF" text="#000000" link="#FFFF00" vlink="#FFFF00" alink="#FFFF00">
<pre>
</pre>
<div align="center" style="font-size:22px; font-family:Arial, Lucida Sans;">Wellcome to<br><h1>...,</h1>the Transportation Services</div>
<pre>
</pre>
<div id="neu" style="position: absolute; left:-100px; top:-100px; z-index:1;">
<a href="english.html" style="font-family:Arial, Lucida Sans;text-decoration:none;font-weight:600;">English</a>
</div>
<div id="impressum" style="position: absolute; left:-100px; top:-100px; z-index:1;">
<a href="index.html" style="font-family:Arial, Lucida Sans;text-decoration:none;font-weight:600;" onClick="alert('In a few weeks available.');">Ruski Jasyk</a>
</div>
<div id="feedback" style="position: absolute; left:-100px; top:-100px; z-index:1;">
<a href="index.html" style="font-family:Arial, Lucida Sans;text-decoration:none;font-weight:600;" onClick="alert('In a few weeks available.');">Deutsch</a>
</div>
<div id="logo" style="position: absolute; left:-100px; top:-100px; z-index:0;">
<img src="logo.gif" name="Bild" alt="...-Bild">
</div>
<div style="position:absolute; left:582px; right:0px; bottom:0px; z-index:0;">
<table align="right" width="200" height="50" bordercolor="#999999" cellspacing="0" cellpadding="1" border="1">
<tr>
<th colspan="3" align="left" style="font-family:Arial, Lucida Sans;">Select your Language:</th>
</tr>
<tr>
<td><a href="deutsch.html" style="font-family:Arial, Lucida Sans;">Deutsch</a></td>
<td><a href="english.html" style="font-family:Arial, Lucida Sans;">English</a></td>
<td><a href="russisch.html" style="font-family:Arial, Lucida Sans;">Russki</a></td>
</tr>
</table></div>
</body>
</html>
Hallo Thomas,
nur Natscape scheint absout nichts damit anfangen zu können obwohl dieses script zusätlich für Netscape programmiert worden ist. Liegt das an der Version 6.0 des Netscape N. oder gibt es einen Tippfelher oder sonstiges?
es liegt im NN4 an einer ganzen Kleinigkeit:
<a href="english.html" style="font-family:Arial, Lucida Sans;text-decoration:none;font-weight:600;">English</a>
diese style-Angabe legt dein gesamtes Script lahm.
Einfachste Lösung:
<style type="text/css">
<!--
.linksklasse {font-family:Arial, Lucida Sans;text-decoration:none;font-weight:600;}
-->
</style>
in den Header
und im Text:
<div id="neu" style="position: absolute; left:-100px; top:-100px; z-index:1;">
<a href="english.html" class="linksklasse">English</a>
</div>
<div id="impressum" style="position: absolute; left:-100px; top:-100px; z-index:1;">
<a href="index.html" class="linksklasse" onClick="alert('In a few weeks available.');">Ruski Jasyk</a>
</div>
<div id="feedback" style="position: absolute; left:-100px; top:-100px; z-index:1;">
<a href="index.html" class="linksklasse" onClick="alert('In a few weeks available.');">Deutsch</a>
</div>
dann macht auch der NN4 was er soll. Im NN6 gibts noch Probleme. Hier solltest du dich wirklich mal mit dem DOM beschäftigen.
Vielleicht noch ein Tipp: arbeite ich im NN4 mit Layern, und es klappt nicht, dann ist mein erster Blick in die Seiteninformationen. Dort werden alle Layer aufgelistet. Das hilft ungemein bei der Fehlersuche.
Viele Grüße
Antje
Hi,
Dieses mal betrifft es eine durch Javascript erzeugte
Kreisbewegung von drei Links um ein bestimmtes Bild. Es klappt
prima mit dem Internet Explorer, nur Natscape scheint absout
nichts damit anfangen zu können obwohl dieses script zusätlich
für Netscape programmiert worden ist. Liegt das an der Version
6.0 des Netscape N. oder gibt es einen Tippfelher oder sonstiges?
Die JS-Engine des NN6 Beta Preview 1 ist noch mehr als nur in den
Kinderschuhen; DHTML-Elemente werden, um genau zu sein, noch fast
gar nicht unterstützt.
Wenn du testen möchtest, ob deine Scripts auch auf dem NN 6 laufen
werden, lad dir den Mozilla bei http://www.mozilla.org
runter; der M16 ist (meiner Meinung nach) ein riesen Schritt nach
vorn (M16 != Mozilla 16, M16 == Mozilla Milestone 16).
Ach ja, guck dir auch mal die Doku zu JS 1.5 an (http://www.mozilla.org/js/js15.html),
denn der Mozilla (und damit auch wohl der NN6 ,) ) werden JS 1.5
unterstützen ,)
Hier der Programmcode (Ihr könnt ihn ruhig ausprobieren, indem
Ihr ihn einfach kopiert.):
Uiii, das ist ja großzügig ,)
[...]
function Abfrage()
{
if (navigator.appName=='Netscape' && navigator.appVersion.charAt(0)>='4')
Ich gehe aufgrund dieser Zeile mal davon aus, das dein Script unterm
NN4.x auch nicht läuft (was es auch gar nicht kann).
window.document.logo.left=breite/2-Bildbreite/2;
window.document.logo.top=hoehe/2-Bildhoehe/2;
Hier ist schon ein Fehler: auf Layer kann man im NN nur über das
Layer-Objekt zugreifen; richtig müßte es also so heißen:
window.document.layers['logo'].left = breite / 2 - Bildbreite / 2;
window.document.layers['logo'].top = hoehe / 2 - Bildhoehe / 2;
window.document.neu.left=(r * Math.cos(a*(pi/180))) + breite/2-Bildbreite/2;
window.document.neu.top=(r * Math.sin(a*(pi/180))) + hoehe/2-Bildhoehe/2;
window.document.impressum.left=(r * Math.cos((a+120)*(pi/180))) + breite/2-Bildbreite/2;
window.document.impressum.top=(r * Math.sin((a+120)*(pi/180))) + hoehe/2-Bildhoehe/2;
window.document.feedback.left=(r * Math.cos((a+240)*(pi/180))) + breite/2-Bildbreite/2;
window.document.feedback.top=(r * Math.sin((a+240)*(pi/180))) + hoehe/2-Bildhoehe/2;
Hier überall auch; einfach mal das Layer-Objekt einfügen, wie oben
gezeigt.
<div id="neu" style="position: absolute; left:-100px; top:-100px; z-index:1;">
ID ist eine IE-Option; der NN möchte eine NAME-Option haben:
<div name="neu" id="neu" style="position:absolute; left:-100px; top:-100px; z-index:1;">
<div id="impressum" style="position: absolute; left:-100px; top:-100px; z-index:1;">
hier auch wieder:
<div name="impressum" id="impressum" style="position: absolute; left:-100px; top:-100px; z-index:1;">
<div id="feedback" style="position:absolute; left:-100px; top:-100px; z-index:1;">
Und wieder:
<div id="feedback" name="feedback" style="position:absolute; left:-100px; top:-100px; z-index:1;">
<div id="logo" style="position: absolute; left:-100px; top:-100px; z-index:0;">
*gähn*
<div name="logo" id="logo" style="position: absolute; left:-100px; top:-100px; z-index:0;">
<div style="position:absolute; left:582px; right:0px; bottom:0px; z-index:0;">
muss ich noch was sagen? ,)
Der NN möchte, wie gesagt, in divs immer eine name-Option und
die Angabe "position:absolute" haben, damit sie für ihn als
Layer gelten. ,)
Alles in allem: Schau dir auch mal die Unterlagen zu JavaScript im NN
an; der Code war, so wie er da stand, mehr oder weniger NN-Syntax
im IE-Stil bzw. sogar IE-Syntax.
mfg
CK1
P.S.: Kreisende Links mögen ja ganz schön sein, aber es nervt echt -
hast du schonmal versucht, einen Link zu klicken, der alle 75ms
die Position wechselt? ,)
Hallo Christian,
Die JS-Engine des NN6 Beta Preview 1 ist noch mehr als nur in den
Kinderschuhen; DHTML-Elemente werden, um genau zu sein, noch fast
gar nicht unterstützt.
Kreisende Layer gehen schon, irgendwo auf meiner Platte liegt da ein passendes Script rum
Hier ist schon ein Fehler: auf Layer kann man im NN nur über das
Layer-Objekt zugreifen; richtig müßte es also so heißen:window.document.layers['logo'].left = breite / 2 - Bildbreite / 2;
window.document.layers['logo'].top = hoehe / 2 - Bildhoehe / 2;
nein, NN kommt auch mit dem Namen zurecht, wie von Thomas angegeben
<div id="neu" style="position: absolute; left:-100px; top:-100px; z-index:1;">
ID ist eine IE-Option; der NN möchte eine NAME-Option haben:
bitte, nur im Layer, in divs kommt er ausgezeichnet mit dem ID zurecht
muss ich noch was sagen? ,)
ja Christian, es wäre gut gewesen, wenn du getestet hättest, was du schreibst. Denn auch mit deinen Korrekturen, läuft es nicht.
Thomas seine Code war für den NN4 richtig. Beim NN6 sieht es anders aus.
Ursache des Fehlers war eine style-Angabe die der NN eben nicht mochte.
Viele Grüße
Antje
Hi,
nein, NN kommt auch mit dem Namen zurecht, wie von Thomas
angegeben
Mein NN 4.7 meckert rum, wenn ich das layers[] weglasse.
bitte, nur im Layer, in divs kommt er ausgezeichnet mit dem ID
zurecht
Genau das eben nicht. Ich habe mir einmal knapp ne Stunde die Hacken
wund gesucht nach einem Fehler (blabla has no properties), und woran
lags? An der Namens-Vergabe.
Der Layer (DIV) hatte a) keine name-Option und b) kam ein _ drin
vor - das waren die einzigen Gründe.
ja Christian, es wäre gut gewesen, wenn du getestet hättest, was
du schreibst. Denn auch mit deinen Korrekturen, läuft es nicht.
Das mag ja sein, ich habe nicht gesagt, dass das Script so läuft;
aber ich habe die Syntax-Fehler "angestrichen", mehr wollt ich nicht.
Thomas seine Code war für den NN4 richtig. Beim NN6 sieht es
anders aus.
Eben nicht; ich hatte schon oft genug das Problem mit der name- und
der id-Option.
Der NN6 ist weitestgehend IE-kompatibel; theoretisch sollten für
den IE geschriebene Scripts auch auf dem NN 6 laufen.
Allerdings würde ich im NN6 immer mit
divs = getElementsByTagName("div");
divs['name'].option/methode;
arbeiten. Mit document.all scheint der nicht so klar zu kommen.
Ursache des Fehlers war eine style-Angabe die der NN eben nicht
mochte.
Sorry, Antje, aber meinen Erfahrungen nach mag der NN4.x keine divs,
in denen nur ein id steht und in denen andere Zeichen im Namen stehen
als [a-zA-Z-] (A bis Z, a bis z und minus).
Viele Grüße
gleichfalls ,)
mfg
CK1
Hallo Christian,
b) kam ein _ drin
das war der entscheiden Grund, mit dem id hat es weniger zu tun, eher damit wie der Name aussieht, ich habe schon eine Unmenge Scripts für den NN geschrieben, id und namens-Probleme kommen aber eher selten vor
Das mag ja sein, ich habe nicht gesagt, dass das Script so läuft;
aber ich habe die Syntax-Fehler "angestrichen", mehr wollt ich nicht.
Mich störte deine etwas überhebliche Art. Das war nicht nötig. Ich teste übrigens in solchen Fällen immer oder lasse das Posten.
Der NN6 ist weitestgehend IE-kompatibel; theoretisch sollten für
den IE geschriebene Scripts auch auf dem NN 6 laufen.
Allerdings würde ich im NN6 immer mit
Hier aber mußt du aber sehr vorsichtig sein. Dies gilt ausschließlich für das DOM betreffende Routinen. Der IE kann aber wesentlich mehr.
Mit document.all scheint der nicht so klar zu kommen.
Das All-Objekt wird nur vom IE interpretiert und ist nicht im DOM enthalten. Der NN6 kann es also nicht kennen.
Viele Grüße
Antje
Hi,
das war der entscheiden Grund, mit dem id hat es weniger zu tun,
eher damit wie der Name aussieht, ich habe schon eine Unmenge
Scripts für den NN geschrieben, id und namens-Probleme kommen
aber eher selten vor
Naja, wie gesagt, ich kann nur sagen, was ich selber erfahren habe.
Mich störte deine etwas überhebliche Art. Das war nicht nötig.
Überheblich? hm, tut mir leid, wenns so rüber gekommen ist, das
sollte es nicht sein.
Ich teste übrigens in solchen Fällen immer oder lasse das Posten.
Naja, wie gesagt, ich wollte nicht das Script zum laufen bringen. Ich
hatte die (meiner Meinung nach) Fehler gesehen und habs halt
berichtigt.
Hier aber mußt du aber sehr vorsichtig sein. Dies gilt
ausschließlich für das DOM betreffende Routinen. Der IE kann aber
wesentlich mehr.
Ich habe nichts anderes gesagt ,)
Ich habe schließlich von JavaScript, nicht von JScript gesprochen.
Das All-Objekt wird nur vom IE interpretiert und ist nicht im DOM
enthalten. Der NN6 kann es also nicht kennen.
OK, wußte es nicht ,) Dachte, .all wäre inzwischen im DOM
aufgenommen.
mfg
CK1
Hallo nochmal,
Hab eure Ratschläge befolgt und bin zu keinem Ergebnis gekommen.
hab den "neuen" Programmcode ausprobiert; Sei es mit layer[''] und name oder ohne --> es funktioniert immernoch lediglich im MS Internet Explorer, Netscape 6.0 beta funktioniert nicht und Mozilla den ich mir vorhin runtergeladen habe tuts auch nicht.
Also was kann man denn nun machen? Sie unten der Versuch ohne layer[''] und name:
<html>
<!-- Created by Thomas Häber and Christion+Antje -->
<head>
<title>... Transportation Services</title>
<meta name="description" content="... Transportation Services">
<meta name="keywords" content="transport, transportation, airways. airline, service,services, company, infos">
<script language="JavaScript" type="text/javascript">
<!--
var r = 90; // radius
var pi = Math.PI; // pi
var a=-1; // Startwinkel
var breite, hoehe;
var Bildbreite=60, Bildhoehe=60;
function Abfrage()
{
if (navigator.appName=='Netscape' && navigator.appVersion.charAt(0)>='4')
{ breite=screen.width;
hoehe=window.innerHeight;
window.document.layers['logo'].left = breite / 2 - Bildbreite / 2;
window.document.layers['logo'].top = hoehe / 2 - Bildhoehe / 2;
window.setTimeout ('rotation_nc()', 20);
}
if (navigator.appName=='Microsoft Internet Explorer' && navigator.appVersion.charAt(0)>='4')
{
breite=screen.width;
hoehe=screen.height;
logo.style.left=breite/2-Bildbreite/2;
logo.style.top=hoehe/2-Bildhoehe/2;
window.setTimeout ('rotation_ie()', 20);
}
}
function rotation_nc ()
{
a++;
window.document.neu.left=(r * Math.cos(a*(pi/180))) + breite/2-Bildbreite/2;
window.document.neu.top=(r * Math.sin(a*(pi/180))) + hoehe/2-Bildhoehe/2;
window.document.impressum.left=(r * Math.cos((a+120)*(pi/180))) + breite/2-Bildbreite/2;
window.document.impressum.top=(r * Math.sin((a+120)*(pi/180))) + hoehe/2-Bildhoehe/2;
window.document.feedback.left=(r * Math.cos((a+240)*(pi/180))) + breite/2-Bildbreite/2;
window.document.feedback.top=(r * Math.sin((a+240)*(pi/180))) + hoehe/2-Bildhoehe/2;
window.setTimeout ('rotation_nc()', 100);
}
function rotation_ie ()
{
a++;
neu.style.left=(r * Math.cos(a*(pi/180))) + breite/2-Bildbreite/2;
neu.style.top=(r * Math.sin(a*(pi/180))) + hoehe/2-Bildhoehe/2;
impressum.style.left=(r * Math.cos((a+120)*(pi/180))) + breite/2-Bildbreite/2;
impressum.style.top=(r * Math.sin((a+120)*(pi/180))) + hoehe/2-Bildhoehe/2;
feedback.style.left=(r * Math.cos((a+240)*(pi/180))) + breite/2-Bildbreite/2;
feedback.style.top=(r * Math.sin((a+240)*(pi/180))) + hoehe/2-Bildhoehe/2;
window.setTimeout ('rotation_ie()', 100);
}
//-->
</script>
<style type="text/css">
<!--
.linksklasse {font-family:"Arial, Lucida Sans";
text-decoration:"none";
font-weight:"600";}
-->
</style>
</head>
<body onload="Abfrage();" bgcolor="#5555FF" text="#000000" link="#FFFF00" vlink="#FFFF00" alink="#FFFF00">
<div align="center" style="font-size:22px; font-family:Arial, Lucida Sans;">Wellcome to<br>
<h1>...,</h1> the Transportation Services</div>
<div id="neu" style="position:absolute; left:-100px; top:-100px; z-index:1;"><a href="english.html" class="linksklasse">English</a></div>
<div id="impressum" style="position:absolute; left:-100px; top:-100px; z-index:1;"><a href="index.html" class="linksklasse" onclick="alert('In a few weeks available.');">Ruski Jasyk</a></div>
<div id="feedback" style="position:absolute; left:-100px; top:-100px; z-index:1;"><a href="index.html" class="linksklasse" onclick="alert('In a few weeks available.');">Deutsch</a></div>
<div id="logo" style="position:absolute; left:-100px; top:-100px; z-index:0;"><img src="logo.gif" name="Bild" alt="...-Bild"></div>
<div style="position:absolute; left:582px; right:0px; bottom:0px; z-index:0;">
<table align="right" width="200" height="50" bordercolor="#999999" cellspacing="0" cellpadding="1" border="1">
<tr>
<th colspan="3" align="left" style="font-family:Arial, Lucida Sans;">Select your Language:</th>
</tr>
<tr>
<td><a href="index.html" style="font-family:Arial, Lucida Sans;" onclick="alert('In a few weeks available.');">Deutsch</a></td>
<td><a href="english.html" style="font-family:Arial, Lucida Sans;">English</a></td>
<td><a href="index.html" style="font-family:Arial, Lucida Sans;" onclick="alert('In a few weeks available.');">Russki</a></td>
</tr>
</table>
</div>
</body>
</html>
Hallo Thomas
Deine gegenwärtige Version funktioniert im NN4 und im IE. Das sind die zur Zeit aktuellen Browser.
Im NN6 kann es nicht funktionieren, weil dieser weder layer nach das all kennt.
Wie ich dir vorhin schon riet, mußt du dich gründlich mit dem Dokumentenmodell auseinandersetzen.
Christian hat schon einige Ansätze genannt und ich kann dir versichern, es geht auch im NN6, die Layer kreisen zu lassen.
Allerdings benötigst du dafür eine eigene Abfrageroutine.
Als Ansatz für deine Nachforschungen sollte:
http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html helfen.
Viele Grüße
Antje
Hi,
ich hab dir mal ein Bsp-Script geschrieben, an sowas lernt man
meist besser als an Docus ,)
Das Ding sollte im IE 4.x laufen (ungetestet) und läuft im IE5.x, NN4.x
und NN6 (mozilla M16).
--------------------- schnipp ---------------------
<html>
<head>
<title>Kreisende Layer</title>
<script language="JavaScript">
var schrittweite = .5;
var winkel = 0;
var r = 100;
var XM = 300;
var YM = 300;
function kreis()
{
winkel += schrittweite;
// Klar - wenn der Winkel 360° ist, dann ist der Kreis zuende
if(winkel > 360) { winkel = 0; }
// umrechnen in Bogemass
var wi_bg = (2 * Math.PI * winkel) / 360;
// Koordinaten berechnen
SIN = Math.sin(wi_bg);
COS = Math.cos(wi_bg);
var x = XM + (r * SIN);
var y = YM + (r * COS);
// Positionierung fuer den NN
if(document.layers)
{
document.layers['kreis1'].left = x;
document.layers['kreis1'].top = y;
}
// fuer den IE 4.x, 5.x
else if(document.all)
{
document.all['kreis1'].style.left = x;
document.all['kreis1'].style.top = y;
}
// fuer den NN6/Mozilla
else if(document.getElementsByTagName)
{
divs = document.getElementsByTagName("div");
divs['kreis1'].style.left = x;
divs['kreis1'].style.top = y;
}
tm1 = window.setTimeout("kreis()",100);
}
</script>
</head>
<body onload="kreis();">
<div id="kreis1" name="kreis1" style="position:absolute;top:0;left:0;">
Nr. 1
</div>
</body>
</html>
-------------------- /schnipp ----------------------
Wie gesagt, getestet hab ich das Script im NN4.7, IE5.0 und M16.
mfg
CK1