✔ Kontextmenü für Firefox

Pinky · 30. Mai 2008

--- EXKURS ---
DIE LÖSUNG DES PROBLEMS BEFINDET SICH AM SCHLUSS DES THREADS.
--- EXKURS ---

Hallo liebe Leute,

ich möchte gerne ein Kontextmenü auf meiner Homepage integrieren. Das heisst, sobald jemand auf einen entsprechenden Link die rechte Maustaste betätigt, sollen folgende Optionen aufklappen:

---------------------------
Neuer Eintrag
Eintrag bearbeiten
Eintrag löschen
---------------------------

Nun habe ich noch einige wenige Ansprüche:
- ich möchte das Kontextmenü mittels CSS formatieren können
- das Menü soll in allen gängigen Browsern (IE & FF) benutzbar sein

Kann mir jemand irgend einen Codeschnipsel zu meinen Wünschen organisieren? Ich suchte auf Google, doch irgendwie kam ich zu keinem Ergebnis.

Herzlichen Dank für jegliche Hilfe
Euer Pinky

Maik · 30. Mai 2008

Hi.

Pinky hat gesagt.:
Ich suchte auf Google, doch irgendwie kam ich zu keinem Ergebnis.

Mit dem Suchbegriff contextmenu js bin ich gleich zu einem ansehnlichen Ergebnis gekommen:

http://www.webtoolkit.info/javascript-context-menu.html

Pinky · 30. Mai 2008

Hallo,

ich habe bereits alle Versionen von Google ausprobiert, doch die passen nicht in mein Schema. Ich möchte, dass das Menu nur dan aufgerufen wird, wenn ein Rechtsklick auf einen LINK erfolgt. Bei den Beispielen von Google wird das Contextmenu immer für die ganze Seite aufgerufen, doch ich möchte das nicht.

Dieses Menu heisst doch zu Deutsch "Kontextmenü" oder Englisch "Contextmenu". Ich versuchte mit beiden Begriffe etwas passendes zu entdecken, doch wie gesagt: erfolglos.

Gruss
Pinky

Maik · 30. Mai 2008

Pinky hat gesagt.:
Ich möchte, dass das Menu nur dan aufgerufen wird, wenn ein Rechtsklick auf einen LINK erfolgt.

Dann tausch einfach in meinem verlinkten Beispiel diese Zeilen:

Code:

<div class="container1" style="border: 1px dashed red; margin-top: 30px; height: 50px; background: #f2f2f2;"></div>
<div class="container2" style="border: 1px dashed blue; margin-top: 30px; height: 50px; background: #f2f2f2;"></div>

gegen diese hier aus:

Code:

<ul>
    <li><a href="#" class="container1">link 1</a></li>
    <li><a href="#" class="container2">link 2</a></li>
</ul>

Pinky · 31. Mai 2008

Hallo Leute, ich bins nochmal

ich hab mal über das Problem geschlafen und heute noch mal kurz probiert. Und siehe da, es funktioniert doch bereits einiges besser. Ich habe den Code, der das Menu erstellt einfach in die While-Schlweife reinkopiert. Doch leider weist er dem Link noch nicht die ID zu, die auch zum Eintrag gehört, sonder immer jene vom letzen Eintrag. Ich verstehe das nicht, da das menu ja eigentlich für jeden Eintrag durch die While-Schleife Individuell angepasst wird.

Folgend sieht der neue Code zur Zeit aus:

PHP:

<script type="text/javascript">
	d = new dTree('d');
	d.add(0,-1,'Textverwaltung');
	
<?
	while ($tmp = mysql_fetch_assoc($res)) {
?>
	$(document).ready(function() {
		$('a.menu1').contextMenu('contextmenu', 
		{	
			bindings:
			{
				'new': function(t) { window.location.href="?modul=texte&file=newsneu&threadid=<? echo $tmp[id]; ?>"; },
				'newebene': function(t) { alert('Trigger was '+t.id+'\nAction was Email'); },
				'edit': function(t) { alert('Trigger was '+t.id+'\nAction was Save'); },
				'delete': function(t) { alert('Trigger was '+t.id+'\nAction was Delete'); }
			}
		});
	});

	d.add('<? echo $tmp[id]; ?>', '<? echo $tmp[ebene]; ?>', '<a href="?id=<? echo $tmp[id]; ?>" class="menu1"><? echo $tmp[titel]; ?></a>');

<? } ?> 

	document.write(d);

</script>

Ein herzliches Dankeschön für jegliche Hilfe
Euer Pinky

Pinky · 31. Mai 2008

Hallo Leute,

ich habe nun das Contextmenu gewechselt. Bin auf das umgestiegen, das mir Maik empfohlen hat. Vielleicht weiss jetzt jemand rat, wie ich dem Link die ensprechende ID zuweisen kann. Grundsätzliche Frage: "Ist das überhaupt möglich?"

Hier mein neuer Code:

HTML:

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+<? echo $tmp[id]; ?>+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

Doch lieder zeigt es mir auch hier nur immer die selbe ID an. In diesem Falle die ID mit dem höchsten Wert.

Vielen Dank für jegliche Antwort und eine schönen Abend
Euer Pinky

Pinky · 1. Juni 2008

Guten Morgen liebe Leute,

leider weiss niemand auf mein Problem eine Antwort. Ich habe jedoch neue Informationen für euch. Das spannende an der ganzen Sache ist, dass wenn ich den Quellcode anzeige, mir die IDs dem menu richtig zugewiesen werden. Doch ich denke das Problem liegt daran, dass JavaScript das Menu schlussendlich doch nur einmal erstellt und dan einfach den ersten Eintrag nimmt! So sieht der Code zur Zeit aus:

Code:

<script type="text/javascript">
	d = new dTree('d');
	d.add(0,-1,'Textverwaltung');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+53+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('53', '52', '<a href="#?53" class="container1">Link 1</a>');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+52+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('52', '43', '<a href="#?52" class="container1">Link 2</a>');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+51+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('51', '42', '<a href="#?51" class="container1">Link 3</a>');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+47+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('47', '43', '<a href="#?47" class="container1">Link 4</a>');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+43+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('43', '0', '<a href="#?43" class="container1">Link 5</a>');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+42+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('42', '0', '<a href="#?42" class="container1">Link 6</a>');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+40+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('40', '42', '<a href="#?40" class="container1">Link 7</a>');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+37+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('37', '42', '<a href="#?37" class="container1">Link 8</a>');

	document.write('<div id="container">'+
	'<ul id="CM1" class="SimpleContextMenu">'+
	'<li><a href="#'+35+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

	d.add('35', '43', '<a href="#?35" class="container1">Link 9</a>');

document.write(d);

Nu frage ich mich folgendes: Ich gebe doch jedem Eintrag, den ich über das TreeMenu ausgebe einen Linkname mit. Ist es nun irgendwie möglich, mittels JavaScript die Linkadresse herauszulesen, auf welche die rechte Maustaste Klickt? Dank könnte ich ja eigentlich den Link herauslesen, nach ID aufsplitten und nur noch die entsprechende Nummer dem Menu übergeben. Wisst ihr, was ich meine?

Herzlichen Dank auf jeden Fall für jegliche Antwort & einen schönen Sonntag
Euer Pinky

Quaese · 1. Juni 2008

Hi,

wie initialisierst du denn die unterschielichen Kontextmenues?

Für mich hört es sich so an, als würden alle durch einen einzigen Aufruf in der Form

Code:

SimpleContextMenu.attach('container', 'CM1');

initialisiert werden. Da sich dies auf das Element mit der ID CM1 bezieht, eine ID innerhalb eines Dokuments jedoch eindeutig sein muss, wird immer das erste Kontextmenue geöffnet und hätte immer das Übergeben der gleichen ID zur Folge.

Als Lösung könntest du gezielt Klassennamen für den entsprechenden Link sowie die zugehörige ID beim Initialisieren übergeben.

Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>My project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="webtoolkit.contextmenu.css" />
    <script type="text/javascript" src="webtoolkit.contextmenu.js"></script>

    <script type="text/javascript">
        SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});

        // Initialisieren der unterschiedlichen Kontextmenues
        SimpleContextMenu.attach('container01', 'CM01');
        SimpleContextMenu.attach('container02', 'CM02');
        SimpleContextMenu.attach('container03', 'CM03');
    </script>
</head>
<body>

<script type="text/javascript">
  <!--
  document.write('<a href="#?53" class="container01">Link 1</a>');
	document.write('<div id="container">'+
	'<ul id="CM01" class="SimpleContextMenu">'+
	'<li><a href="#'+53+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

  document.write('<a href="#?53" class="container02">Link 2</a>');
	document.write('<div id="container">'+
	'<ul id="CM02" class="SimpleContextMenu">'+
	'<li><a href="#'+52+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

  document.write('<a href="#?53" class="container03">Link 3</a>');
	document.write('<div id="container">'+
	'<ul id="CM03" class="SimpleContextMenu">'+
	'<li><a href="#'+51+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');
 //-->
</script>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese

Pinky · 1. Juni 2008

Lieber Quaese,

das ist des Rätsels Lösung. Herzlichen Dank, du hast mich vor weiteren, mühevollen Stunden im Internet bewahrt. Vielen vielen Dank.

Der Lösungscode sieht nun so aus ($num ist die Totale Anzahl aus der Datenbank):

PHP:

<?
	$i = 1;
	while ($i <= $num) {
?>
	SimpleContextMenu.attach('container<? echo $i; ?>', 'CM<? echo $i; ?>');
<?
	$i++;
	}
?>

Und unten, wo ich das Menu erstelle:

HTML:

document.write('<div id="container">'+
	'<ul id="CM<? echo $i; ?>" class="SimpleContextMenu">'+
	'<li><a href="id=?'+<? echo $tmp[id]; ?>+'"><img src="icons/admin_new.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag erstellen</a></li>'+
	'<li><a href="#"><img src="icons/admin_new_ebene.gif" align="top" style="margin:5px 10px; margin-left:3px;">Neuer Eintrag eine Ebene einrücken</a></li>'+
	'<li><a href="#"><img src="icons/admin_edit.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag bearbeiten</a></li>'+
	'<li><a href="#"><img src="icons/admin_delete.gif" align="top" style="margin:5px 10px; margin-left:3px;">Eintrag löschen</a></li>'+
	'</ul>'+
	'</div>');

Pinky · 1. Juni 2008

Nun habe ich noch eine allerletze Frage zu meine Kontextmenu (kleiner Schönheitsfehler)! Wenn ich das Menü über Rechtsklick aufrufe, dann erscheint das so weit entfernt von der Maus. Kann ich das irgendwie ändern? Ich poste mal den CSS sowie den .js - Code für das Menu:

CSS

PHP:

ul.SimpleContextMenu {

	display: none;
	position: absolute;

	margin: 0px left;

	padding: 1px;
	font-family: Trebuchet MS;

	font-size: 11px;

	list-style-type: none;

	border: 1px solid #999999;
	background-color:white;
}


ul.SimpleContextMenu li {
 
	background-color:white;
}
ul.SimpleContextMenu li a {

	display: block;

	width: auto;

	text-decoration: none;

	color: black;

	background-color:white;
	padding-right:5px;
	border: 1px solid white;
}


ul.SimpleContextMenu li a:hover {

	border:1px solid #0a246a;
	text-decoration: none;

	color: black;

	background-color:white;
}

Und hier den .js- Code

PHP:

var SimpleContextMenu = {

	// private attributes
	_menus : new Array,
	_attachedElement : null,
	_menuElement : null,
	_preventDefault : true,
	_preventForms : true,


	// public method. Sets up whole context menu stuff..
	setup : function (conf) {

		if ( document.all && document.getElementById && !window.opera ) {
			SimpleContextMenu.IE = true;
		}

		if ( !document.all && document.getElementById && !window.opera ) {
			SimpleContextMenu.FF = true;
		}

		if ( document.all && document.getElementById && window.opera ) {
			SimpleContextMenu.OP = true;
		}

		if ( SimpleContextMenu.IE || SimpleContextMenu.FF ) {

			document.oncontextmenu = SimpleContextMenu._show;
			document.onclick = SimpleContextMenu._hide;

			if (conf && typeof(conf.preventDefault) != "undefined") {
				SimpleContextMenu._preventDefault = conf.preventDefault;
			}

			if (conf && typeof(conf.preventForms) != "undefined") {
				SimpleContextMenu._preventForms = conf.preventForms;
			}

		}

	},


	// public method. Attaches context menus to specific class names
	attach : function (classNames, menuId) {

		if (typeof(classNames) == "string") {
			SimpleContextMenu._menus[classNames] = menuId;
		}

		if (typeof(classNames) == "object") {
			for (x = 0; x < classNames.length; x++) {
				SimpleContextMenu._menus[classNames[x]] = menuId;
			}
		}

	},


	// private method. Get which context menu to show
	_getMenuElementId : function (e) {

		if (SimpleContextMenu.IE) {
			SimpleContextMenu._attachedElement = event.srcElement;
		} else {
			SimpleContextMenu._attachedElement = e.target;
		}

		while(SimpleContextMenu._attachedElement != null) {
			var className = SimpleContextMenu._attachedElement.className;

			if (typeof(className) != "undefined") {
				className = className.replace(/^\s+/g, "").replace(/\s+$/g, "")
				var classArray = className.split(/[ ]+/g);

				for (i = 0; i < classArray.length; i++) {
					if (SimpleContextMenu._menus[classArray[i]]) {
						return SimpleContextMenu._menus[classArray[i]];
					}
				}
			}

			if (SimpleContextMenu.IE) {
				SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentElement;
			} else {
				SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentNode;
			}
		}

		return null;

	},


	// private method. Shows context menu
	_getReturnValue : function (e) {

		var returnValue = true;
		var evt = SimpleContextMenu.IE ? window.event : e;

		if (evt.button != 1) {
			if (evt.target) {
				var el = evt.target;
			} else if (evt.srcElement) {
				var el = evt.srcElement;
			}

			var tname = el.tagName.toLowerCase();

			if ((tname == "input" || tname == "textarea")) {
				if (!SimpleContextMenu._preventForms) {
					returnValue = true;
				} else {
					returnValue = false;
				}
			} else {
				if (!SimpleContextMenu._preventDefault) {
					returnValue = true;
				} else {
					returnValue = false;
				}
			}
		}

		return returnValue;

	},


	// private method. Shows context menu
	_show : function (e) {

		SimpleContextMenu._hide();
		var menuElementId = SimpleContextMenu._getMenuElementId(e);

		if (menuElementId) {
			var m = SimpleContextMenu._getMousePosition(e);
			var s = SimpleContextMenu._getScrollPosition(e);

			SimpleContextMenu._menuElement = document.getElementById(menuElementId);
			SimpleContextMenu._menuElement.style.left = m.x + s.x + 'px';
			SimpleContextMenu._menuElement.style.top = m.y + s.y + 'px';
			SimpleContextMenu._menuElement.style.display = 'block';
			return false;
		}

		return SimpleContextMenu._getReturnValue(e);

	},


	// private method. Hides context menu
	_hide : function () {

		if (SimpleContextMenu._menuElement) {
			SimpleContextMenu._menuElement.style.display = 'none';
		}

	},


	// private method. Returns mouse position
	_getMousePosition : function (e) {

		e = e ? e : window.event;
		var position = {
			'x' : e.clientX,
			'y' : e.clientY
		}

		return position;

	},


	// private method. Get document scroll position
	_getScrollPosition : function () {

		var x = 0;
		var y = 0;

		if( typeof( window.pageYOffset ) == 'number' ) {
			x = window.pageXOffset;
			y = window.pageYOffset;
		} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
			x = document.documentElement.scrollLeft;
			y = document.documentElement.scrollTop;
		} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
			x = document.body.scrollLeft;
			y = document.body.scrollTop;
		}

		var position = {
			'x' : x,
			'y' : y
		}

		return position;

	}

}

Herzlichen Dank für jegliche Antwort!
Euer Pinky

✔ Kontextmenü für Firefox

Pinky

Erfahrenes Mitglied

Maik

Pinky

Erfahrenes Mitglied

Maik

Pinky

Erfahrenes Mitglied

Pinky

Erfahrenes Mitglied

Pinky

Erfahrenes Mitglied

Quaese

Moderator

Pinky

Erfahrenes Mitglied

Pinky

Erfahrenes Mitglied

Neue Beiträge