0

Tutorial on designing own menu when you right-click your mouse.

Hello.

I've discovered on a website, that you can right-click your mouse, & several NEW options come up (rather than / instead of the usual defaults.)

Doing a quick Google search, I found that you can use Ajax and/or Javascript to achieve this & they give you some code you can use.

HOWEVER, the website code provided, is not a tutorial on how to do these things & I'm wondering if anyone knows a good tutorial to explain things.

  • right click, & it automatically selects that line (puts a check in the check-box).
  • Gives options - eg (in an email system) - delete message, move message to folder etc..

The coding they provide does not advise HOW the process 'ticks' a check-box. Or HOW to display certain menu options. & how to activate those options once a person selects it.

Does anyone know a good tutorial to explain the why / where-fores (is that a word) of each section of code. with a practical demonstration on how to add 1-2 menu options (text), & how to activate the option(s) once clicked.

My native language is PHP. I have done some ajax in the past, but only a novice.

EDIT: The coding the demo sites providse also do not show you where to put your text. IE, I want a menu option to "delete" - the coding doesn't show you were to put the word "delete", or what it does once you click that box/option.

EDIT2: thanks, but i saw that link yesterday.

How to add a custom right-click menu to a webpage?

as one reply says:- "You have just explained how to disable the right-click menu. How to create our own menu??". also BOTH answers do the same thing - "alert("You've tried to open context menu"); ". does not help.

How do we add 1 option ? adding a 2nd option - do this (blah blah blah..) . Tutorial on 3+ options.. - gives you step by step guide.

The coding is (apparently) a menu of 2 options. but both are the same. (possibly some actual code examples too of each option ?). from the looks of it, they use Javascript to process the option.

Community
  • 1
  • 1
sarah
  • 102
  • 2
  • 10
  • 1
    This question has been asked before here: http://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-click-menu-to-a-webpage – hunterboerner Mar 15 '14 at 21:49

1 Answers1

2

There is no intrinsic link to AJAX in generating your own context menu; whether AJAX is involved will depend on whether you need to make AJAX requests to fetch content.

The broad workflow is this, which should give you some idea of what to look into:

  • code your own context menu, e.g. as a ul with the options as lis. Hide this element.
  • bind an event handler to the oncontextmenu event
  • prevent the default action (the usual context menu displaying) via evt.preventDefault()
  • position your ul relative to the element that was right-clicked and make it appear
Mitya
  • 33,629
  • 9
  • 60
  • 107