offsetWidth Problem

philipp · 30 April 2007

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:

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)

Fredmonster · 2 Mai 2007

mit button bzw. which SELFHTML: JavaScript / Objektreferenz / event
SELFHTML: JavaScript / Objektreferenz / event

philipp · 11 Mai 2007

okay, aber wie kann ich jetzt das normale kontextmenu deaktivieren(dass nur meins kommt, wenn which!=1)?

soll ja nur im backend eingesetzt werden

bei tinymce gehts auch, also muss es möglich sein

da_loki · 11 Mai 2007

Schau doch mal in den TinyMCE Code hinein -.-
Da das OpenSource ist afaik, darfst du das sogar ;)

philipp · 15 Mai 2007

deshalb frag ich ja hier.. ich kann zwar reinsehen, aber verstehen tu ich da sogut wie nix, das is mir einfach zu komplex. bei einem anderen beispiel hab ich gesehn, dass ein return false dafür sorgt, dass kein orig. kontextmenü kommt, aber bei mir is es ned so :(

edit: oncontextmenu hat geholfen

HTML:

<html>
<head>
<title>JSTEST</title>
<script language="javascript" type="text/javascript">
function ce_ctxt(myevent,objID) {
 if (myevent.which != 1) {
  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);
   else
    var newX = mX;
   
   if ((mY) >= (sY/2)) {
    var diff = obj.offsetHeight;
    var newY = mY-(diff);
   } else {
    var newY = mY;
   }
      
   obj.style.left  = newX + "px";
   obj.style.top = newY + "px";
   return false;
  }
 } 
}
function ce_display(myobjid) {
 if (document.getElementById(myobjid).style.display=='')
  document.getElementById(myobjid).style.display='none';
 else 
  document.getElementById(myobjid).style.display='';
}
function ce_hidectxt(myevent) {
 if (myevent.which == 1 || myevent.button == 1) {
  var act_ctxt = document.getElementById('ctxt_ram').innerHTML;
  document.getElementById(act_ctxt).style.display='none';
 }
}
</script>
<style type="text/css">
html, body {width:100%;height:100%;margin:0px;padding:0px;}
* {font-family:sans-serif;}
#ctxt_ram {display:none;}
.ce_ctxtmenu {position:absolute;background:#EEE;border:1px solid #AAA;}
.ce_ctxtmenu h1 {background:#AAA;margin:0px;padding:2px;color:#EEE;font-size:16px;text-decoration:none;font-weight:bold;text-align:center;vertical-align:middle;text-transform:none;}
.ce_ctxtmenu ul {border:0px;border-bottom:1px solid #AAA;padding:0px;margin:0px;list-style-type:none;}
.ce_ctxtmenu li {display:inline;margin:0px;padding:0px;}
.ce_ctxtmenu a:link, .ce_ctxtmenu a:active, .ce_ctxtmenu a:visited {color:#666;display:block;padding:2px;	text-decoration:none;font-size:13px;}
.ce_ctxtmenu a:hover {color:#EEE;background:#666;}
</style>
</head>
<body onmouseup="ce_hidectxt(event);">
<p id="ctxt_ram"></p>
<div id="menu1" class="ce_ctxtmenu" style="display:none;">
<h1>Aufgaben</h1>
<ul>
 <li><a href="">Kopieren</a></li>
 <li><a href="">Einf&uuml;gen</a></li>
</ul>
<ul>
 <li><a href="">Schlie&szlig;en</a></li>
</ul>
</div>

<table width="100%" height="100%" border="0px" cellpadding="0px" cellspacing="0px">
 <tr>
  <td align="left" valign="top"><p><a  oncontextmenu="ce_ctxt(event, 'menu1');return false;">Test</a></p></td>
 </tr>
 <tr>
  <td align="right" valign="bottom"><p><a  oncontextmenu="ce_ctxt(event, 'menu1');return false;">Test</a></p></td>
 </tr>
</table>
</body>
</html>

offsetWidth Problem

philipp

Neues Mitglied

Fredmonster

Neues Mitglied

philipp

Neues Mitglied

da_loki

Guest

philipp

Neues Mitglied

Neueste Beiträge