The context menu in the browser does not work. Context menu in the browser using HTML5. Freezing Error Fix
Have you noticed that right-clicking on images on some sites does not lead to anything. It seems as if the button clicks idly, and the browser doesn’t care about it – it “freezes and thinks.” In reality, the browser simply blocks clicks after receiving such a command from the JavaScript script of the loaded page.
How unlock right button to click on a picture and save it for offline viewing? In most Internet browsers, this is enough to “dig” into the advanced settings JavaScript.. So…
If you have " Opera»:
1. Follow the path “Tools” -> “General Settings”;
2. In the window that appears, stop at the “Content” item and find the “Configure JavaScript” button (see Fig. 1).
3. By clicking on it, call up the window detailed settings JavaScript and uncheck the box next to “Block right button”.
After confirmation (clicking on “Ok”), this button will become “free” for calling the context menu. By the way, in " FireFox"To unlock the right button, you need to uncheck the box next to this item (see Fig. 2).
In other advanced browsers, blocking the right button is removed in the same way - through the same advanced JavaScript settings.
Task: catch the right mouse button 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's context menu and show our own? Maybe? Yes. Unfortunately not cross-browser compatible, but the code below will work in Gecko, Safari and IE. Opera does not provide such 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.
As you can see, the right button click is caught using the event oncontextmenu. To write code for the menu function, the following components are required:
– Function for adding event handlers. Used to hide your 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 at which we will show the context menu.
You can block the pop-up of a 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 contextmenu event from popping up
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, we 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 contextual one when you click the left or right button 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";
}
)
;
Context menu– this is the menu that appears when you right-click on the screen. Typically, such menus are used to make it easier to perform favorite actions, such as sorting folders and files, opening a new application window, or accessing system settings.
For many years, the term “context menu” primarily referred 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 be able to create context menus for HTML5-based sites. We invite you to become familiar with this approach.
Context menu development
HTML5 introduced us to 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 where we create a context menu with these properties.
We also still have the ability to add submenus by branching the menu element like this:
Now, in order for the context menu to appear on the screen when you right-click, we use a new HTML attribute called contextmenu. This attribute is used to identify a menu with the specified ID. Given our example above, we can define our context menu using contextmenu=context-menu-id.
We can set the attribute in the body tag if we want to use the context menu throughout the page. We can also add it to an HTML element so that this menu was used exclusively within this element.
Now a new context menu will appear inside 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 the menu. In addition, it also allows users to understand what the menu is for.
We can also add an icon to our HTML5 context menu using the icon attribute:
This is what we will see in the browser window.
Making the menu work
At this stage, our new context menu will not work when clicked. However, we can bring it to life very easily with a little javascript code. 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 feature that allows users to use code behind it.
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, let's say sendEmail(), which opens the email client. The subject of the email will be the entered text from the document title, and the body of the email will be filled with the selected text.
Function sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Finally, we add this functionality to our menu via the onclick attribute.
We have previously told you about how to use HTML5 EditableContent, which allows us to edit web content directly 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 feature. We see many opportunities in it. Unfortunately, at the time of writing of this material, only Firefox supported this property. We hope that other browsers will connect to it soon.
You can view a demo below (only works in Firefox).
Web applications today are becoming a new step towards the development of the web. These are far from ordinary information sites. Examples of advanced web applications include Gmail and Dropbox. As web applications grow in functionality, availability, and usefulness, so does the need to increase the efficiency of their use. This guide will cover creating such useful thing, as its own context menu, and in particular:
- Let's figure out what a context menu is and why it is needed.
- Let's implement our own context menu using JS and CSS.
- 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 a menu that appears when the user interacts with the graphical interface (by right-clicking the mouse). 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 a 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 standard behavior intended by browser developers [ And extensions to it].
Web applications are gradually starting to replace standard context menus with their own. Great examples are Gmail and Dropbox. The only question is how to make your own context menu? In the browser, when you right-click the mouse, the contextmenu event is triggered. We'll have to override the default behavior and make it so that instead standard menu our own was displayed. It's not that difficult, but we'll go through it step by step, so it'll be quite extensive. First, let's create the basic structure of the application so that the example being developed is not completely divorced from reality.
Task list
Let's imagine that we are creating an application that allows us to maintain a list of tasks. I understand that you are probably already incredibly tired of all these task lists, but so be it. The application page contains a list of unfinished tasks. For each task, a typical set of CRUD actions is available: get information about the task, add a new one, edit, delete.From the translator
The translation is quite free in places, but not to the detriment of meaning or content. Everything that does not directly relate to the original is included in the notes.
With suggestions, wishes and comments, as usual, in PM.
Operation of all devices. In the event of failures or breakdowns, it is not always necessary to call specialists, sometimes paying for their services at fairly high prices. Many shortcomings and errors can be corrected yourself. These types of failures and 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 Windows 10 context menu does not work. There are several possible reasons for this:
- registry clutter outdated files;
- lack of programs included in the context menu, their unstable operation.
Let's consider what to do in these cases, how to change the situation when the right-click context menu does not open.
If the right-click context menu does not appear due to the registry being cluttered with outdated files, we recommend using a utility such as Glary Utilities to clean it. Glary Utilities is a set of system tweakers, utilities that help protect, fine tuning, increasing PC performance. Using the set, you can remove unnecessary files that clog the system, registry entries that are long outdated, optimize RAM, manage startup, optimize memory and other functions useful for the good functioning of your computer. Glary Utilities can be downloaded for free.
After setting the settings, clear your device from unnecessary files Using the same utility, clean the registry, thereby increasing the performance of your computer.
Freezing Error 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 fix this freeze in two ways, we recommend doing both sequentially. Before you begin any of these, you must have administrator rights. You will have to work with the registry, you need to be careful here; if you do it incorrectly, the system may fail. Therefore, when starting the process of fixing failures, be sure to create a system restore point before deleting anything.
A “silent” freeze is usually caused 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 sequentially:
- Check the list that appears for the presence of programs you have already deleted.
- If there is a program in the list that you removed, remove it from the registry. Before deleting any registry key, we recommend creating an archive copy of it to save in case you need to restore it.
Method two
The algorithm for the second method, when the Windows 10 context menu does not open, will be as follows.
- Open the registry editor as described in steps 1–2 of the previous method.
- Open the HKEY_CLASSES_ROOT subkey,
- In it you will see several subsections with names like “name_programm.exe”, “name_programm.dll”. Check each one in turn by clicking LMB until the “command” subsection. All subsections should open. If it does not open, look on the right side of the window for the presence of the “NoOpenWith” parameter. There is no such parameter - create it. To do this, follow these steps:
- Having found the “command” subsection, click LMB and check for the presence of the “(Default)” parameter on the right side. The parameter must be specified for the application or network resource, existing in the computer.
- If the parameter refers to a resource that is already missing, the entire section starting with the name of this resource or program should be deleted. Before deleting, do not forget to create an archive copy for restoration if necessary. Delete by clicking on the name of the RMB section, then clicking “Delete” - “Yes”.
After completing two methods, the context menu should open, the PC will no longer freeze when right-clicking on a file.
It’s not difficult to make the context menu work, just remember that any attempts to change the registry can lead to unstable work PC, so do not forget to create restore points, archive copies of deleted programs. When the right mouse button does not open the context menu, follow the instructions above sequentially, apply all the methods, the error will be corrected.
