javascript rechtsklick menü?

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 9012

22.02.2006 - 11:59

ich will eine kleine anwesenheitsverwaltung schreiben. man bekommt eine tabelle für den aktuellen monat mit z.B. 30 kleinen buttons. durch mehrmaliges drücken kann man dann eintragen ob man da war, oder urlaub etc..

hab ich mit eurer hilfe soweit geschafft

ein button:

Code:

<td>Mittwoch<br /><input class="button" type="button" value="X" onclick="sw(this,'tag1')" /><input type="hidden" id="tag1" value="X" name="tag1" /></td>

das script dazu:

Code:

function sw(e, id) {
 var h = document.getElementById(id);
 switch (e.value) {
   case "": e.value="X"; h.value="X"; break;
   case " ": e.value="X"; h.value="X"; break;
   case "X": e.value="U"; h.value="U"; break;
   case "U": e.value="Z"; h.value="Z"; break;
   case "Z": e.value="K"; h.value="K"; break;
   case "K": e.value="A"; h.value="A"; break;
   case "A": e.value="D"; h.value="D"; break;
   case "D": e.value="S"; h.value="S"; break;
   case "S": e.value=" "; h.value=" "; break;
 }
}

funktioniert soweit prima. nur.. jetzt steht die frage danach das ganze auch per rechtsklick menü ändern zu können. also klick auf den button oder halt die zelle der tabelle die den jeweiligen tag repräsentiert, ein menü geht auf mit den kürzeln, man wählt das gewünschte und der status des buttons ändert sich.

google bringt mir nur rechtsklicksperren und ähnlichen schrott.. bitte um hilfe, vielleicht hat jemand schon mal sowas gemacht?..

big thx!

Bearbeitet von Umlüx am 27.02.2006, 13:38

freezer90

Ex SE Student

Registered: Aug 2002
Location: Linz
Posts: 768

22.02.2006 - 12:28

hi!

also ich hab sowas noch nie gemacht aber ich hätt folgende idee:
du könntest bei jedem klick auf ne zelle überprüfen ob es ein rechtskick war. anschließend holst du dir die x/y koordinaten vom mauszeiger und lässt an dieser stelle einen vorher versteckten <div>-tag erscheinen. in diesem sind dann alle optionen ... musst dir halt nur merken für welchen tag das menü geöffnet wurde.

hoffe das war halbwegs verständlich

und hth

lg
freezer90

master_burn

Legend
Loading . . 40% . . . 50%

Registered: Jul 2001
Location: near Quasi
Posts: 2479

22.02.2006 - 12:31

wenns klappt und es fertig is mach mal nen screenshot .. klingt interessant aber ich kann mir net 100% vorstellen wies aussieht

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 9012

22.02.2006 - 13:05

wie prüf ich obs ein rechtsklick war? gibts analog zu onclick auch sowas wie onrightclick?

freezer90

Ex SE Student

Registered: Aug 2002
Location: Linz
Posts: 768

22.02.2006 - 14:38

also ich hab jetzt herumprobiert und mitm rechtsklick funzt das nicht wirklich ...

hab dafür was mit linksklick geschrieben (nicht ff kompatibel :fresserettich:

)

Code:

<html>
<head>
<title>Contextmenu</title>
<script language="Javascript">
var activeID;

function showContextMenu(id) {
  activeID = id;
  with (document.getElementById("contextmenu").style) {
    top = document.body.scrollTop + event.clientY;
    left = document.body.scrollLeft + event.clientX;
    visibility = "visible";
  }
  return true;
}

function hideContextMenu() {
  document.getElementById("contextmenu").style.visibility = "hidden";
  return true;
}

function setValue(val) {
  var h = document.getElementById(activeID);
  h.value = val;
  return true;
}

</script>
<style type="text/css">
.contextmenu
{
  background-color: #FFFFFF;
  border: 1px solid #000000;
  position: absolute;
  top: -200px;
  left: -200px;
  visibility: hidden;
  width: 200px;

  color: #000000;
  font-family: Verdana;
  font-size: 11px;
}

.default
{
  color: #000000;
  background-color: #FFFFFF;
  cursor: default;
}

.hover
{
  color: #ffffff;
  background-color: #0000ff;
  cursor: default;
}
</style>
</head>

<body>
  <table id="contextmenu" class="contextmenu" cellspacing="0" cellpadding="2">
    <tr><td onClick="setValue('A');" 
            onMouseOver="this.className='hover'; return true;"
            onMouseOut="this.className='default'; return true;">Anwesend</td></tr>
    <tr><td onClick="setValue('K');" 
            onMouseOver="this.className='hover'; return true;"
            onMouseOut="this.className='default'; return true;">Krank</td></tr>
    <tr><td><hr width="98%"></td></tr>
    <tr><td onClick="hideContextMenu();" 
            onMouseOver="this.className='hover'; return true;"
            onMouseOut="this.className='default'; return true;">Abbrechen</td></tr>      
  </table>

  <table>
    <tr>
      <td>
        <a href="javascript:;" onClick="javascript:showContextMenu('tag1');">1</a>
        <a href="javascript:;" onClick="javascript:showContextMenu('tag2');">2</a>
      </td>
    </tr>
  </table>
</body>
</html>

hth

lg
freezer90

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 9012

22.02.2006 - 16:43

vielen dank, hab jetzt aber solang rumgesch.. bis ich eine lösung mit rechtsklick gefunden hab da ich zufällig über "oncontextmenu" gestolpert bin. ich trau mich die wurst gar ned hier posten...

ich blende nun mit rechtsklick ein menü ein das ich per css formatiere und positioniere.

neues Problem: ich habe ein kleines formular auf der selben seite. 2 dropdowns und ein button. zum wählen von monat und jahr also. das problem daran ist dass das div mitn menü unter den dropdown feldern verschwindet. wir kann ich das drüberlegen? auf z-index sprichts nicht so richtig an.

that

Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11343

22.02.2006 - 18:39

Ha, Dropdowns sind ein Hund!

Die sind oft "native" Controls (zumindest wars so bei IE), und halten sich daher weder an CSS noch an z-Order.

Workarounds:
- Dropdowns durch selbst gebaute Dinge ersetzen
- Dropdowns während des Popups durch ein Edit ersetzen

Beides üble Hacks, aber leider gehts nicht anderes.

kleinerChemiker

Here to stay

Registered: Feb 2002
Location: Wien
Posts: 4307

22.02.2006 - 19:38

ich hab ein skript für tooltips. ich schau dann nach und poste den link. das überprüft u.a. auch, ob was im weg ist und blendet es aus.

edit: hier der link: http://www.mojavelinux.com/projects/domtooltip/

Bearbeitet von kleinerChemiker am 22.02.2006, 19:49

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

22.02.2006 - 20:35

Viel Spaß (und Ärger) beim Testen im Opera

Das Wissen, dass Opera das nicht kann, hat mir einmal die ganze Freude an einer guten Idee genommen...

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 9012

23.02.2006 - 08:03

opera kann da leider gar nix (schade eigentlich). aber für alternativuser gibts ja noch die drauf und durchklick variante statt des rechtsklicks

flaimo

ILFTKYS

Registered: Dec 2001
Location: ask a ninja
Posts: 872

23.02.2006 - 13:19

Zitat von that
Ha, Dropdowns sind ein Hund!

Die sind oft "native" Controls (zumindest wars so bei IE), und halten sich daher weder an CSS noch an z-Order.

da betrifft sogar nur dropdowns. dieser bug wird in IE7 aber behoben sein

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 9012

27.02.2006 - 13:38

hab den mist einfach mal versetzt

Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 9012	22.02.2006 - 11:59 ich will eine kleine anwesenheitsverwaltung schreiben. man bekommt eine tabelle für den aktuellen monat mit z.B. 30 kleinen buttons. durch mehrmaliges drücken kann man dann eintragen ob man da war, oder urlaub etc.. hab ich mit eurer hilfe soweit geschafft ein button: Code: `<td>Mittwoch<br /><input class="button" type="button" value="X" onclick="sw(this,'tag1')" /><input type="hidden" id="tag1" value="X" name="tag1" /></td>` das script dazu: Code: `function sw(e, id) { var h = document.getElementById(id); switch (e.value) { case "": e.value="X"; h.value="X"; break; case " ": e.value="X"; h.value="X"; break; case "X": e.value="U"; h.value="U"; break; case "U": e.value="Z"; h.value="Z"; break; case "Z": e.value="K"; h.value="K"; break; case "K": e.value="A"; h.value="A"; break; case "A": e.value="D"; h.value="D"; break; case "D": e.value="S"; h.value="S"; break; case "S": e.value=" "; h.value=" "; break; } }` funktioniert soweit prima. nur.. jetzt steht die frage danach das ganze auch per rechtsklick menü ändern zu können. also klick auf den button oder halt die zelle der tabelle die den jeweiligen tag repräsentiert, ein menü geht auf mit den kürzeln, man wählt das gewünschte und der status des buttons ändert sich. google bringt mir nur rechtsklicksperren und ähnlichen schrott.. bitte um hilfe, vielleicht hat jemand schon mal sowas gemacht?.. big thx! Bearbeitet von Umlüx am 27.02.2006, 13:38
freezer90 Ex SE Student Registered: Aug 2002 Location: Linz Posts: 768	22.02.2006 - 12:28 hi! also ich hab sowas noch nie gemacht aber ich hätt folgende idee: du könntest bei jedem klick auf ne zelle überprüfen ob es ein rechtskick war. anschließend holst du dir die x/y koordinaten vom mauszeiger und lässt an dieser stelle einen vorher versteckten <div>-tag erscheinen. in diesem sind dann alle optionen ... musst dir halt nur merken für welchen tag das menü geöffnet wurde. hoffe das war halbwegs verständlich und hth lg freezer90
master_burn Legend Loading . . 40% . . . 50% Registered: Jul 2001 Location: near Quasi Posts: 2479	22.02.2006 - 12:31 wenns klappt und es fertig is mach mal nen screenshot .. klingt interessant aber ich kann mir net 100% vorstellen wies aussieht
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 9012	22.02.2006 - 13:05 wie prüf ich obs ein rechtsklick war? gibts analog zu onclick auch sowas wie onrightclick?
freezer90 Ex SE Student Registered: Aug 2002 Location: Linz Posts: 768	22.02.2006 - 14:38 also ich hab jetzt herumprobiert und mitm rechtsklick funzt das nicht wirklich ... hab dafür was mit linksklick geschrieben (nicht ff kompatibel ) Code: <html> <head> <title>Contextmenu</title> <script language="Javascript"> var activeID; function showContextMenu(id) { activeID = id; with (document.getElementById("contextmenu").style) { top = document.body.scrollTop + event.clientY; left = document.body.scrollLeft + event.clientX; visibility = "visible"; } return true; } function hideContextMenu() { document.getElementById("contextmenu").style.visibility = "hidden"; return true; } function setValue(val) { var h = document.getElementById(activeID); h.value = val; return true; } </script> <style type="text/css"> .contextmenu { background-color: #FFFFFF; border: 1px solid #000000; position: absolute; top: -200px; left: -200px; visibility: hidden; width: 200px; color: #000000; font-family: Verdana; font-size: 11px; } .default { color: #000000; background-color: #FFFFFF; cursor: default; } .hover { color: #ffffff; background-color: #0000ff; cursor: default; } </style> </head> <body> <table id="contextmenu" class="contextmenu" cellspacing="0" cellpadding="2"> <tr><td onClick="setValue('A');" onMouseOver="this.className='hover'; return true;" onMouseOut="this.className='default'; return true;">Anwesend</td></tr> <tr><td onClick="setValue('K');" onMouseOver="this.className='hover'; return true;" onMouseOut="this.className='default'; return true;">Krank</td></tr> <tr><td><hr width="98%"></td></tr> <tr><td onClick="hideContextMenu();" onMouseOver="this.className='hover'; return true;" onMouseOut="this.className='default'; return true;">Abbrechen</td></tr> </table> <table> <tr> <td> <a href="javascript:;" onClick="javascript:showContextMenu('tag1');">1</a> <a href="javascript:;" onClick="javascript:showContextMenu('tag2');">2</a> </td> </tr> </table> </body> </html> hth lg freezer90
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 9012	22.02.2006 - 16:43 vielen dank, hab jetzt aber solang rumgesch.. bis ich eine lösung mit rechtsklick gefunden hab da ich zufällig über "oncontextmenu" gestolpert bin. ich trau mich die wurst gar ned hier posten... ich blende nun mit rechtsklick ein menü ein das ich per css formatiere und positioniere. neues Problem: ich habe ein kleines formular auf der selben seite. 2 dropdowns und ein button. zum wählen von monat und jahr also. das problem daran ist dass das div mitn menü unter den dropdown feldern verschwindet. wir kann ich das drüberlegen? auf z-index sprichts nicht so richtig an.
that Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11343	22.02.2006 - 18:39 Ha, Dropdowns sind ein Hund! Die sind oft "native" Controls (zumindest wars so bei IE), und halten sich daher weder an CSS noch an z-Order. Workarounds: - Dropdowns durch selbst gebaute Dinge ersetzen - Dropdowns während des Popups durch ein Edit ersetzen Beides üble Hacks, aber leider gehts nicht anderes.
kleinerChemiker Here to stay Registered: Feb 2002 Location: Wien Posts: 4307	22.02.2006 - 19:38 ich hab ein skript für tooltips. ich schau dann nach und poste den link. das überprüft u.a. auch, ob was im weg ist und blendet es aus. edit: hier der link: http://www.mojavelinux.com/projects/domtooltip/ Bearbeitet von kleinerChemiker am 22.02.2006, 19:49
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	22.02.2006 - 20:35 Viel Spaß (und Ärger) beim Testen im Opera Das Wissen, dass Opera das nicht kann, hat mir einmal die ganze Freude an einer guten Idee genommen...
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 9012	23.02.2006 - 08:03 opera kann da leider gar nix (schade eigentlich). aber für alternativuser gibts ja noch die drauf und durchklick variante statt des rechtsklicks
flaimo ILFTKYS Registered: Dec 2001 Location: ask a ninja Posts: 872	23.02.2006 - 13:19 Zitat von that Ha, Dropdowns sind ein Hund! Die sind oft "native" Controls (zumindest wars so bei IE), und halten sich daher weder an CSS noch an z-Order. da betrifft sogar nur dropdowns. dieser bug wird in IE7 aber behoben sein
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 9012	27.02.2006 - 13:38 hab den mist einfach mal versetzt

javascript rechtsklick menü?

Forum Index > Software > Coding Stuff

Umlüx

freezer90

master_burn

Umlüx

freezer90

Umlüx

that

kleinerChemiker

tomstig

Umlüx

flaimo

Umlüx