popupWindow verschieben in JS

Computer: Software & Programmierung JavaScript & Script-Sprachen
1

Liebe/-r Experte/-in,
ich habe hier nen code von jemand anderem. Aufgabe: PopupWindow verschieben.
Erklärung: wir haben eine gridview (Tabellenansicht). In dieser werden beim OnMouseOver Previews angezeigt (weitere Infos zu dieser Zeile). Am Ende der WebSeite soll nun die Preview überhalb der Zeile und nicht wie sonst oberhalb angezeigt werden. Ansonsten sieht man nicht, auf welcher Zeile man gerade steht, weil ja die Preview drüber steht.

Die Anzeige der Preview ist JS Code: this.PopupWindow.show();

Gibt es eine Option, wie ich das Fenster, wenn es unter die aktuelle Zeile nicht hin passt, nach oben schieben kann?

Danke für die Hilfe.

2

Hallo,

ja, das geht bestimmt. Nur this.PopupWindow.show() ist ja wohl kaum der ganze Code. Kann man den irgendwo einsehen?

Gruß, Alex

3

Hallo,

mein Ansatz wäre mit „document.innerHeight“ den sichtbaren Anzeigebereich auszulesen und mit „window.event.clientY“ zu vergleichen. Wenn man die beiden Werte voneinander abzieht, kann man leicht einen Grenzwert definieren, bei dem sich das PopUp halt anders verhält. Also z.B. wenn der Mauszeiger näher als 30px an den unteren Bildrand kommt, dann wird das PopUp über statt unter der Zelle angezeigt.

Viele Grüße,

Thorsten

4

Hi,

leider verstehe ich die Problembeschreibung nicht ganz, aber ich versuche dennoch einen Ansatz:

Auf http://de.selfhtml.org/javascript/objekte/window.htm sind alle Attribute und Methoden der Klasse window aufgelistet.

Je nachdem ob der Nutzer nun das Verschieben von Fenstern per Javascript erlaubt (ist in den meisten Browsern nämlich deaktivierbar), kann man mit moveBy() und moveTo() das Fenster bewegen. Man müsste also anhand der Fenstergröße und Koordinaten ermitteln, ob es noch unter die Tabellenzeile passt und wenn nicht um die benötigte Anzahl Pixel nach oben verschieben.

5

Hi Mycapi,

sorry, ich mache schon seit Jahren nichts mehr mit JavaScript und habe deshalb keine Ahnung mehr, wie dein Problem genau zu lösen ist, habe also keinen Code für dich.

Prinzipiell müsste es so funktionieren: du stellst die Zeilenposition (Mauszeiger) fest und ermittelst an Hand der Fenstergröße, ob das PopupWindow noch hinpasst. Wenn nicht, entspr. die neue Position errechnen und dem openWin mitgeben.

Viel Erfolg wünscht

Robi

ich habe hier nen code von jemand anderem. Aufgabe:
PopupWindow verschieben.
Erklärung: wir haben eine gridview (Tabellenansicht). In
dieser werden beim OnMouseOver Previews angezeigt (weitere
Infos zu dieser Zeile). Am Ende der WebSeite soll nun die
Preview überhalb der Zeile und nicht wie sonst oberhalb
angezeigt werden. Ansonsten sieht man nicht, auf welcher Zeile
man gerade steht, weil ja die Preview drüber steht.

Die Anzeige der Preview ist JS Code: this.PopupWindow.show();

Gibt es eine Option, wie ich das Fenster, wenn es unter die
aktuelle Zeile nicht hin passt, nach oben schieben kann?

6

Bist du sicher, dass du ein Popup bei OnMouseOver anzeigen willst? In der Standardeinstellung wird das von Browser sowieso blockiert. Wahrscheinlich brauchst du was wie DHTML, wo du dynamisch ein DIV einblenden kannst - so wie ein Ballooninfo.

Falls du ein Popup (oder was auch immer) öffnen willst, kannst du ja einfach die Koordinaten übergeben. Im OnMouseOver Code kannst du ja im Aufruf einfach einen Parameter für die Position übergeben.

Irgendwo musst du lediglich wissen, welches die letzte Zeile ist. Aber das weisst du vermutlch beim generieren des Grids.

7

Hallo Mycapi,

um dir da etwas zu sagen zu können, bräuchte ich ein paar mehr Informationen. Deine Beschreibung klingt, als würdest du ein JS-Framework wie ExtJS oder SenchaTouch verwenden. Davon hängt ab, wie die Lösung aussieht.

Also, ein paar mehr Details bitte, am besten inklusive einer Seite, die dein Problem demonstriert.

Gruß
Dennis

8

Hi,

eine solche Option für Popups gibt es nicht. Du musst die Mausposition selbst überwachen und dann die Kooridnaten, an denen das Popup erscheinen soll, anpassen. Vermutlich wirst du das Script an den entsprechenden Stellen anpassen müssen…

Have fun
Detlef

9

Hallo Thorsten,
er bringt mir beim verwenden vom event den Fehler „Object erforderlich“. Weißt du Warum?
e = window.event;
posx = e.clientX;

Die JS seiten werden übrigens vom CRM aufgerufen.

10

Hallo Alex,
nein, das ist nicht der ganze code. Der ist hier zu viel. Folgendes:
man kann diesem PopupWindow.show() optionen mitgeben, wo es angezeigt werden soll, also kooridnaten. Dazu brauche ich nun die Mausposition (Seitengröße-Mausposition => wenn Preview hin passt zeige an, sonst drüber).
Ich habe in eine JS datei (wir laden viele) folgende funktion geschreiben:

window.getMousePositionX = function (e) {
var posx;
if (!e)
e = window.event;
posx = e.clientX;

return posx;
}
Ich bekomme aber immer den Fehler, „Objekt erforderlich“ in der Zeile event.clientX. Irgendwie komme ich an das event Object nicht hin. Hast du nen Rat?

Es handelt sich übrigens hierbei um ein CRM. Das ist aber nicht wichtig.

11

Hallo,
nein, ich will den ganzen Code auch nicht hier, aber evtl. gibts ne URL, wo ich das im Internet sehen kann? Ansonsten fällt mir jetzt mal nur auf, dass ich das event window.getMousePositionX nicht kenne. Wenn ich stattdessen window.onclick schreibe, dann funktioniert es im Firefox, aber im IE immer noch nicht. Daher stellt sich auch die Frage, welchen Browser benutzt Du bzw. soll es letztendlich nicht auch in allen laufen? Du wirst daher wohl auch ne Browserweiche brauchen.
Gruß, Alex

12

Hallo!

Also ein Fenster kann nicht nachträglich geändert werden, alternativ kannst du ein Element einblenden und die Position ändern.

Ich hab ein kleines Beispiel gemacht, einfach in eine neue .html Datei einfügen und austesten:

.hidden
{
display:none;
position: absolute;
left: 0px;
top: 50px;
}

var x=0;
var y=50;
function einblenden() {
document.getElementById(„a1“).style.display = „block“;
}
function ausblenden() {
document.getElementById(„a1“).style.display = „none“;
}
function f_rechts() {
x=x+1;
document.getElementById(„a1“).style.left = x+„px“;
}
function f_links() {
x=x-1;
document.getElementById(„a1“).style.left = x+„px“;
}
function f_rauf() {
y=y-1;
document.getElementById(„a1“).style.top = y+„px“;
}
function f_runter() {
y=y+1;
document.getElementById(„a1“).style.top = y+„px“;
}
TEST

13

hallo mycapi,

ich habe hier nen code von jemand anderem. Aufgabe:
PopupWindow verschieben.

das window-objekt hat eine methode move_to:
http://de.selfhtml.org/javascript/objekte/window.htm…

gruß & hoffe geholfen zu haben
people

14

Moin.

Man kann natürlich jedes Objekt verschieben, indem man seine Koordinaten durch eine Funktion ändert. So sind auch manuell verschiebbare Objekte durch Anklicken des Titels realisiert.

Ich habe einmal einen Code auf meine Dropbox kopiert:
https://dl.dropbox.com/u/2398916/boxover2.1.zip
Dort kann man erkennen, wie der Tooltip bewegt wird.
Dann muss man nur noch auslesen, wo er sich gerade befindet und kann ihn dann ein paar Pixel nach oben schieben… oder es den Benutzer machen lassen.

Viele Grüße
Thomas