Custom Right Click menu on web
Some time clients requirement that when I right click then open delete option and particular div delete
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style>
.vmenu {
border:1px solid #aaa;
position:absolute;
background:#fff;
display:none;
font-size:0.75em;
}
.vmenu .first_li span {
width:100px;
display:block;
padding:5px 10px;
cursor:pointer
}
.vmenu .inner_li {
display:none;
margin-left:120px;
position:absolute;
border:1px solid #aaa;
border-left:1px solid #ccc;
margin-top:-28px;
background:#fff;
}
.vmenu .sep_li {
border-top: 1px ridge #aaa;
margin:5px 0
}
.vmenu .fill_title {
font-size:11px;
font-weight:bold;
/height:15px;
/overflow:hidden;
word-wrap:break
}
;
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script type=”text/javascript” >
$(document).ready(function(){
$(‘.toolTip’).bind(‘contextmenu’,function(e){
var $cmenu = $(this).next();
$(‘<div class=”overlay”></div>’).css({left : ‘0px’, top : ‘0px’,position: ‘absolute’, width: ‘100%’, height: ‘100%’, zIndex: ‘100’ }).click(function() {
$(this).remove();
$cmenu.hide();
}).bind(‘contextmenu’ , function(){return false;}).appendTo(document.body);
$(this).next().css({ left: e.pageX, top: e.pageY, zIndex: ‘101’ }).show();
return false;
});
$(‘.vmenu .first_li’).live(‘click’,function() {
if( $(this).children().size() == 1 ) {
//alert(‘Delete Event’);
console.log(this.id);
var aa = this.id;
var ttt=$(‘#tt’+aa).text();
alert(ttt);
$(‘.vmenu’).hide();
$(‘.overlay’).hide();
}
});
/*$(‘.vmenu .inner_li span’).live(‘click’,function() {
alert($(this).text());
$(‘.vmenu’).hide();
$(‘.overlay’).hide();
});*/
$(“.first_li , .sec_li, .inner_li span”).hover(function () {
$(this).css({backgroundColor : ‘#E0EDFE’ , cursor : ‘pointer’});
if ( $(this).children().size() >0 )
$(this).find(‘.inner_li’).show();
$(this).css({cursor : ‘default’});
},
function () {
$(this).css(‘background-color’ , ‘#fff’ );
$(this).find(‘.inner_li’).hide();
});
});
////////////////////////////////
</script>
</head>
<body>
<div class=”toolTip” style=”width:200px; height:50px; border:1px solid #F00″>
<div id=”tt12″>jafar</div>
</div>
<div class=”vmenu”>
<div class=”first_li” id=”12″><span>Delete</span></div>
</div>
<br />
<div class=”toolTip” style=”width:200px; height:50px; border:1px solid #F00″>
<div id=”tt13″>jafar1</div>
</div>
<div class=”vmenu”>
<div class=”first_li” id=”13″><span>Delete</span></div>
</div>
<br />
<div class=”toolTip” style=”width:200px; height:50px; border:1px solid #F00″>
<div>jafar khan</div>
<div id=”tt14″ style=”display:none”>other Data</div>
</div>
</div>
<div class=”vmenu”>
<div class=”first_li” id=”14″><span>Delete</span></div>
</div>
</div>
</body>
</html>
