Reiner Wirth: javascript div-Tag Positionierung in Safari

SELF-Forum

javascript div-Tag Positionierung in Safari

Reiner Wirth
– Informationen zu den Bewertungsregeln

Ich wundere mich, warum mein Versuch, ein div-Tag in Safari zu positionieren scheitert und in Opera jedoch nicht

Meine source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <script language="javascript"> window.onload = init; function init() {   if (window.Event) {     document.captureEvents(Event.CLICK);   }   document.onclick = getXY; }

function getXY(e) {   window.document.getElementById("Bsp3Melisande").style.visibility='visible';   window.document.getElementById("Bsp3Melisande").style.left=event.clientX;   window.document.getElementById("Bsp3Melisande").style.top=event.clientY;   window.document.ee.sd.value = event.clientX+":"+event.clientY; } </script>

<style type="text/css" media="screen" class="class"><!-- #Bsp3Melisande { background-image: url(03Melisande.jpg); background-repeat: no-repeat; height: 122px; width: 306px; left: 20px; top: 0; z-index: 400; position: absolute; visibility: hidden; } --></style>  <head>   <meta http-equiv="content-type" content="text/html;charset=utf-8" />   <meta name="generator" content="Adobe GoLive" />   <title>NeuerTest</title>  </head>

<body>  <table align=center cellpadding=0 cellspacing=0 width=95%>  <tr><td class="class" align=center>  <form name=ee><input name=sd type=text> </input></form>

<div id="Bsp3Melisande"</div>

</body>

</html>

Falls jemand auf Anhieb einen Grund feststellen kann, wäre ich sehr dankbar!

Gruß Reiner Wirth

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. javascript div-Tag Positionierung in Safari

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich wundere mich, warum mein Versuch, ein div-Tag in Safari zu positionieren scheitert und in Opera jedoch nicht

    ich kann das mangels Browser nicht testen, aber es dürften aber auch andere Browser davon betroffen sein.

    <script language="javascript">

    hier fehlt das Type Attribut, das language ist überflüssig, bzw. veraltet.

    window.onload = init;
    function init() {

    ist nicht falsch, kannst du aber zusammenfassen.

    window.onload = function () {

    if (window.Event) {
        document.captureEvents(Event.CLICK);

    Sicher?
    Ich dachte captureEvents ist eine Netscape Erfindung und mittlerweile auch gar nicht mehr nötig. Du testest hier aber auf ein Objekt das vor allem der IE kennt und der solte dann einen Fehler werfen, da er captureEvents gar nicht kennt.

    ...
    Grad mal nachgeschaut stimmt
    http://de.selfhtml.org/javascript/objekte/document.htm#capture_events

    function getXY(e) {
      window.document.getElementById("Bsp3Melisande").style.visibility='visible';
      window.document.getElementById("Bsp3Melisande").style.left=event.clientX;
      window.document.getElementById("Bsp3Melisande").style.top=event.clientY;

    Was ist event? Woher kommt das Objekt?
    top/left was? Hier fehlt eine Einheit.

    <style type="text/css" media="screen" class="class"><!--
    #Bsp3Melisande { background-image: url(03Melisande.jpg); background-repeat: no-repeat; height: 122px; width: 306px; left: 20px; top: 0; z-index: 400; position: absolute; visibility: hidden; }

    hier hat top/left eine Einheit, so stimmt's

    --></style>
    <head>

    Aber das style und script ausserhalb des Head ist falsch.

    <body>
    <table align=center cellpadding=0 cellspacing=0 width=95%>
    <tr><td class="class" align=center>

    Wozu du dier ein Tabelle brauchst ist eine andere Frage.

    </body>

    allerdings solltest du diese dann auch schliessen.

    Falls jemand auf Anhieb einen Grund feststellen kann, wäre ich sehr dankbar!

    Sind ein paar, das falsche Event Objekt und fehlenden Einheiten dürften das Hauptproblem sein.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. javascript div-Tag Positionierung in Safari

      Reiner Wirth
      – Informationen zu den Bewertungsregeln

      Vielen Dank für Eure Mühe,

      ich habe nun selbst etwas gefunden:

      document.getElementById().style.visibility='visible';
         document.getElementById().style.left=200+"px";
         document.getElementById().style.top=150+"px";

      wenn ich zu den Koordinaten jeweils +"px" hinzufüge, klappt es auch im Safari-Browser.

      Vielleicht ist es auch für andere von Nutzen.

      Gruß Reiner Wirth

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. javascript div-Tag Positionierung in Safari

        Struppi Homepage des Autors
        – Informationen zu den Bewertungsregeln

        ich habe nun selbst etwas gefunden:

        Naja, das habe ich bereits erwähnt.

        document.getElementById().style.visibility='visible';
           document.getElementById().style.left=200+"px";
           document.getElementById().style.top=150+"px";

        Jetzt hast du natürlich nicht mehr die Mausposition.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. javascript div-Tag Positionierung in Safari

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Reiner,

    window.document.ee.sd.value = event.clientX+":"+event.clientY;

    ^  ^                         ^
    was ist das?

    Auf der Seite von struppi, http://javascript.jstruebig.de/javascript/54/, siehst Du, wie Du an die Mauskoordinaten kommst.

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln