Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Right Click Context Menu Example | Custom jQuery Right Click Menu

Mar 28, 2013
Introduction

Here I will explain how to make/ create 
custom jQuery right click context menu example or custom right click menu using jQuery and how to disable right click on the page using JQuery.

Description:
  
In previous posts I explained
change background of controls when validation fails, Change textbox background color in JavaScript, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how to create custom right click context menu using JQuery.

To implement custom right click context menu using jQuery we need to write the code as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Right Click using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
try {
$(document).bind("contextmenu", function(e) {
e.preventDefault();
$("#custom-menu").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
});
$(document).mouseup(function(e) {
var container = $("#custom-menu");
if (container.has(e.target).length == 0) {
container.hide();
}
});
}
catch (err) {
alert(err);
}
});
</script>
<style type="text/css">
#custom-menu
{
z-index: 1000;
position: absolute;
border: solid 2px black;
background-color: white;
padding: 5px 0;
display: none;
}
#custom-menu ol
{
padding: 0;
margin: 0;
list-style-type: none;
min-width: 130px;
width: auto;
max-width: 200px;
font-family:Verdana;
font-size:12px;
}
#custom-menu ol li
{
margin: 0;
display: block;
list-style: none;
padding: 5px 5px;
}
#custom-menu ol li:hover
{
background-color: #efefef;
}

#custom-menu ol li:active
{
color: White;
background-color: #000;
}

#custom-menu ol .list-devider
{
padding: 0px;
margin: 0px;
}

#custom-menu ol .list-devider hr
{
margin: 2px 0px;
}

#custom-menu ol li a
{
color: Black;
text-decoration: none;
display: block;
padding: 0px 5px;
}
#custom-menu ol li a:active
{
color: White;
}
</style>
</head>
<body>

<div id="custom-menu">
<ol>
<li><a href="#">Reply</a> </li>
<li><a href="#">Reply All</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">Mark as unread</a> </li>
<li><a href="#">Delete</a> </li>
<li><a href="#">Archive</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">Junk</a> </li>
<li><a href="#">View</a> </li>
</ol>
</div>
</body>
</html>
Live Demo

To check for live demo try to right click on this webpage

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

9 comments :

Mirco said...

Oh ja, dass ist das beste Script, das ich finden konnte, danke daf├╝r! - Perfekt! :-)

Oh yes, thats it! This is the best Script, that i could find, thank you! - Perfect! :-)

bhavesh thumar said...

i think it's amazing dud

vasu said...

rock

Timothy said...

Wonderful task! how to restrict it within iframe??

Anonymous said...

DAt's one of handsome JS i have ever met. Applauses Suresh ji..... and prayers as well...

Anonymous said...

its not working in firefox

Anonymous said...

no its working in firefox too...

dhanu said...

Hi,

I have requirement of creating asp.net mvc web grid with context menu.
The context menu should have capability to View, Add, Edit and Delete operations on each row. This menu should be displayed when I right click on row.
It would be great if you could give some samples of examples.

Thanks,
Dhanaraj

rohit said...

rsrohitsharma206@gmail.com
please tell me how to use right click on gridview to copy gridview row data and paste option
asp.net and sql server 2005


Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.