jQuery plugin: context menu in second div not working

Question

I developed a simple jQuery plugin that works fine when I right click on a div, but when I click on a second div the context menu appears on the first div. Here's the jsfiddle. What's wrong with this plugin?

The plugin code:

(function ( $ ) {

var menu = null;

$.fn.ctxMenu = function( options ) {

    var settings = $.extend({
        menuItems: null,
        onclick: null
    }, options );

    show(this,settings.menuItems,settings.onclick);

};


function show(obj,menuItems,onclick){

    obj.bind( "contextmenu", function(e) {
      if (e.preventDefault) e.preventDefault();
      if (e.stopPropagation) e.stopPropagation();
      render(obj,e.offsetX, e.offsetY,menuItems,onclick);
    });

    obj.bind( "click", function(e) {
      if (menu != null) 
        menu.remove();
    });
}


function render(obj,x,y,menuItems,onclick) {

    if (menu != null) 
        menu.remove();

    menu = $('<div id="menu" class="ctxMenu" />');
    obj.append(menu);
    menu.css('padding-top', '4px' );
    menu.css('padding-bottom', '0px' );
    menu.css('padding-left', '6px' );
    menu.css('padding-right', '20px' );
    menu.css('position', 'absolute' );
    menu.css('top', y+'px' );
    menu.css('left', x+'px' );

    for (var i=0;i<menuItems.length;i++) {

        var item = $('<div id="item" style="height:20px;padding:2px;cursor:default;"  />');
        item.attr('opt',menuItems[i].opt);
        var p = $('<p id="p' + i + '"  style="margin:0" />' );
        p.text(menuItems[i].optCaption);
        p.attr('opt',menuItems[i].opt);
        item.append(p);
        menu.append(item);
        item.bind( "click", function(e) {
            if (typeof onclick == 'function')
                onclick.call(this,obj.attr('id'),$(e.target).attr('opt'));
        });
    }
}

}( jQuery ));

And sample code of how to invoke it:

        $div.ctxMenu({
            menuItems: [ { opt:1, optCaption: "Option 1" }, 
                         { opt:2, optCaption: "Option 2" }, 
                         { opt:3, optCaption: "Option 3" }
                        ], 
            change: function(id,opt) {
                alert(id+"-"+opt);
            }
        });

because you do not have position:relative on the parent container: jsfiddle.net/pevans02/dzSRR/7 — Patrick Evans
– Patrick Evans, Commented Jul 11, 2014 at 14:53
working fine for me in Firefox, have you cleared your web cache? — Rafael
– Rafael, Commented Jul 11, 2014 at 14:55
@PatrickEvans I added position:relative and still have the problem — ps0604
– ps0604, Commented Jul 11, 2014 at 14:56
Then you are not putting it on the right elements, see the fiddle i linked, i put position:relative on the two divs you dynamically create — Patrick Evans
– Patrick Evans, Commented Jul 11, 2014 at 14:58
@RafaelDiaz I tested with IE and Chrome, in both I have the same problem. Just tested in FF, the problem is different context menu appears in (0,0). — ps0604
– ps0604, Commented Jul 11, 2014 at 14:58

Progo · Accepted Answer · 2014-08-17 22:47:21Z

Here is the problem, the parent div does not have relative positioning. It The parent needs to have relative positioning while the menu div has absolute positing in order to get what you want.

Solution 1 (starts at the beginning of your code):

$(document).ready(function () {

    $container = $('#container');

    var $div = $('<div style="width:300px;height:300px;border:1px solid black;float:left; position:relative"/>');
    $div.appendTo($container);
    addCtxMenu($div);

    var $div2 = $('<div style="width:300px;height:300px;border:1px solid black;float:left; position:relative"/>');
    $div2.appendTo($container);
    addCtxMenu($div2);

});
//... Rest of code

FIDDLE

Solution 2 (starts at line 59 of your code)

I change the position of the menu div to position:relative, but this is less elegant because the menu takes up the width of its parent. I would recommend solution 1 if you don't know the exact width of the menu.

   function render(obj,x,y,menuItems,onclick) {

        if (menu != null) 
            menu.remove();

        menu = $('<div id="menu" class="ctxMenu" />');
        obj.append(menu);
        menu.css('padding-top', '4px' );
        menu.css('padding-bottom', '0px' );
        menu.css('padding-left', '6px' );
        menu.css('padding-right', '20px' );
        menu.css('position', 'relative' );
        menu.css('top', y+'px' );
        menu.css('left', x+'px' );

        for (var i=0;i<menuItems.length;i++) {

            var item = $('<div id="item" style="height:20px;padding:2px;cursor:default;"  />');
            item.attr('opt',menuItems[i].opt);
            var p = $('<p id="p' + i + '"  style="margin:0" />' );
            p.text(menuItems[i].optCaption);
            p.attr('opt',menuItems[i].opt);
            item.append(p);
            menu.append(item);
            item.bind( "click", function(e) {
                if (typeof onclick == 'function')
                    onclick.call(this,obj.attr('id'),$(e.target).attr('opt'));
            });
        }
    }

FIDDLE

Good luck with your plugin!

Collectives™ on Stack Overflow

jQuery plugin: context menu in second div not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related