Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    188
    Thanks
    141
    Thanked 0 Times in 0 Posts

    Custom right click menu and then binding it to right click event inside of div

    Hello,

    I need the help of the Gurus and Experts on this forum,

    Without using long and code resource intensive jQuery and Javascript conext menu plugins, how can one, just using plain & simple jQuery code to basically take my div (who's id is: right-click-menu) and bind a right click action to the other div who's id is: box1?

    Much thanks and appreciation for all your help and support in advance,

    Cheers,

    Jay

    Here is a fiddle: Edit fiddle - JSFiddle

    Here is the basic HTML markup:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <style type="text/css">
    
    #right-click-menu {
    	width: 150px;
    	border-top: 1px solid rgb(212,208,200);
    	border-left: 1px solid rgb(212,208,200);
    	border-right: 1px solid rgb(64,64,64);
    	border-bottom: 1px solid rgb(64,64,64);
    	font-family: tahoma;
    	font-size: 8.5pt;
    	box-shadow: 2px 2px 2px rgb(142,142,142);
    }
    #right-click-menu ul {
    	list-style-type: none;
    	border-top: 1px solid #fff;
    	border-left: 1px solid #fff;
    	border-right: 1px solid rgb(128,128,128);
    	border-bottom: 1px solid rgb(128,128,128);
    	background: rgb(212,208,200);
    
    	margin: 0;
    	padding: 2px
    }
    #right-click-menu ul li {
    	padding: 4px;
    }
    #right-click-menu li:hover {
    	color: #fff;
    	cursor: pointer;
    	background: rgb(10,36,106);
    }
    
    </style>
    
    </head>
    
    <body>
    
    	<div id="right-click-menu">
    		<ul>
    		
    			<li>option1</li>
    			<li>option2</li>
    			<li>option3</li>
    			<li>option4</li>		
    		</ul>
    	</div>
    <br>
    <div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
    </body>
    
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if you want to just grab the text from the li and put it in the box:
    Code:
    <script>
    $("#right-click-menu li").on("contextmenu", function () {
    
    $("#box1").text(this.innerHTML);
    
    // return false; <- uncomment this if you don't want the context menu to appear
    
    });
    </script>
    if, as the title suggests you want to construct a custom context menu that would be a little (but not that much) more involved

  • Users who have thanked xelawho for this post:

    jason_kelly (07-30-2014)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    188
    Thanks
    141
    Thanked 0 Times in 0 Posts
    Thanks so much XelaWho


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •