PHP News

#1 (**permalink**) 17-09-2003, 14:25

Hallo,

ich beschäftige mich seit ein paar Wochen eingehend mit Javascript und stehe nun vor einem Kompatibilitätsproblem zwischen IE und Netscape.

Und zwar möchte ich per Javascript einen layer an eine ganz bestimmte stelle bewegen. Die X-Koordinate wird über die Maus bestimmt, die Y-Koordinate aus der Position eines Bildes.

Im Internet Explorer sieht das ganze so aus.

Code:

var check = 0;
function follow_cursor() {
  check = window.event.x-30;
  document.all.preview.style.left = check;
  document.all.preview.style.top = document.all.preview_pos.offsetTop+260;
  if (check > 438) { document.all.preview.style.left = 438; }
  if (check < 0) { document.all.preview.style.left = 0; }
}

Ich versuche schon seit ein paar Tagen, es 1:1 für den Netscape umzusetzen, habe es aber bis jetzt noch nicht geschafft. Momentan orientiert sich der Layer komplett an der Mausposition.

Wer sich die Seite mal anschauen will, besucht www.chatjack.de, klickt auf "Gallery", auf eine Gallerie, und dann auf ein Bild. Im Popup-Fenster steckt das Javascript.

Achtung, Quelltext extrem unübersichtlich ...

Bin für jede Hilfe dankbar ...

Gruß,
ChatJack

#2 (**permalink**) 17-09-2003, 14:28

hm so weit ich weiss untersützt doch netscape keine layer da das doch eine mircosofterfindung ist

#3 (**permalink**) 17-09-2003, 14:35

vorweg: hab mir deinen quellcode nich angeschaut

welcher netscape?
ns 4.x?
ns 6?
ns 7?
oder doch mozilla oder firebird?

google mal nach javascript und cross browser, du kannst nämlich auf elemente deiner seite nicht in jedem browser gleich zugreifen

#4 (**permalink**) 17-09-2003, 14:41

Zitat:

Original geschrieben von ChatJack
Ich versuche schon seit ein paar Tagen, es 1:1 für den Netscape umzusetzen, habe es aber bis jetzt noch nicht geschafft.

dafür müsstest du wohl erstmal den zugriff auf document.all durch etwas ersetzen, dass nicht IE-only ist ...

Zitat:

Original geschrieben von DZVO
hm so weit ich weiss untersützt doch netscape keine layer da das doch eine mircosofterfindung ist

andersherum. der <layer>-tag ist eine reine netscape-erfindung.

#5 (**permalink**) 17-09-2003, 15:25

Hi,

Zitat:

mrhappiness:
welcher netscape?
ns 4.x?
ns 6?
ns 7?
oder doch mozilla oder firebird?

Also am besten natürlich alle

, vordergründig aber erstmal nur der 7er.

Mit 1:1 meine ich, dass es hinterher 1:1 aussieht. Wer sich die Seite mal im Netscape und im IE ansieht, wird merken, dass die Ebene unter Netscape dem Mauszeiger noch folgt, obwohl er an einer fest definierten Position erscheinen soll.

Auf der Seite sitzt einmal ein:

<div id="preview_pos"> ... </div>

Dessen Position gilt es zu ermitteln.

Und als zweites die Position des Mauszeigers, was meines Wissens auch unter Netscape funktioniert, ich aber noch nicht richtig hinbekommen habe.

Das Script, das momentan für die Cursor position zuständig ist, habe ich mir aus SelfHTML herausgeklaut. Das große Problem ist nur, dass ich es nicht wirklich verstehe.

Darüber hinaus funktionieren manche, als Netscape-Tauglich deklarierte Scripts, mit der 7er-Version garnicht.

Dieses Script habe ich übernommen:

Code:

function LayerPos(Ereignis)
{
 if (document.layers) {
           document.layers[2].left = Ereignis.pageX-30;
           document.layers[2].top = Ereignis.pageY-60;
                        }
 else if (window.netscape) {
      document.getElementsByTagName("div")[2].style.left = Ereignis.pageX-30;
      document.getElementsByTagName("div")[2].style.top = Ereignis.pageY-60;
 }
}

if (gecko) {document.onmousemove = LayerPos;}

Wer oder was definiert "Ereignis", und wie kann man diese Abfrage ganz normal in eine Funktion packen, ohne das Script gleich mit der Seite auszuführen.

Wie gesagt, hab's aus SelfHTML. Sobald ich Änderungen vornehme, die mir halbwegs logisch erscheinen geht wieder nichts mehr.

Danke!

Gruß,
ChatJack

#6 (**permalink**) 17-09-2003, 15:42

Zitat:

Original geschrieben von ChatJack
Wer sich die Seite mal im Netscape und im IE ansieht, wird merken, dass die Ebene unter Netscape dem Mauszeiger noch folgt, obwohl er an einer fest definierten Position erscheinen soll.

natürlich tut sie das.

du bindest den aufruf der funktion an den event onmousemove - also wird bei jeder klitzekleinen bewegung der maus die position neu bestimmt, und zwar in bezug auf den mauszeiger.

Zitat:

Wer oder was definiert "Ereignis", und wie kann man diese Abfrage ganz normal in eine Funktion packen, ohne das Script gleich mit der Seite auszuführen.

das script ist so für deine zwecke überhaupt nicht gedacht/geeignet.

wenn du lediglich eine ebene an einer fest definierten position beim überfahren eines anderen elementes anzeigen willst, dann beschäftige dich mit absoluter positionierung und dem anzeigen/nicht anzeigen (visibility oder display) per css, und wie man diese eigenschaften dynamisch per JS verändern kann (siehe hier das zweite beispiel für die DOM-syntax).

#7 (**permalink**) 17-09-2003, 16:42

Hallo,

klappt leider immernoch nicht. Also wenn das so weiter geht, erklär ich Netscape für JavaScript-Experiment-Untauglich.

Momentan sieht's so aus.

Code:

document.getElementsByTagName("div")[2].style.left = pageX;
document.getElementsByTagName("div")[2].style.top = document.getElementsByTagName("div")[1].style.top+455;

Das Problem ist das "Wert ermitteln". Wenn ich rechts vom Gleichzeichen jeweils 100 hinschreibe sitzt er auch bei 100 / 100.

Weiß vielleicht jemand Rat?

Gruß,
ChatJack

#8 (**permalink**) 17-09-2003, 16:58

document.getElementsByTagName("div")[2].style.top liefert einen string zurück, und zwar eine zahl plus eine maßeinheit.

wenn du jetzt zu beispielsweise "400px" 455 addierst, kommt da logischerweise "400px455" heraus. das ein browser damit nichts anzufangen weiss, dürfte logisch sein.

ausserdem hast du anscheinend meine anmerkung ignoriert, dass so etwas für dein problem (sofern ich es richtig verstanden habe, lediglich ein element auf einer festen position einzublenden beim überfahren eines anderen elementes) absolut unnötig ist.

#9 (**permalink**) 17-09-2003, 17:21

Hallo,

deine Anmerkung habe ich nicht ignoriert. Nur leider ist die Höhe der Ebene dynamisch, da sie direkt unten an der Bild-Auswahlleiste 'andocken' soll. Und die ist jenachdem wieviele Bilder es in einer Gallerie gibt, mal höher und mal tiefer.

Aber danke für den Tipp.

Werd mich mal mit den String-Funktionen auseinandersetzten, um mit den ermittelten Werten was anfangen zu können.

Gruß,
ChatJack

P.S.:

Kann mir jemand sagen warum ich bei:

document.write(document.getElementsByTagName("div")[0].style.left);

Keine Ausgabe bekomme?

#10 (**permalink**) 17-09-2003, 23:34

Zitat:

Original geschrieben von ChatJack
Kann mir jemand sagen warum ich bei:
document.write(document.getElementsByTagName("div")[0].style.left);
Keine Ausgabe bekomme?

du kannst den wert einer css-eigenschaft nur dann abfragen, wenn du sie auch exlizit(*) gesetzt hast.

(*) afaik ist dafür sogar das setzen der eigenschaft über das style-attribut direkt im html-element selber notwendig, per externem css funktioniert es auch nicht.

#11 (**permalink**) 18-09-2003, 11:50

So dank an alle,

hab's jetzt endlich über relativ unsaubere Umwege geschafft. Wenn jemand Zeit hat das Script mal kurz zu testen wäre das echt nett.

Hab's bis jetzt nur mit dem IE 5.5 & Netscape 7.1 testen können.

Gruß,
ChatJack