Browser-Popup Fenster mit rechter Maustaste
Hallo zusammen,
hoffe, Ihr hattet soweit schöne Weihnachten. Sie sind leider rum und die täglichen "wichtigen" Fragen tauchen wieder auf
Ich bin am Entwickeln einer Web-Applikation mit Grundwerkzeugen (Javascript/PHP/ASP...).
Da ich möglichst nahe am Erscheinungsbild der Desktop-Applikationen bleiben will, möchte ich das Browser-Menü der rechten Maustaste
selber steuern können. Da ich schon einiges an Javascript und CSS in den Dateien habe, wäre es mir am liebsten, wenn
ich mit der rechten Maustaste ein Popup-Fenster öffnen könnte, dass mein eigenes Menü enthält.
Da der Inhalt des Menüs abhängig davon ist, an welcher Stelle die rechte Maustaste auf der Seite gedrückt wurde, brauche ich eine
gewisse Dynamik bzgl. des Menü-Inhaltes.
Eine statische CSS-Lösung für die Maustaste habe ich schon ( http://chaoslayer.de/-%20test%20-/events.html ), die bringt mich jedoch nur bedingt weiter.
Hat jemand eine Idee?
Vielen Dank für Euer Feedback und Guten Rutsch.
Gruss
Ich vergaß vielleicht zu sagen, dass die Popup-Blocker wahrscheinlich ein Problem hierbei sind. Ein "window.open" bei normalem
Klick ist ja möglich. Ich bräuchte das eben mit der rechten Maustaste. Oder vielleicht doch dynamisches CSS, falls das geht?
hoffe, Ihr hattet soweit schöne Weihnachten. Sie sind leider rum und die täglichen "wichtigen" Fragen tauchen wieder auf
Ich bin am Entwickeln einer Web-Applikation mit Grundwerkzeugen (Javascript/PHP/ASP...).
Da ich möglichst nahe am Erscheinungsbild der Desktop-Applikationen bleiben will, möchte ich das Browser-Menü der rechten Maustaste
selber steuern können. Da ich schon einiges an Javascript und CSS in den Dateien habe, wäre es mir am liebsten, wenn
ich mit der rechten Maustaste ein Popup-Fenster öffnen könnte, dass mein eigenes Menü enthält.
Da der Inhalt des Menüs abhängig davon ist, an welcher Stelle die rechte Maustaste auf der Seite gedrückt wurde, brauche ich eine
gewisse Dynamik bzgl. des Menü-Inhaltes.
Eine statische CSS-Lösung für die Maustaste habe ich schon ( http://chaoslayer.de/-%20test%20-/events.html ), die bringt mich jedoch nur bedingt weiter.
Hat jemand eine Idee?
Vielen Dank für Euer Feedback und Guten Rutsch.
Gruss
Ich vergaß vielleicht zu sagen, dass die Popup-Blocker wahrscheinlich ein Problem hierbei sind. Ein "window.open" bei normalem
Klick ist ja möglich. Ich bräuchte das eben mit der rechten Maustaste. Oder vielleicht doch dynamisches CSS, falls das geht?
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 76712
Url: https://administrator.de/contentid/76712
Ausgedruckt am: 25.11.2024 um 12:11 Uhr
8 Kommentare
Neuester Kommentar
hallo,
das hat nicht wirklich direkt was mit CSS zu tun.
Zunächst musst Du dein Popup designen. Mit oder ohne CSS.
Jetzt hast Du mehrere Möglichkeiten.
1) AJAX
2) Nur Javascript
Auf jeden Fall brauchst Du in der Seite dann:
Für 1:
=======
Du speichers das Popupdesign als POPUP.PHP ab. In dieser POPUP.PHP wird dann das Popup anhand der Parameter aufgebaut. (Die POPUP.PHP wird ja Parameter empfangen die per GET oder POST ausgelesen werden
können). Das Resultat schreibst Du dann in den <div> Container. Das sieht dann so aus:
External.open('GET', './POPUP.PHP?a=1&b=2', true);
Die Parameter für die Variablen a und b übergibts Du dann an die Funktion GetPopUp(). Man lädt also die Ausgabe der PHP Seite "live" in den Div container hinein. Und das bei jedem Aufruf der Datei.
Für 2:
=======
Du schreibst die Tabelle gleich in den Quellcode der Hauptseite rein:
Um dann mittels Javascript die innerHTML-Werte von ITEM1 und ITEM2 on the Fly zu generieren.
Wie gesagt ist schwer etwas vorzuschlagen wenn mann die Richtung nicht weiss. Was genau willst Du denn anzeigen? Kannst Du mal ein Beispiel geben?
mfG
das hat nicht wirklich direkt was mit CSS zu tun.
Zunächst musst Du dein Popup designen. Mit oder ohne CSS.
Jetzt hast Du mehrere Möglichkeiten.
1) AJAX
2) Nur Javascript
Auf jeden Fall brauchst Du in der Seite dann:
<div id="MEINDIVPOPUP" style="visibility:hidden"></div>
Für 1:
=======
Du speichers das Popupdesign als POPUP.PHP ab. In dieser POPUP.PHP wird dann das Popup anhand der Parameter aufgebaut. (Die POPUP.PHP wird ja Parameter empfangen die per GET oder POST ausgelesen werden
können). Das Resultat schreibst Du dann in den <div> Container. Das sieht dann so aus:
function GetPopUp() {
var External = null;
if (typeof XMLHttpRequest != 'undefined') { External = new XMLHttpRequest(); }
if (!External) {
try {
External = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
External = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
External = null;
}
}
}
if (External) {
External.open('GET', './POPUP.PHP?a=1&b=2', true);
External.onreadystatechange = function () {
if (External.readyState == 4) {
document.getElementById('MEINDIVPOPUP').innerHTML = External.responseText;
}
};
External.send(null);
}
document.getElementById('MEINDIVPOPUP').style.visibility = 'visible';
}
<a href="#" onRightClick="GetPopUp()">Link</a>
External.open('GET', './POPUP.PHP?a=1&b=2', true);
Die Parameter für die Variablen a und b übergibts Du dann an die Funktion GetPopUp(). Man lädt also die Ausgabe der PHP Seite "live" in den Div container hinein. Und das bei jedem Aufruf der Datei.
Für 2:
=======
Du schreibst die Tabelle gleich in den Quellcode der Hauptseite rein:
<div id="MEINDIVPOPUP" style="visibility:hidden">
<table>
<tr>
<td><div id="ITEM1"></div></td>
</tr>
<tr>
<td><div id="ITEM2"></div></td>
</tr>
</table>
</div>
Um dann mittels Javascript die innerHTML-Werte von ITEM1 und ITEM2 on the Fly zu generieren.
function GetPopUP(a, b) {
document.getElementById('ITEM1').innerHTML = '<a href="meinlink?a=' + a + '&b=' + b">Eintrag 1</a>';
document.getElementById('ITEM2').innerHTML = '<a href="meinlink?a=' + a + '&b=' + b">Eintrag 2</a>';
}
Wie gesagt ist schwer etwas vorzuschlagen wenn mann die Richtung nicht weiss. Was genau willst Du denn anzeigen? Kannst Du mal ein Beispiel geben?
mfG
Also du kannst auch Tabellen dynamisch per Javascript zur Laufzeit verändern oder erstellen.
So ungefähr würde das aussehen. Ich nehme aber dann doch immer lieber PHP anstatt Javascript.
Aber es geht natürlich auch beim OnRightClick-Event eine neue Tabelle zu erstellen. Nun kannst Du ja je nach Object beliebig viele Zeilen hinzufügen.
Du musst nur immer darauf achten dass die Objekte auch wirklich schon erstellt wurden, wenn Du darauf zugreifst. Ausserdem am Besten nach dem Schliessen das erstellte Objekt wieder löschen. (Was geschieht wenn der Benutzer nur ne Stunde Kontextmenüs öffnet? Die bleiben sonst die ganze Zeit im Speicher.)
Also persönlich finde ich window.open keine gute Idee. Wie Du selbst bereits gesagt hast, greifen die Popupblocker, die Fenster müssen dann extra positionniert werden, Fenstergrössen stimmen nicht immer, Du musst Fensterübergreifend programmieren, etc.
mfG
var Tabelle = document.createElement("table");
var TR = Tabelle.insertRow(0);
var TD1 = document.createElement("td");
var TD1TEXT = document.createTextNode("<b>Hallo</b> Welt");
TD1.appendChild(TD1TEXT);
TR.appendChild(TD1);
So ungefähr würde das aussehen. Ich nehme aber dann doch immer lieber PHP anstatt Javascript.
Aber es geht natürlich auch beim OnRightClick-Event eine neue Tabelle zu erstellen. Nun kannst Du ja je nach Object beliebig viele Zeilen hinzufügen.
Du musst nur immer darauf achten dass die Objekte auch wirklich schon erstellt wurden, wenn Du darauf zugreifst. Ausserdem am Besten nach dem Schliessen das erstellte Objekt wieder löschen. (Was geschieht wenn der Benutzer nur ne Stunde Kontextmenüs öffnet? Die bleiben sonst die ganze Zeit im Speicher.)
Also persönlich finde ich window.open keine gute Idee. Wie Du selbst bereits gesagt hast, greifen die Popupblocker, die Fenster müssen dann extra positionniert werden, Fenstergrössen stimmen nicht immer, Du musst Fensterübergreifend programmieren, etc.
mfG
Ja, der Server wird kurzzeitig bemüht. Ich habe auch nicht gesagt, dass es eine gute Methode ist ;) Aber ich bin etwas Javascript faul ;)
Ist aber jetzt ungetestet .
mfG
function MoveTableTo(tbl, x, y) {
tbl.style.visibility = "visible";
tbl.style.left = x;
tbl.style.top = y;
tbl.style.position = "absolute";
}
Ist aber jetzt ungetestet .
mfG