Jana Fauck: Frage zum Wiki-Artikel ‚Kontextmenü‘

SELF-Forum

Frage zum Wiki-Artikel ‚Kontextmenü‘

Jana Fauck
– Informationen zu den Bewertungsregeln

problematische Seite

Hallo zusammen,

ich habe das Beispiel für das Kontextmenü für meine eigene Anwendung dahingehend abgeändert, dass ich als Elemente auf der Seite zwei Select-Boxen definiert habe. Diese sowie alle Optionen haben eigene ID's. Es wird bei rechts-Klick auch das Kontextmenü angezeigt. Aber nicht die jeweilige ID's. Mal die korrekte ID, mal die ID eines nachfolgenden Elements, mal el_0. Woran könnte es liegen?

Vielen Dank für Eure Hilfe.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Frage zum Wiki-Artikel ‚Kontextmenü‘

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Jana Fauck,

    ich habe das Beispiel für das Kontextmenü für meine eigene Anwendung dahingehend abgeändert, dass ich als Elemente auf der Seite zwei Select-Boxen definiert habe.

    Zeig bitte das abgeänderte Beispiel.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Frage zum Wiki-Artikel ‚Kontextmenü‘

      Jana Fauck (Versionen)
      – Informationen zu den Bewertungsregeln

      Zeig bitte das abgeänderte Beispiel.

      Hallo Matthias,

      hier kommt der HTML-Teil:

      <html>
<head>
	<title>Kontextmen&uuml;</title>
	<style>
</head>
<body> 

<h1>Kontext-Men&uuml;</h1>
<main>
	<table id="contexttable" class="system"></table>
	<div id="show" class="system" style="padding: 1px;"></div>
	<select id='ks'>
		<option id='mue'>M&uuml;ller</option>
		<option id='mei'>Meier</option>
		<option id='leh'>Lehmann</option>
		<option id='schm'>Schmidt</option>
		<option id='schu'>Schulze</option>
	</select> 
	<p>Hier eine andere Select-Box:</p>
	
	<select id='ls'>
		<option id='de'>DE</option>
		<option id='fr'>FR</option>
		<option id='pl'>PL</option>
	</select>
</main>

<script type="text/javascript">

var cursorx, cursory, cmenu;
cmenu = true;
cursorx = cursory = 0;

function create_id(element) {
	if (typeof element != "object" || element == null) return false;
	if (typeof element.id != "string" || !element.id) {
		var no = 0;
		while (document.getElementById("el_" + no)) no++;
		element.id = "el_" + no;
	}
	return element.id;
}

function handle_cursor(e) {
	if (!e) e = event;
	try {
		cursorx = e.clientX;
		cursory = e.clientY;
	} catch (e) {
		try {
			cursorx = e.screenX;
			cursory = e.screenY;
		} catch (e) {}
	}
	return true;
}
document.onmousemove = onmousemove = onmousedown = document.onmousedown =
	handle_cursor;
onload = function () {
	document.body.onmousemove = document.body.onmousedown = handle_cursor;
};

**HIER die angepasste Kontext-Menü-Funktion:
**function contextmenu() {
	if (!cmenu || cmenu == null) return true;
	hide("show");
	var element = get_focused_element();
	if (typeof element != "object" || !element) {
		hide_context();
		return true;
	}
	create_id(element);
	var output = '';
	 	 	
	output = '<tr><th>Kostenschl&uuml;ssel: ' + element.id + '<\/th><\/tr>'; 
	output +=
	//	'<tr><td onclick="cmenu = false;">Kostenschl&uuml;ssel zu Favoriten hinzuf&uuml;gen<\/td><\/tr>';
		'<tr><td onclick="hinzufuegen(id)">Kostenschl&uuml;ssel zu Favoriten hinzuf&uuml;gen<\/td><\/tr>';

	output +=
		'<tr><td onclick="entfernen(id)">Kostenschl&uuml;ssel aus Favoriten entfernen<\/td><\/tr>';

if (get_opacity(element) < 1) {
		output += '<tr><td onclick="transparent(\'' + element.id +
			'\', \'+\');">Weniger Transparent<\/td><\/tr>';
	}

	var contexttable = document.getElementById("contexttable");
	
	contexttable.innerHTML = output;
	contexttable.style.display = "block";
	var cl = contexttable.getBoundingClientRect();
	if (cursory + cl.height < innerHeight) {
		contexttable.style.top = cursory + "px";
	} else {
		contexttable.style.top = (cursory - cl.height) + "px";
	}
	if (cursorx + cl.width < innerWidth) {
		contexttable.style.left = cursorx + "px";
	} else {
		contexttable.style.left = (cursorx - cl.width) + "px";
	}
	return false;
}
function show(text) {
	var div = document.getElementById("show");
	div.style.display = "block";
	div.innerHTML = text +
		'<br><div align="center"><input type="button" onclick="hide(\'show\');" value="OK"><\/div>';
	var cl = div.getBoundingClientRect();
	var x = (innerWidth - cl.width) / 2;
	var y = (innerHeight - cl.height) / 2;
	div.style.top = y + "px";
	div.style.left = x + "px";
}

function get_focused_element() {
	var elements = document.getElementsByTagName("*");
	var focused_element = null;
	var body_came = false;
	var cl;
	
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].tagName.toLowerCase() == "body") {
			body_came = true;
			continue;
		}
		
		if (!body_came) continue;
		cl = elements[i].getBoundingClientRect();
		var height, width, x, y;
		height = cl.height;
		width = cl.width;
		x = cl.left;
		y = cl.top;
		if (cursorx > x && cursory > y && cursorx < x + width && cursory < y +
			height) {
				focused_element = elements[i];
		}
	}
	
	return focused_element;
}

function show_img(img) {
	img = document.getElementById(img);
	show('<a href="' + img.src + '"><img src="' + img.src + '"><\/a>');
}

function hide(element) {
	if (typeof element == "string") element = document.getElementById(element);
	if (typeof element != "object") return false;
	element.style.display = "none";
}

function show_attr(element, attr) {
	if (typeof element == "string") element = document.getElementById(element);
	show(element[attr]);
}

function hide_context() {
	hide("contexttable");
}
onclick = function (e) {
	if (e.which == 3) {
		return contextmenu();
	}
	hide_context();
	if (cmenu === null) cmenu = true;
}

function transparent(obj, dir) {
	if (typeof obj == "string") obj = document.getElementById(obj);
	if (typeof obj != "object") {
		throw "transparent: first arg not found!";
		return false;
	}
	var op = get_opacity(obj);
	eval("op " + dir + "= 0.5");
	if (op > 1) op = 1;
	if (op < 0) op = 0;
	obj.style.opacity = op;
}

function get_opacity(obj) {
	if (!obj.style.opacity) return 1;
	return Number(obj.style.opacity);
}

function entfernen(id){
	alert("KS entfernen" + id);
}
	
function hinzufuegen(id){
	alert("KS hinzufügen" + id);
}

</script>
</body>
</html>

      Ich hoffe, das hilft weiter. Vielen Dank.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Frage zum Wiki-Artikel ‚Kontextmenü‘

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Jana Fauck

        Zeig bitte das abgeänderte Beispiel.

        Mit „Zeigen“ war der URL zu deiner Seite gemeint, damit man sich das Problem ansehen kann.

        Aber vornweg schon mal was zu deinem HTML:

        <html>

        Die DOCTYPE-Angabe fehlt.

        Die Angabe der Sprache des Seiteninhalts fehlt.

        <head>
	<title>Kontextmen&uuml;</title>
	<style>
</head>

        Keine Angabe zur Zeichencodierung.

        Als Zeichencodierung solltest du UTF-8 verwenden und Umlaure wie ü als ü schreiben, nicht verst&uuml;mmeln.

        Die Angabe <meta name="viewport" content="width=device-width, initial-scale=1.0"/> fehlt.

        Es fehlt das </style>-End-Tag. Hier aber eher: Es ist ein <style>-Start-Tag zu viel da.

        LLAP 🖖

        --
        “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Frage zum Wiki-Artikel ‚Kontextmenü‘

          Jana Fauck (Versionen)
          – Informationen zu den Bewertungsregeln

          [Vollzitat entfernt]

          Hallo Gunnar,

          vielen Dank für Deinen Kommentar. Eine URL, auf die man von außen zugreifen kann, kann ich leider nicht bieten. Ich teste noch mit localhost. Und ich habe das CSS in den Code eingebunden. Das hatte ich jetzt nicht mit angegeben, da es dasselbe ist, wie im Beispiel. So fehlte das schließende </style>. Tut mir leid. Als DOCTYPE habe ich nur <!DOCTYPE html>.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln