Context menu using jquery

Question

I have a context menu in jquery on Right Click.

But it is somehow not fulfilling my needs.

When i add new div on click and then try to have context menu operation on it, then it is not working.

It is applying operation on original div.

Can someone help me out in getting this problem solved and improving my Jquery or HTMl.

Js fiddle for Context Menu

Thanks

You have multiple design problems in your HTML coupled with a few in your JavaScript, which quite clearly seem to be causing your problems. Start by making sure that no duplicate id attributes appear on the DOM when you clone the boxes. Then take another look at your jQuery selectors and how you're targeting each element... some of them are incorrect. — Marc Kline
– Marc Kline, Commented Apr 12, 2014 at 6:49
I tried a lot but somehow did not get it working. Any help would be appreciated. :) — Richa
– Richa, Commented Apr 12, 2014 at 6:52
Sorry, I'm not sure what more direction I can offer, and it would require a very significant amount of work for me to go through and refactor your code. Again, take a close look at your HTML and work on making some changes so that anything that is going to be duplicated when you clone the box doesn't contain an id attribute. Once you've done that, work again on your jQuery selectors. — Marc Kline
– Marc Kline, Commented Apr 12, 2014 at 6:59
I have created my own context menu should i put that code for reference or you can use also. — Harshal Patil
– Harshal Patil, Commented Apr 12, 2014 at 7:00

K K · Accepted Answer · 2014-04-12 08:06:50Z

2

As marck said that there are many mistakes in your code.You used same ID on multiple elements multiple times. Anyway, I created a basic jsfiddle of what you are trying to achieve. You can build on top of that and modify it according to your needs.

Here is the link: http://jsfiddle.net/PCLwU/

function add(){
 //For adding new items.
}

function menu(){
//to show up context menu
}

function menuactions(){
//Define the actions performed when menu option is selected.
}

For different context menu for different list : http://jsfiddle.net/PCLwU/3/

edited Apr 12, 2014 at 8:06

answered Apr 12, 2014 at 7:09

K K

18.2k4 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Richa Over a year ago

Very close to what i wanted :) Thanks

Richa Over a year ago

@What if i have multiple list?? Will have to write code everytime for each list??

Harshal Patil Over a year ago

@RS26 Thats what i did in my code You just need to iterate values in container. Check out this jsfiddle.net/PCLwU/1

Richa Over a year ago

@KamleshKushwaha Would you please help me out with multiple list demo?? I want different context menu for different list

K K Over a year ago

jsfiddle.net/PCLwU/3 I changed the code as per your need. I added an attribute "op" in li, based on which the context menu will show. You can change "op" attribute according to the context menu you want to show. Hope this helps.

|

Nagama Inamdar · Accepted Answer · 2014-04-12 07:50:27Z

1

Context menu div

<div id='contextMenu'>                         
    <ul id='items'>                        
            <li id="cutDoc">Cut</li>
            <li id="copyDoc">Copy</li>
            <li id="pasteDoc">Paste</li>
            <li id="deleteDocs">Delete</li>
   </ul>
</div>

menu Style

<style>
    #items
    {
      list-style: none;
      margin: 5px  0 0 5px;
    }
    #contextMenu
    {
      display: none;
      position: fixed;       
      border: 1px solid grey;
      width: 150px;
      background-color:white;
      box-shadow: 2px 2px 1px grey;
    }
    #items li
    {
      list-style-type: none;      
      border-bottom: 1px solid grey;
      border-bottom-style: dotted;
      padding: 10px;
      font-size: 14px; 
    } 
    #items :hover
    {
      background: #0070FF;     
      color: white;
    }
</style>

jQuery Script for applying on area where it will needed which

$("YOur class name").mousedown(function(e){
        //to block browsers default right click
        if( e.button == 2 ) {

            $("#contextMenu").css("left", e.pageX);
            $("#contextMenu").css("top", e.pageY);
            $("#contextMenu").fadeIn(500, startFocusOut());
        }
      });

     function startFocusOut() {
            $(document).on("click", function () {   
                $("#contextMenu").hide(500);
                $(document).off("click");           
            });
        }

This will work fine.

Update:

here is the fiddle demo

edited Apr 12, 2014 at 7:50

Nagama Inamdar

2,85522 gold badges41 silver badges51 bronze badges

answered Apr 12, 2014 at 7:08

Harshal Patil

6,7698 gold badges44 silver badges58 bronze badges

2 Comments

Harshal Patil Over a year ago

@RS26 I am Sure.This will work. Because i did this functionality some days ago.

Richa Over a year ago

I am so sorry i am new to coding and jquery. But i need to have different context menu for different li. What in that case???

Collectives™ on Stack Overflow

Context menu using jquery

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related