Custom context menu using JavaScript. Correcting the context menu that does not open. The context menu does not work in the browser

The operability of all devices. In case of failures, breakdowns, it is not always necessary to call specialists, paying for their services sometimes at rather high prices. Many flaws, errors can be corrected by yourself. This kind of crashes, errors include when the right mouse button does not open the context menu. What to do in such cases?

First, you should find out why the malfunction occurs, why the contextual windows menu 10. There are several possible reasons:

  • cluttered registry with obsolete files;
  • the absence of programs included in the context menu, their unstable work.

Let's consider what to do in these cases, how to change the situation when the context menu does not open with the right mouse button.

If the right-click context menu does not appear due to the clutter of the registry with obsolete files, we recommend using a utility for cleaning, for example, Glary Utilities. Glary Utilities is a collection of system tweakers, utilities that help protect, fine tuning improving PC performance. With the help of the set, you can delete unnecessary files that clog the system, registry entries that are outdated for a long time, optimize the RAM, manage startup, optimize memory and other functions that are useful for the good functioning of the computer. Glary Utilities is free to download.


After setting the settings, clear your device from unnecessary files using the same utility, clean the registry, thereby increasing the speed of the computer.

Freeze bug fix

If, when you right-click on a file or folder, the context menu on the desktop does not work, the computer freezes, the key does not respond to commands, you can eliminate this freeze in two ways, we recommend doing both sequentially. Before proceeding with any of them, you need to have administrator rights. You will have to work with the registry, here you have to be careful, if you do something wrong, the system may crash. Therefore, when starting the process of fixing failures, be sure to create a system restore point before deleting anything.

A "dumb" hang is caused, as a rule, by an unstable program, a frozen program, or when a link in the context menu points to a non-existent resource.

Method one

Follow the steps in sequence:



  1. Check the list that appears for programs you have already removed.
  2. If there is a program in the list that you removed, remove it from the registry. Before deleting any registry key, we recommend that you create a backup copy of it in order to save it in case you need to restore it.

Method two

The algorithm for the second method, when you do not have the Windows 10 context menu, will be as follows.

  1. Open the registry editor as described in steps 1–2 of the previous method.
  2. Open the subkey HKEY_CLASSES_ROOT,
  3. In it you will see several subsections with names like "name_programm.exe", "name_programm.dll". Check each one by one, by clicking LMB, to the subsection "command". All subsections should open. If it does not open, look for the “NoOpenWith” parameter in the right part of the window. There is no such parameter - create it. To do this, follow the steps:

  1. Having found the subsection "command", click LMB, check the presence of the parameter "(By default)" on the right side. The parameter must be registered for the application, or network resource existing in the computer.
  • If the parameter refers to a resource that is already missing, the entire section that begins with the name of this resource or program should be deleted. Do not forget to create a backup copy before deleting it for recovery if necessary. Delete by clicking on the name of the section with the right mouse button, then clicking "Delete" - "Yes".

After completing the two methods, the context menu should open, the PC will stop freezing when RMB clicks on the file.

It is not difficult to set up the context menu, just remember that any attempts to change the registry can lead to unstable operation of the PC, so do not forget to create restore points, archive copies of the programs to be removed. When the right mouse button does not open the context menu, follow the instructions above in sequence, apply all methods, the error will be fixed.

The context menu is the menu that appears when you right-click on the screen. Typically, these menus are used to make it easier to perform selected actions, such as sorting folders and files, opening a new application window, or accessing system settings.

For many years, the term "context menu" refers primarily to native applications. However, we now have the opportunity to take advantage of it in web applications as well. An example is the file manager in Gmil. This menu is implemented using javascript code:

In the future, we will have the ability to create context menus for HTML5-based sites. We invite you to familiarize yourself with this approach.

Development of a context menu

HTML5 introduced us 2 new elements, menu and menuitem, and they allow you to create context menus. In order for the browser to treat the menu element as a "context menu", we need to set the menu type to context, and also give it a unique ID.

Below is an example in which we create a context menu with these properties.


Edit Content
Email Selection

We also have the option to add submenus by forking the menu element as follows:


Edit Content
Email Selection

Facebook
Twitter


Now, in order for the context menu to appear on the screen when right-clicking, we use a new HTML attribute called contextmenu. This attribute is used to identify the menu with the specified ID. Given our example above, we can define our context menu with contextmenu = context-menu-id.

We can set an attribute on the body tag if we want to use the context menu throughout the page. We can also add it to the HTML element so that this menu was used exclusively within this element.

A new context menu will now appear within the Operating System menu, as seen in the example below.


Adding an icon

We are sure that many of you have seen context menus that use icons. In some cases, an icon can be a great visual aid to help users find menus. In addition, it also gives users the ability to understand what the menu is for.


We can also add an icon to our HTML5 context menu using the icon attribute:


Edit Content
Email Selection

Facebook
Twitter


This is what we will see in the browser window.


Making the menu work

On this stage our new context menu won't work when clicked. However, we can very easily bring him to his senses with a little javascript. In our example, the menu is called Email Selection. This menu allows users to send selected text via email.

To make it work, let's add a function that allows users to use the code-behind.

Function getSelectedText () (
var text = "";
if (window.getSelection) (
text = window.getSelection (). toString ();
) else if (document.selection && document.selection.type! = "Control") (
text = document.selection.createRange (). text;
}
return text;
};
Then we create another function, suppose sendEmail (), that opens an email client. The subject line of the email will be the text entered from the document header, and the body of the email will be filled with the highlighted text.

Function sendEmail () (
var bodyText = getSelectedText ();
window.location.href = "mailto:? subject =" + document.title + "& body =" + bodyText + "";
};
Finally, we add this functionality to our menu through the onclick attribute.

Email Selection
We've previously shown you how to use HTML5 EditableContent, which allows us to edit web content right on the page. We can use this feature by adding it to our menu called “Edit Content”.

In conclusion

Personally, we were very happy about this new function... We see many possibilities in it. Unfortunately, at the time of this writing, only Firefox supports this feature. Hopefully other browsers will connect to it soon.

Below you can see a demo (only works in Firefox).

Objective: to catch the right mouse button click in the browser window and show its own context menu.

What happens when you right-click in a browser window? A context menu will appear, appearance and the set of functions of which will depend on the type of browser and the place where you clicked.
What if we wanted to block the browser context menu and show our own? Perhaps? Yes. Unfortunately not cross-browser, but the code below will work in Gecko, Safari and IE. Opera does not provide these features by default.

First, let's draw three DIVs, in 2 of which we will show our own context menu, and in the third we will leave the default browser one.

"height: 100px; border: 1px solid red; background-color: #FFCCCC;"> Right click

"height: 100px; border: 1px solid blue; background-color: #CCCCFF;"> Right click

"height: 100px; border: 1px solid green; background-color: #CCFFCC;"> Right click


"position: absolute; top: 0; left: 0; border: 1px solid # 666; background-color: #CCC; display: none; float: left;">


As you can see, catching the right button click occurs using the event oncontextmenu... To write the code for the menu function, you need the following components:
- Function for adding event handlers. Used to hide its own context menu when clicking in other parts of the document.
- Function for determining the coordinates of the mouse pointer. Used to define the position in which we will show the context menu.
You can block the pop-up of the standard browser menu by simply returning false.

Now the code:

// Function for determining the coordinates of the mouse pointer
function defPosition (event) (
var x = y = 0;
if (document.attachEvent! = null) (// Internet Explorer & Opera
x = window.event .clientX + (document.documentElement .scrollLeft? document.documentElement .scrollLeft: document.body .scrollLeft);
y = window.event .clientY + (document.documentElement .scrollTop? document.documentElement .scrollTop: document.body .scrollTop);
) else if (! document.attachEvent && document.addEventListener) (// Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
) else (
// Do nothing
}
return (x: x, y: y);
}

function menu (type, evt) (
// Block the bubbling of the contextmenu event
evt = evt || window.event;
evt.cancelBubble = true;
// Show our own context menu
var menu = document.getElementById ("contextMenuId");
var html = "";
switch (type) (
case (1):
html = "Menu for the first DIV";
html + = "
First function "
;
html + = "
Second function "
;
html + = "
Third function "
;
break;
case (2):
html = "Menu for the second DIV";
html + = "
(empty)" ;
break;
default:
// Nothing
break;
}
// If there is something to show, show it
if (html) (
menu.innerHTML = html;
menu.style .top = defPosition (evt) .y + "px";
menu.style .left = defPosition (evt) .x + "px";
menu.style .display = "";
}
// Block the pop-up of the standard browser menu
return false;
}

// Close the context when left or right clicking on the document
// Function for adding event handlers
function addHandler (object, event, handler, useCapture) (
if (object.addEventListener) (
object.addEventListener (event, handler, useCapture? useCapture: false);
) else if (object.attachEvent) (
object.attachEvent ("on" + event, handler);
) else alert ( "Add handler is not supported") ;
}
addHandler (document, "contextmenu", function () (

} ) ;
addHandler (document, "click", function () (
document.getElementById ("contextMenuId") .style .display = "none";
} ) ;

Web applications today are becoming a new step in the development of the web. These are far from ordinary information sites. Gmail and Dropbox are examples of advanced web applications. As the functionality, availability and usefulness of web applications grows, so does the need to increase the efficiency of their use. This tutorial will cover creating such a useful thing as your own context menu, and in particular:

  1. Let's figure out what a context menu is and why you need it.
  2. Let's implement our context menu using JS and CSS.
  3. Let's touch on the shortcomings and limitations of the approach used in order to know what problems can warn us when rolling all this into production.

What is a context menu?

According to Wikipedia, the context menu is the menu that appears when the user interacts with the graphical interface (when the right mouse button is pressed). The context menu contains a limited set of possible actions, which are usually associated with the selected object.

On your computer, right-clicking on the desktop will bring up a context menu operating system... From here you can probably create new folder, get some information and do something else. The context menu in the browser allows, for example, to get information about the page, view its sources, save an image, open a link in a new tab, work with the clipboard, and so on. Moreover, the set of available actions depends on where exactly you clicked, that is, on the context. This is the default behavior set by the browser developers [ And extensions to it].

Web applications are slowly beginning to replace standard context menus with their own. Gmail and Dropbox are excellent examples. The only question is how to create your own context menu? In the browser, right-clicking triggers the contextmenu event. We will have to override the default behavior and make it so that instead of standard menu inferred our own. It's not so difficult, but we will understand it step by step, so it will come out quite voluminously. To begin with, let's create the basic structure of the application so that the developed example is not completely out of touch with reality.

Task list

Let's imagine we are creating an application that allows us to maintain a to-do list. I understand that you are probably already incredibly tired of all these to-do lists, but let it be. The application page contains a list of pending tasks. A typical set of CRUD actions is available for each task: get information about the task, add a new one, edit, delete.

From the translator

The translation in places is quite free, but not to the detriment of the meaning or content. Everything that is not directly related to the original is included in the notes.
With suggestions, wishes and comments, as usual, in the PM.

In this tutorial, we'll take a look at the rarely mentioned HTML5 trick - contextmenu. You may have never heard of such a menu before, but in some situations it can be extremely useful.

What could the contextmenu attribute be for? It allows you to add various options to the browser's right-click context menu with just a few lines of HTML code, even when Javascript is disabled. Although at the moment such handy tool only available in Firefox.

This is how it works:

Using the contextmenu is much easier than it might seem at first glance. You need to add the contextmenu attribute:

Then we create the menu:

The id attribute must match the contextmenu attribute. Thus, it is possible to use different context menus for different parts of the page.

Then we add menu items. First, insert a menu item with text and an icon, then add a link to broadcast the current page on Facebook, and finally insert a link to refresh the page. It turns out a context menu with three items:

You can also create submenus:

Very interesting and useful property HTML5. But, its use is limited only to the Firefox browser.