[JavaScript] Kontextmenü mit eigenem Design

ConditionZero · Verfasst: Fr 07.05.10 21:24

Moin,

ich hoffe, dass ich mit meinem Anliegen im OT-Bereich richtig bin, falls nicht sorry.

Vorweg muss ich anmerken, dass ich so gut wie keine Kenntnisse in Javascript habe. Ich habe es bisher auch nie gebraucht.

Ich arbeite im Moment an einer Homepage, einer Fanpage für ein MMORPG. Das Design soll aber etwas besonderes sein, was sich allein mit HTML kaum realisieren lässt. Also habe ich mir überlegt, statt der normalen Menüführung in einem Frame oder einer Tabelle an der Seite diese über das Kontextmenü der Page zu führen.
Jetzt sieht das Design des Windows-Kontextmenü ziemlich langweilig aus und es wäre auch kein Unikat, also habe ich ein eigenes Menü entworfen. Momentan als animiertes GIF + pro Button ein eigenes Bitmap, in dem dessen Farben als Hervorhebung invertiert sind. Beide GIF's und alle Bitmaps haben die einheitliche Größe von 87*288 Pixel.

Folgende Funktion möchte ich erreichen:
Bei Rechtsklick geht das Kontextmenü (GIF-Animation) auf. Während der circa 0,5 Sekunden langen Animation sollte das Menü und die Buttonhervorhebung noch nicht funktionieren, da die Animation das Menü erst "aufbaut". Wenn das Menü aufgebaut ist, sprich die Animation fertig ist, soll die Hervorhebung - und natürlich die Links der Buttons - funktionieren.
Hervorhebung heißt, dass sobald man mit der Maus über ein Button fährt, das jeweilige Bitmap mit dem Menü, indem der Button hervorgehoben ist, über das GIF gelegt werden soll. Wenn das Kontextmenü schließt soll eine weitere GIF-Animation darüber gelegt werden, welche das Menü wieder "einklappt".

So nun ein paar Fragen zu dem langen Text:

1. Wäre es denn einfacher das alles als modifiziertes Kontextmenü zu realisieren, oder dieses bei Aufruf blockieren und einfach die Animation an entsprechender Stelle abzuspielen?

2. Wie kann ich dann herausfinden, welcher Button auf der Animation geklickt wurde? Einfach beim erstellen des Menüs die Positionen berechnen und überprüfen, ob auf einen der Bereiche geklickt wird?

3. Ist das ganze Vorhaben überhaupt realistisch? Wenn nein, wie dann?

Da ich - wie erwähnt - kaum JavaScript-Kenntnisse habe, sind Codeschnipsel sehr willkommen. Natürlich auch eine Komplettlösung

Das ganze ist schwierig zu erklären, deshalb schreibe ich es bei Bedarf nochmals als Pseudo-Code.

Dankend und grüßend
Marc

Einloggen, um Attachments anzusehen!

ALF · Verfasst: Fr 07.05.10 23:13

Hi,

hier im Forum. Java hat zwar wenig mit Delphi gemein, aber
Ich versuch mal ein bisschen zu Antworten.

ConditionZero hat folgendes geschrieben :

Folgende Funktion möchte ich erreichen:
Bei Rechtsklick geht das Kontextmenü (GIF-Animation) auf.

Wirst Du Probleme bekommen, da in Windows z.B. der rechtklick, wie Du sicher selbst schon festgestellt hast für das interne Popupmenu belegt ist.

Ein Mousehover effekt würde da sicherlich reichen zum starten des Menuegifs!
Wenn Du dan mit dem Mouszeiger über die Menuepunkte fährst, verändern sie sich durch hervorheben z.B.
Mit klick dann auf den MenueButton, wird der jeweilige link aufgerufen!

Währe so mein Vorschlag um es umzusetzen.
Ein simples Beispiel findest Du hier
und auch überall im Inet, so für den Anfang.

Mit Java mh..., nicht jeder hat java aktiv. CSS währe da sicherer!

Gruss Alf

_________________
Wenn jeder alles kann oder wüsste und keiner hätt' ne Frage mehr, omg, währe dieses Forum leer!

jaenicke · Verfasst: Fr 07.05.10 23:29

ALF hat folgendes geschrieben :

Wirst Du Probleme bekommen, da in Windows z.B. der rechtklick, wie Du sicher selbst schon festgestellt hast für das interne Popupmenu belegt ist.

Trotzdem kann man den blockieren oder umfunktionieren.

Das ist auch sehr sehr einfach, hab ich auch schon gemacht, Beispiel hier:
www.flexdirectory.co.../rightclickmenu.html

ALF hat folgendes geschrieben :

Mit Java mh..., nicht jeder hat java aktiv. CSS währe da sicherer!

Damit geht das aber nicht. Wer JavaScript deaktiviert, der muss eben damit leben, dass nicht alles geht. Vieles lässt sich ohne eben nicht umsetzen. :nixweiss:

ALF · Verfasst: Fr 07.05.10 23:48

jaenicke hat folgendes geschrieben :

Damit geht das aber nicht. Wer JavaScript deaktiviert, der muss eben damit leben, dass nicht alles geht. Vieles lässt sich ohne eben nicht umsetzen. :nixweiss:

Och nö

ich zitiere mal aus meinem link.

Zitat:

Der CSS-Mouseover funktioniert ohne Javascript und erscheint damit auch ausnahmslos in allen Browsern, also auch solchen, die Javascript deaktiviert, d.h. bewusst oder vielleicht unbewusst (bei Anfängern) ausgeschaltet haben

Jedes Menü ist mit Textlinks erstellt. Das erleichtert Ihre Arbeit, denn Sie sind flexibler.

Der CSS-Mouseover kann ganz ohne Grafik auskommen ( dann Mouseover per Hintergrundfarbe, Rahmenfarbe, Schriftfarbe oder ähnliches )

Wenn beim CSS Mouseover Grafiken verwendet werden- was die Optik steigert, so kommt er nur mit den selben 2 Grafiken ( eine für den Ausgang und eine für den Mouseover ) für ein komplettes Menü aus - egal wie viele Links ! )

@BenBe - Sorry ich meine ja auch JS :wink:

Gruss Alf

_________________
Wenn jeder alles kann oder wüsste und keiner hätt' ne Frage mehr, omg, währe dieses Forum leer!

BenBE · Verfasst: Fr 07.05.10 23:49

1. Java <> JavaScript
2. Vieles geht auch ohne JS zu einem guten Stück umzusetzen (CSS und :hover ;-)

)
3. Bei mir ist im FF auch bei aktiviertem JS das deaktivieren der rechten Maustaste für JavaScripts tabu (viele Scripte, die das nutzen, nerven einfach, weil sie glauben, mich vom Ansehen des Quelltextes abhalten zu wollen).
4. Barrierefreiheit

_________________

Anyone who is capable of being elected president should on no account be allowed to do the job.
Ich code EdgeMonkey - In dubio pro Setting.

jaenicke · Verfasst: Fr 07.05.10 23:58

ALF hat folgendes geschrieben :

Och nö

ich zitiere mal aus meinem link.

Ja, sicher lässt es sich anders umsetzen, nur halt nicht so komfortabel wie mit der rechten Maustaste. (Wobei die natürlich auch nicht überall die beste Lösung ist. Aber z.B. beim JavaScript Debugger von Chrome und Opera vermisse ich die schmerzlich.)

BenBE hat folgendes geschrieben :

2. Vieles geht auch ohne JS zu einem guten Stück umzusetzen (CSS und :hover ;-)

)

Ist aber nicht immer genauso sinnvoll einsetzbar.

BenBE hat folgendes geschrieben :

3. Bei mir ist im FF auch bei aktiviertem JS das deaktivieren der rechten Maustaste für JavaScripts tabu (viele Scripte, die das nutzen, nerven einfach, weil sie glauben, mich vom Ansehen des Quelltextes abhalten zu wollen).

Das ist mir ja schon ewig nicht mehr begegnet. Das gibts noch auf Seiten, die man sich ernsthaft anschauen möchte? :shock:

BenBE hat folgendes geschrieben :

4. Barrierefreiheit

Dafür ist es ohnehin sinnvoll einen Bedienweg ganz ohne Hover oder Rechtsklick zu haben.

ALF · Verfasst: Sa 08.05.10 09:46

jaenicke hat folgendes geschrieben :

Dafür ist es ohnehin sinnvoll einen Bedienweg ganz ohne Hover oder Rechtsklick zu haben.

Ich glaube, da sind wir uns alle einig.
Eine gut gepflegte Seite (aktuelle Informationen), mit solidem und übersichtlichen Style ist ansprechender als eine wo,
beim ersten Besuch ein "Wow" effekt entsteht
beim zweiten "naja" kommt und
beim dritten Besuch "es nervt" entsteht.
Weil nun mal die letzte aktuelle Information schon 3-4 Wochen alt ist :shock:

@ConditionZero: Solltest Du vielleicht in Deinem Konzept mit berücksichtigen, nur so als Vorschlag :wink:

Gruss Alf

_________________
Wenn jeder alles kann oder wüsste und keiner hätt' ne Frage mehr, omg, währe dieses Forum leer!

ConditionZero · Verfasst: Sa 08.05.10 15:26

Wow, da kam ja schon eine ganze Menge.

ALF hat folgendes geschrieben:

@ConditionZero: Solltest Du vielleicht in Deinem Konzept mit berücksichtigen, nur so als Vorschlag

Ja, es ist ja nichts aufzwingendes, um das der Besucher nicht drum herum kommt. Einmal gibts eine Navigation im oberem Frame und dann eben als kleines Highlight die Kontextmenü-Variante. Will der Besucher nichts von der Funktion wissen, benutzt er eben das normale Menü.

Habe auch schon meine Ansätze, wie was funktionieren wird, muss dann eben die entsprechenden Befehle googeln. Nur eine Sache macht mir zu schaffen, und zwar eben dieses erkennen, wann die Maus auf welchem Button im GIF ist. Da habe ich momentan im Kopf, dass man die Position der Maus auslesen könnte, wenn geklickt wird und Anhand dieses Wertes und den (bekannten) Abmessungen des GIFs für jeden Button einen Pixelbereich festlegen, in dem dieser beim jeweiligen Menüaufruf ist. So könnte man dann sobald der Bereich mit der Maus berührt wird das passende Bild aufrufen.

Aber geht das nicht eleganter?

ALF hat folgendes geschrieben:

Hi,

hier im Forum. Java hat zwar wenig mit Delphi gemein, aber
Ich versuch mal ein bisschen zu Antworten

Bin schon eine Weile hier angemeldet, war nur länger inaktiv

Grüße
ConditionZero

ALF · Verfasst: Sa 08.05.10 15:35

oops, als ich den Thread las,stand nix auf der linken Seite bei mir :gruebel:

Ob Du das mit JS oder CSS machst, schau mal den link von mir an!
Nen kleinen Tip so am Rande :wink:

. Ich habe mir früher immer den InetTemp Ordner durchgesucht um zu sehen wie es die anderen machen. Ist zwar nicht die feine englische Art, aber beflügelt ein ungemein.

Gruss Alf

_________________
Wenn jeder alles kann oder wüsste und keiner hätt' ne Frage mehr, omg, währe dieses Forum leer!

ConditionZero · Verfasst: Sa 08.05.10 16:56

ALF hat folgendes geschrieben :

oops, als ich den Thread las,stand nix auf der linken Seite bei mir :gruebel:

Ob Du das mit JS oder CSS machst, schau mal den link von mir an!
Nen kleinen Tip so am Rande :wink:

. Ich habe mir früher immer den InetTemp Ordner durchgesucht um zu sehen wie es die anderen machen. Ist zwar nicht die feine englische Art, aber beflügelt ein ungemein.

Gruss Alf

Ich werds mit JS machen. Ich habe mir den Link schon angeschaut, hab auch lange das www durchforstet, bevor ich hier gepostet habe. Leider habe ich aber auch nichts vergleichbares gefunden, auch mit dem klauen fremder Scripts.

Also hier jetzt doch mal ein Pseudo-Code, vielleicht kann mir jemand das ja übersetzen

.

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:

<script
  language="JavaScript">
<!--
$MenuOpen=0;

if Rightclick
  { Kontextmenü.Abfangen;
    MenuOpen=1;
    Load['MenuOpen.gif',MousePos];
    Wait(500);                /*  Zeit bis Animation fertig ist warten  */
    MenuOpen=1;  }


if (Leftclick) and not (MousePos in 'MenuOpen.gif')
  { Load['MenuClose.gif','MenuOpen.gif'.Pos]
    Wait(500);
    MenuOpen=0;  }



/* Button 1 */ 
if (MenuOpen=1) and (MousePos[Pixelbereich[Btn2]]) 
  { Load['HighlightBtn1.bmp','MenuOpen.gif'.Pos]
    OnClick=LadeLinkVonBtn1;  }

/* Button 2 */ 
if (MenuOpen=1) and (MousePos[Pixelbereich[Btn2]]) 
  { Load['HighlightBtn2.bmp','MenuOpen.gif'.Pos]
    OnClick=LadeLinkVonBtn2;  }

/* Button 3 */ 
if (MenuOpen=1) and (MousePos[Pixelbereich[Btn3]]) 
  { Load['HighlightBtn2.bmp','MenuOpen.gif'.Pos]
    OnClick=LadeLinkVonBtn3;  }

/*  ...   */


//-->
</script>

Das hat jetzt wenig mit JS oder was auch immer zu tun, aber stellt mein Ansatz gut dar.
Was haltet ihr davon?

Grüße
ConditionZero

jaenicke · Verfasst: Sa 08.05.10 17:36

Für Animationen und sowas gibt es JQuery. Da arbeite ich jetzt seit ein paar Tagen auch damit, allzuviel JavaScript kann ich auch noch nicht. Aber damit kommt man schon sehr schnell klar.

Da gibt es dann auch Callback-Funktionen um nach erfolgreichem Abschluss einer Animation eine andere Aktion durchzuführen. Eben zum Beispiel Menüeinträge freizuschalten oder sowas.

ALF · Verfasst: Sa 08.05.10 17:37

Sorry, meine Zeiten wo ich mich damit beschäftigt habe sind leider sehr lange her.
Aber so richtig mag ich nicht glauben das Du im Inet nix gefunden hast!
Schau einfach mal hier auf diese Seite de.selfhtml.org/css/...nsleisten.htm#modern und dort weiter bzw. de.selfhtml.org/
Natürlich musst Du es für Dich persöhnlich anpassen, ist ja meistens so :wink:

Gruss Alf

_________________
Wenn jeder alles kann oder wüsste und keiner hätt' ne Frage mehr, omg, währe dieses Forum leer!

ConditionZero · Verfasst: Sa 08.05.10 17:51

jaenicke hat folgendes geschrieben :

Für Animationen und sowas gibt es JQuery. Da arbeite ich jetzt seit ein paar Tagen auch damit, allzuviel JavaScript kann ich auch noch nicht. Aber damit kommt man schon sehr schnell klar.

Da gibt es dann auch Callback-Funktionen um nach erfolgreichem Abschluss einer Animation eine andere Aktion durchzuführen. Eben zum Beispiel Menüeinträge freizuschalten oder sowas.

Das hört sich ja mal nicht schlecht an. Letzteres hat mir nämlich auch schon Kopfschmerzen bereitet.
Werde ich mir mal anschauen.

ALF hat folgendes geschrieben :

Sorry, meine Zeiten wo ich mich damit beschäftigt habe sind leider sehr lange her.
Aber so richtig mag ich nicht glauben das Du im Inet nix gefunden hast!
Schau einfach mal hier auf diese Seite de.selfhtml.org/css/...nsleisten.htm#modern und dort weiter bzw. de.selfhtml.org/
Natürlich musst Du es für Dich persöhnlich anpassen, ist ja meistens so :wink:

Gruss Alf

Ja solche Seiten habe ich zu genüge gefunden (aber für JS, an CSS hatte ich davor noch nicht gedacht). Das Problem dabei ist, dass man da eine riesige Portion Codeschnipsel vorgesetzt bekommt und diese dann nach kurzer Erläuterung zu seiner Funktion zusammenflicken kann. Wie eine Art Baukasten eben. Allerdings habe ich keine Codes gefunden, die die Funktionen, die ich brauche beinhalten. Das Anpassen ist durch meine JS-Kenntnisse -jetzt noch- eben sowieso ziemlich schwierig.

Grüße
ConditionZero

ConditionZero · Verfasst: Sa 08.05.10 21:30

Wie binde ich denn JQuery ein? Den Script in den HTML Code als JS einfügen? Oder die *.js Datei als Ressource irgendwie ablegen? :oops:

Sorry für den Doppel-Post, aber ein Edit hätte den Thread nicht gepusht.

Grüße
ConditionZero

jaenicke · Verfasst: Sa 08.05.10 21:36

Die jquery.js irgendwo speichern und normal einbinden.

markieren

Quelltext

1:	<script language="javascript" type="text/javascript" src="jquery.js"></script>

Schon kannst du nach diesem Code (der normalerweise im Head steht) die Befehle usw. nutzen.

ConditionZero · Verfasst: Sa 08.05.10 21:48

jaenicke hat folgendes geschrieben :

Die jquery.js irgendwo speichern und normal einbinden.

markieren

Quelltext

1:	<script language="javascript" type="text/javascript" src="jquery.js"></script>

Schon kannst du nach diesem Code (der normalerweise im Head steht) die Befehle usw. nutzen.

Ok, habe gerade gesehen, dass ich mich im Pfad vertan habe, habe den gedankenlos absolut angegeben... :roll:

Danke.

Ich probier mich heute abend mal daran, arbeite mich in JQuery ein bisschen ein, aber lass den Thread mal noch offen falls noch eine Frage aufkommen sollte.

Danke @all für die schnelle Hilfe

Grüße
ConditionZero

jaenicke · Verfasst: Sa 08.05.10 22:10

Klitzekleines Beispiel (aus dem Kopf geschrieben):

markieren

Quelltext

1:
2:

<a href="#" onclick="$('#example').show('normal')">Klick einmal</a>
<div id="example" style="display: none">Test Test usw.</div>

// EDIT: Tippfehler korrigiert

ConditionZero · Verfasst: Sa 08.05.10 23:24

So, also ich bin daran mein Pseudo-Code in JS zu übersetzen. Mühevoll ist aber mir die ganzen Befehle raus zu suchen und über jeden einzelnen zu recherchieren.
Wäre mir eine ganz große Hilfe und vor allem Zeitersparnis, wenn mir jemand die passenden Befehle für folgende Stichwörter geben kann:

Mausklicks (wurde rechte Maustaste geklickt?)
Grafiken an bestimmte Position laden (oberer linker Punkt der Grafik an Mausposition)
Kontextmenü blockieren/ausblenden (document.oncontextmenu ...?)
Grafik ausblenden (Visible, nicht freigeben)
Mausposition auslesen
Variable um Bereich festzulegen (vielleicht ein Array mit den Eckpunkten?)
Warten bis Gif-Animation fertig abgespielt ist

Ich bin zwar nicht zu faul um das alles nachzuschlagen oder JS allgemein zu lernen, aber stehe ein wenig unter Zeitdruck, da das Grundgerüst demnächst fertig sein sollte, damit mir mein Helfer der die Inhalte übernimmt nicht flöten geht. Bin auch ziemlich mit dem JQuery-Kram gefordert.

Grüße
ConditionZero

jaenicke · Verfasst: So 09.05.10 01:11

ConditionZero hat folgendes geschrieben :

[*] Mausklicks (wurde rechte Maustaste geklickt?)

Das und die weiteren Punkte bezüglich des Menüs passieren doch alle schon in dem Beispiel.

ConditionZero hat folgendes geschrieben :

[*] Grafiken an bestimmte Position laden (oberer linker Punkt der Grafik an Mausposition)

Div mit position: absolute als Style, dort kannst du dann alles reinpacken und nur left und top setzen.

ConditionZero hat folgendes geschrieben :

[*] Grafik ausblenden (Visible, nicht freigeben)

Das selbe wie mein kleines JQuery-Beispiel, nur mit hide oder fadeOut.

ConditionZero hat folgendes geschrieben :

[*] Warten bis Gif-Animation fertig abgespielt ist

Bei einer Gif-Animation musst du denke ich SetTimeout nehmen und einfach die Laufzeit der Animation angeben.

ConditionZero · Verfasst: So 09.05.10 01:43

jaenicke hat folgendes geschrieben :

ConditionZero hat folgendes geschrieben :

[*] Mausklicks (wurde rechte Maustaste geklickt?)

Das und die weiteren Punkte bezüglich des Menüs passieren doch alle schon in dem Beispiel.

Oh, dein Post habe ich komplett übersehen. :shock:

Danke. Ja das deckt schonmal die ersten Punkte ab. Anhand deiner Erläuterungen müsste auch das weitere kein Problem sein. Wenn mir mein Job morgen genug Zeit lässt (Selbstständig - da weiß man nie, wann Feierabend ist

) werd ich den Script mal posten.

Grüße
ConditionZero

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme