How to create custom right click of mouse using jQuery

In this article, we have created custom right click of mouse using jQuery. Many times we need to create our custom right click menu for web browser.  
 Design:-


Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jquerydiv.aspx.cs" Inherits="jquerydiv" %>

<!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 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-div").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
                });
                $(document).mouseup(function (e) {
                    var closediv = $("#custom-div");
                    if (closediv.has(e.target).length == 0) {
                        closediv.hide();
                    }
                });
            }
            catch (err) {
                alert(err);
            }
        });
    </script>
    <style type="text/css">
        #custom-div
        {
            z-index: 1000;
            position: absolute;
            border: solid 2px #39422e;
            background-color: #BEDD9A;
            padding: 5px 0;
            display: none;
        }
        #custom-div ol
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
            min-width: 130px;
            width: auto;
            max-width: 200px;
            font-family: Verdana;
            font-size: 12px;
        }
        #custom-div ol li
        {
            margin: 0;
            display: block;
            list-style: none;
            padding: 5px 5px;
        }
        #custom-div ol li:hover
        {
            background-color: #9890DD;
        }
       
        #custom-div ol li:active
        {
            color: #9890DD;
            background-color: #000;
        }
       
        #custom-div ol .list-devider
        {
            padding: 0px;
            margin: 0px;
        }
       
        #custom-div ol .list-devider hr
        {
            margin: 2px 0px;
        }
       
        #custom-div ol li a
        {
            color: Black;
            text-decoration: none;
            display: block;
            padding: 0px 5px;
        }
        #custom-div ol li a:active
        {
            color: #9890DD;
        }
    </style>
</head>
<body>
    <div>
        Code Solution page refer to improve your code skills. you can also learn many theoretical
        question they will be help in interview time.
       
    </div>
    <div id="custom-div">
        <ol>
            <li><a href="#">Back</a> </li>
            <li><a href="#">Forward</a> </li>
            <li class="list-devider">
                <hr />
            </li>
            <li><a href="#">Reload</a> </li>
            <li><a href="#">Save as</a> </li>
            <li><a href="#">Print</a> </li>
            <li class="list-devider">
                <hr />
            </li>
            <li><a href="#">Save as PDF</a> </li>
        </ol>
    </div>
</body>
</html>


Out-Put:-
  


How to create custom right click of mouse using jQuery How to create custom right click of mouse using jQuery Reviewed by NEERAJ SRIVASTAVA on 4:04:00 PM Rating: 5

No comments:

Powered by Blogger.