div an horizontaler Mausposition orientiert anzeigen

[enrico]

Guten Abend,

das Problem mit der dynamischen Erzeugung "DOM - dynamische Erzeugung einer Verweisliste"
habe ich jetzt gelöst.

Nun habe ich ein Problem bezüglich des Komforts bei der Ausgabe der Listen.

Hier der Aufbau der Filterfunktion:

+--------------------------+ +---------------+ +------------------------+
| Auswahl Anfangsbuchstabe | | Auswahl Genre | | Auswahl Altersfreigabe |
+--------------------------+ +---------------+ +------------------------+

Bei onClick auf die jeweilige Grafik wird die entsprechende Auswahlliste angezeigt:

+---+
| J |
| G |
| B |
+---+----------------------+ +---------------+ +------------------------+
| Auswahl Anfangsbuchstabe | | Auswahl Genre | | Auswahl Altersfreigabe |
+--------------------------+ +---------------+ +------------------------+

+--------------------------+
                             | Horror/Thriller          |
                             | Drama/Thriller           |
                             | Science Fiction/Thriller |
+--------------------------+ +---------------+-+------------------------+
| Auswahl Anfangsbuchstabe | | Auswahl Genre | | Auswahl Altersfreigabe |
+--------------------------+ +---------------+ +------------------------+

+----+
                                               | 18 |
                                               | 12 |
                                               | 6  |
+--------------------------+ +---------------+ +----+-------------------+
| Auswahl Anfangsbuchstabe | | Auswahl Genre | | Auswahl Altersfreigabe |
+--------------------------+ +---------------+ +------------------------+

Wie aus den Skizzierungen ersichtlich wird die jeweilige Auswahlliste immer am linken
Rand der Grafik ausgerichtet. Dies hatte ich auch so angegeben.

Nun möchte ich aber, dass die Auswahllisten - horizontal gesehen - immer auf Höhe des
Mauszeigers angezeigt werden, d.h. bin ich mit der Maus weiter links innerhalb der
Grafik, so wird auch die Auswahlliste weiter links angezeigt, bin ich weiter rechts,
dann analog dazu weiter rechts.

Wie kann ich das umsetzen ?

Vielen Dank für Eure Anregungen.

Gruß
Enrico

[Don P]

Hallo,

Nun möchte ich aber, dass die Auswahllisten - horizontal gesehen - immer auf Höhe des
Mauszeigers angezeigt werden, d.h. bin ich mit der Maus weiter links innerhalb der
Grafik, so wird auch die Auswahlliste weiter links angezeigt, bin ich weiter rechts,
dann analog dazu weiter rechts.

Wow, du verlangst ja einiges. Schau dich mal bei event um. Da gibt es je nach Browser x,y, layerX, layerY und solche Sachen.

Gruß, Don P

[enrico]

Hallo Don P,

bislang bin ich an diesem Punkt:

<a href="javascript:void(0);"
      onMouseOver="..."
      onMouseOut="..."
      onFocus="...>
      <img src="..." ... name="Select_Altersfreigabe" id="Select_Altersfreigabe"
           onClick="Auswahlliste_anzeigen ('Ebene_Altersfreigabe');this.blur();">
   </a>

Die horizontale Mausposition fange ich bzw. möchte ich mit folgendem Code abfragen:

var X;

function setCords(e)
   {
      var X = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
   }

document.onmousemove = setCords;

function Auswahlliste_anzeigen (Ebene, X)
   {
      X -= window.document.getElementById(Ebene).offsetLeft;
      Ebenen_anzeigen (Ebene);
      alert("x: " + X);
   }

Die Ebene wird, wie vorher auch, korrekt angezeigt, das ist schon mal wichtig, da ich
so weiß, dass alles soweit korrekt übergeben wurde.

Nur der Wert "X", also die horizontale Position zur Grafik wird nicht korrekt übergeben,
da ich bei dem testweisen alert-Befehl "NaN" bekomme.

Mit der Lösung dieses Problemes wäre ich - hoffentlich, denke ich - nur noch eine Nasenlänge
von der Realisierung meines Vorhabens entfernt, wenn ich dann noch umgesetzt bekomme, wie ich
ein div flexibel ausgeben lasse, was seine Position angeht.

Was stimmt an "X" nicht?
Wie kann ich die flexible Ausgabe umsetzen?

Gruß
Enrico

[ChrisB]

Hi,

var X;

Eine globale verfuegbare Variable namens X.

function setCords(e)
   {
      var X = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;

Noch eine Variable namens X, aber diesmal nur innerhalb dieser Funktion verfuegbar.
-> Keyword "var" weglassen.

Nur der Wert "X", also die horizontale Position zur Grafik wird nicht korrekt übergeben, da ich bei dem testweisen alert-Befehl "NaN" bekomme.

Wenn du nach der Korrektur immer noch NaN bekommst (das steht fuer Not a Number, und taucht idR. dann auf, wenn ein Wert in einem mathematischen Kontext verwendet wird, der in diesem aber keinen Sinn ergibt) - dann kontrolliere erst mal die einzelnen Werte, aus denen du X zusammensetzt.

MfG ChrisB

[enrico]

Hallo ChrisB,

ich habe die Funktion jetzt wie folgt abgespeckt, da ich nur Firefox nutze und die Seite
eh nur lokal laufen wird:

var X;

window.document.onmousemove = function(e)
   {
      X = e.pageX;
   // alert(X);
   };

Und bekomme immer noch "NaN"...

Gruß,
Enrico

[ChrisB]

Hi,

ich habe die Funktion jetzt wie folgt abgespeckt, da ich nur Firefox nutze und die Seite eh nur lokal laufen wird:

var X;

window.document.onmousemove = function(e)
   {
      X = e.pageX;
   // alert(X);
   };

Und bekomme immer noch "NaN"...

Noe, also wenn ich das im FF teste (Auskommentierung des alerts rausgenommen), bekomme ich eine Zahl angezeigt ...

Und selbst wenn er da event.pageX nicht kennen wuerde, sollte er "undefined" anzeigen, aber nicht NaN - weil, wie gesagt, dass eigentlich nur bei Verwendung nicht-nummerischer Werte in mathematischem Kontext auftritt; ein simples alert ist aber kein solcher.

Also machst du wohl noch irgendwas anderes mit dem Wert ...?

MfG ChrisB

[enrico]

Hallo ChrisB,

so, mittlerweile erhalte ich tatsächlich den Wert von X, habe aber das Problem,
dass die Ebene nicht angezeigt wird, ich erhalte folgende Fehlermeldung:

Fehler: Ebene has no properties

Hier mal das Konstrukt:

<div id="Auswahlliste_Altersfreigabe">
      <a href="javascript:void(0);"
         onMouseOver="..."
         onMouseOut="..."
         onFocus="...">
         <img src="..." ... name="Select_Altersfreigabe" id="Select_Altersfreigabe"
              onClick="Auswahlliste_anzeigen ('Ebene_Altersfreigabe');this.blur();">
      </a>
   </div>

Hier die Funktion, die die horizontale Mausposition ermittelt:

var X;

window.document.onmousemove = function(e)
   {
      X = e.pageX;
   };

Hier die Funktion, die die Auswahlliste an der Position X ausgeben soll:

function Auswahlliste_anzeigen (Ebene)
   {
      var Ebene = window.document.getElementById (Ebene);
      Ebene.setAttribute ("style", "left:" + X + "px;");
      Ebenen_anzeigen (Ebene);
   }

Hier die Funktion "Ebenen_anzeigen":

function Ebenen_anzeigen()
   {
      for (var i = 0; i < Ebenen_anzeigen.arguments.length; ++i)
      {
         var Ebene = window.document.getElementById(Ebenen_anzeigen.arguments[i]);
         Ebene.style.visibility = "visible";
      }
   }

Ich finde den Fehler einfach nicht...

Gruß
Enrico