philipp
Neues Mitglied
Hi
ich würd gerne ein Kontextmenü in meinem zukünftigen CMS-Backend integrieren, hab da mal was zusammengeschrieben, aber ich bin JStechnisch ein richtiger Newbie, hab nur minimal damit gearbeitet.
mein Problem: document.getElementById('ctxt#').offsetWidth erzeugt 0 (auch wenn style.display != none)
mein quelltext:
bitte hilfe
okay, das hab ich hinbekommen, aber jetz hab ich ne andere frage:
wie kann ich den rechtsklick als event nutzen?
falls es wen interessiert:
Beiträge zusammengeführt - Regeln lesen! (Frank)
ich würd gerne ein Kontextmenü in meinem zukünftigen CMS-Backend integrieren, hab da mal was zusammengeschrieben, aber ich bin JStechnisch ein richtiger Newbie, hab nur minimal damit gearbeitet.
mein Problem: document.getElementById('ctxt#').offsetWidth erzeugt 0 (auch wenn style.display != none)
mein quelltext:
HTML:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Mausklick (myevent,objID,divwidth) {
obj = document.getElementById(objID);
if (obj) {
obj.style.display = '';
var mX = myevent.clientX;
var mY = myevent.clientY;
var sX = window.innerWidth;
var sY = window.innerHeight;
if ((mX+divwidth) > sX)
var newX = mX-(divwidth-10);
else
var newX = mX-10;
if ((mY) >= (sY/2)) {
var diff = obj.offsetHeight;
var newY = mY-diff;
} else {
var newY = mY+10;
}
obj.style.left = newX + "px";
obj.style.top = newY + "px";
}
}
</script>
<style type="text/css">
* {font-family:sans-serif;font-size:12px;}
.ctxt {border:1px outset #999;width:150px;padding:0px;background:#DDD;position:absolute;}
.ctxt h1 {background:#555;color:#FFF;margin:0px;padding:1px 2px 1px 2px;}
.ctxt a:link, .ctxt a.active, .ctxt a:visited {display:block;padding:2px 1px 2px 1px;}
.ctxt a:hover {background:#000;color:#FFF;}
.ctxt p {margin:0px;padding:0px;}
</style>
</head>
<body>
<p><a onclick="Mausklick(event,'ctxt1',document.getElementById('ctxt1').offsetWidth);">Klick</a></p>
<div class="ctxt" style="display:none;" id="ctxt1" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">
<h1>Testmenu 1</h1>
<p>
<a href="">Kopieren</a>
<a href="">Einfuegen</a>
</p>
</div>
<div class="ctxt" style="display:none;" id="ctxt2" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">
<h1>Testmenu 2</h1>
<p>
<a href="">Kopieren</a>
<a href="">Einfuegen</a>
</p>
</div>
<p align="right"><br/><br/><br/><br/><br/><br/><br/><br/><br/><a onclick="Mausklick(event,'ctxt2',document.getElementById('ctxt2').offsetWidth);">Klick</a></p>
</body>
</html>
bitte hilfe
okay, das hab ich hinbekommen, aber jetz hab ich ne andere frage:
wie kann ich den rechtsklick als event nutzen?
falls es wen interessiert:
HTML:
/*
* a paragraph with ID "ctxt_ram" and blank innerHTML must be set in HTML file
* where thits script is included (best with style="display:none;")
* --------------------------------------------------------------------------
* example: onclick="ce_ctxt(event,ctxt1);"
* the display atribute has to be set to "none" in the Menu-Divs
* --------------------------------------------------------------------------
* Version 0.1.1
*/
function ce_ctxt(myevent,objID) {
obj = document.getElementById(objID);
var act_ctxt = document.getElementById('ctxt_ram').innerHTML;
if (act_ctxt != '') document.getElementById(act_ctxt).style.display='none';
if (obj) {
obj.style.display = '';
document.getElementById('ctxt_ram').innerHTML = objID;
var mX = myevent.clientX;
var mY = myevent.clientY;
if (navigator.appName.indexOf("Explorer") != -1) {
var sX = document.body.clientWidth;
var sY = document.body.clientHeight;
} else {
var sX = window.innerWidth;
var sY = window.innerHeight;
}
var divwidth = obj.offsetWidth;
if ((mX+divwidth) > sX)
var newX = mX-(divwidth-10);
else
var newX = mX-10;
if ((mY) >= (sY/2)) {
var diff = obj.offsetHeight;
var newY = mY-(diff-10);
} else {
var newY = mY-10;
}
obj.style.left = newX + "px";
obj.style.top = newY + "px";
}
}
Beiträge zusammengeführt - Regeln lesen! (Frank)
Zuletzt bearbeitet von einem Moderator: