jquerycontextmenubackground-imageright-click

jQuery - Context menu - right-click

I use a plugin for jQuery called ContextMenu: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

I have a div in the center of the page. I have the background-image in the points. I need it to only using jQuery right-click on the background-image. If you click on the background-image, so I want to display the ContextMenu. If you click the div with id divPage, nothing happens.

HTML

<body>
<form id="formBackground" method="post">
<ul id="myMenu" class="contextMenu">
                    <li class="insert"><a href="#insert">Add New</a></li>       
                    <li class="edit"><a href="#edit">Edit</a></li>                  
                    <li class="delete"><a href="#delete">Delete</a></li>            
                </ul>

    <div id="divPage">
Text.
    </div>
</form>

CSS

body, html {
height: 100%;
}

body{
padding: 0px;
margin: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: white;
background-image: url('../images/backgrounds/bg.jpg');
background-repeat:no-repeat;
background-position:top;
}

div#divPage{
width: 800px;
height: 300px;
margin: auto;
}

JS

$('body').bind('mousedown', function (evt) {
                
                switch (evt.which) {       
            case 3:
            if(evt.target == $('body')[0]) {
                //Show context menu
            }
            break;
    }                
                
            });
Solution

  • I think you are over-complicating things.

    Firstly I do not see your List anywhere in your code that creates the context menu.

    Secondly all you need to do is:

    $("idOfTheObjectYouWantToHaveAMenuOn").contextMenu({menu:"yourList"});