Description
Here I will explain
that how to create custom right click context menu or custom right click menu
when user perform right click on a webpage using javascript.
What is a Context Menu?
A
context menu is a menu in a graphical user interface (GUI) that appears on user
interaction, such as a right-click mouse operation on a webpage. Context Menu
are also called a Pop-up Menu or Contextual menu.
Here
main step first we have to perform is the disable the Default Right click menu
of the browser by using following one line code.
Here
we use the javascript to create a custom right click menu like
function
ShowMenu(control, e) {
var posx = e.clientX + 'px';
var posy = e.clientY + 'px';
document.getElementById(control).style.position = 'absolute';
document.getElementById(control).style.display = 'inline';
document.getElementById(control).style.left = posx;
document.getElementById(control).style.top = posy;
var jqContext = '#' + control;
}
function HideMenu(control) {
document.getElementById(control).style.display = 'none';
}
In
above code you can show that we define two function showmenu() for display
custom right click menu on a webpage and second is the hidemenu() to hide the
custom right click menu.
Main
point is that the menuitem must appeared in same position where user is perform
right click and so far to do this we have set the style of the menu with Left
and Top so user can click anywhere in the webpage the custom menu will also
displayed on the same position as user click.
Here
we pass the control in the Showmenu() function that describes that the id of
the context menu that user want to displayed at a time when user perform right
click on a webpage.
How to upload File and Fetch file from SqlServer and bind to Gridview fetch file from Sqlserver and bind to Gridview
Customrightclick.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Customrightclick.aspx.cs" Inherits="Customrightclick" %>
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Custom Right Click Menu using Javascript</title>
<style type="text/css">
.ContextItem {
background-color: White;
color: Black;
font-weight: normal;
}
.ContextItem:hover {
background-color: #0066FF;
color: White;
font-weight: bold;
}
.menuItem {
background: transparant;
}
.menuItem:hover {
background-color: #FEE378;
border: 1px outset #222222;
font-weight: bold;
cursor: default;
}
</style>
<script language="javascript" type="text/javascript">
function ShowMenu(control, e) {
var posx = e.clientX + 'px';
var posy = e.clientY + 'px';
document.getElementById(control).style.position = 'absolute';
document.getElementById(control).style.display = 'inline';
document.getElementById(control).style.left = posx;
document.getElementById(control).style.top = posy;
var jqContext = '#' + control;
}
function HideMenu(control) {
document.getElementById(control).style.display = 'none';
}
</script>
</head>
<body onclick="HideMenu('contextMenu');" oncontextMenu="return false">
<div onmousedown="HideMenu('contextMenu');"
onmouseup="HideMenu('contextMenu');"
oncontextMenu="ShowMenu('contextMenu',event);"
class="menuItem">
Right click to
show Custom Menu
</div>
<br />
<br />
<div style="display:none; " id="contextMenu">
<table border="0" cellpadding="0" cellspacing="0"
style="border: thin solid #808080; cursor: default;" width="100px"
bgcolor="White">
<tr>
<td >
<a style="text-decoration:none" href="http://aspsolutionkirit.blogspot.in/2014/02/dynamically-bind-directory-and.html" ="ShowMenu('contextMenu','none',event);" class="ContextItem">Cut</a>
</td>
</tr>
<tr>
<td >
<a style="text-decoration:none" href="http://aspsolutionkirit.blogspot.in/2014/02/dynamically-bind-directory-and.html" ="ShowMenu('contextMenu','none',event);" class="ContextItem">Copy</a>
</td>
</tr>
<tr>
<td >
<a style="text-decoration:none" href="http://aspsolutionkirit.blogspot.in/2014/02/dynamically-bind-directory-and.html" ="ShowMenu('contextMenu','none',event);" class="ContextItem">Paste</a>
</td>
</tr>
</table>
</div>
</body>
</html>
0 comments:
Post a Comment