Question

I’m using Dynamic Drive’s jQuery Context Menu script and I can get the context menus to work, but once I add those scripts, it breaks all of the other jQuery that was previously working…

I’m assuming it might have something to do with the script using jQuery and .noConflict() instead of $, but i’m no expert.

The reason I’m wanting to stick with this script is because of how it handles collisions and menu positions. This is the only one I’ve found so far that positions the context menu above the cursor if there isn’t enough room below the cursor. Every other scripts’ menus just get cut off from the document.

I would post all of my jQuery that breaks with the context menu script, but there’s nothing fancy about it, so here’s just a basic version:

$(function(){
    $("#selector").hide();
});

If anyone could help fix this script, or recommend a new one that doesn’t have the positioning problem, it would be greatly appreciated.

Answer 1

Remove this line from the dynamic drive portion of the script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

You only need to include jQuery once for it to handle all scripts that require it.

Modify the script you downloaded from DD and remove this line:

jQuery.noConflict()

It should be toward the top of the file. Since you are only including jquery once, it isn’t needed. However, I still can’t get that to run in jsFiddle, i’m getting an odd error. http://jsfiddle.net/kybp9/

Edit: It now works:
http://jsfiddle.net/kybp9/1/

UPDATE
Replace this part of the plugin

jQuery.fn.addcontextmenu = function(contextmenuid) {
    var $ = jQuery
    return this.each(function() { //return jQuery obj
        var $target = $(this)
        jquerycontextmenu.init($, $target, $('#' + contextmenuid))
    })
};

with this to avoid the $contextmenu.get(0) is undefined errors:

jQuery.fn.addcontextmenu = function(contextmenuid) {
    var $ = jQuery,
        $contextmenu = $('#' + contextmenuid));
    if (!$contextmenu.length) {
        // no contextmenu found, exit
        return this;
    }
    return this.each(function() { //return jQuery obj
        var $target = $(this)
        jquerycontextmenu.init($, $target, $contextmenu)
    })
};