CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Richa
Richa

Reputation: 3289

Context menu using jquery

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

Upvotes: 1

Views: 911

Answers (2)

K K
K K

Reputation: 18099

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/

Upvotes: 2

Harshal Patil
Harshal Patil

Reputation: 6759

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

Upvotes: 1

Related Questions