How to show Nirvana Tikku, radial menu at any position

Question

I am Not Familiar with JavaScript and i am beginner in jQuery! I Found RadMenu Pluging from web and want to use it so that the it opens anywhere on document where I click, not just one fixed position.

$(function() {
        jQuery("#radial_container").radmenu({
            listClass: 'list',
            itemClass: 'item',
            radius: 100,
            animSpeed: 400,
            centerX: 30,
            centerY: 100,
            selectEvent: "click",
            onSelect: function($selected) {
                alert("you clicked on .. "
                + $selected.index());
            },
            angleOffset: Math.PI,
            onShow: function($menuitems) {
                $menuitems.each(function(i) {
                    var $this = jQuery(this);
                    setTimeout(function() {
                        $this.fadeIn(500);
                    }, i * 100);
                });
            }
        });
    });

I am trying to update the centerX and centerY values in in real time with onClick or with mouseover methods , but its not getting updated.

Please suggest me what to do to make it work.

Answer 1

This can be accomplished by changing the top and left properties of the <div> containing your radial menu, when the click event happens. For example,

$(document).click(function (e) {
  $('#radial_container').css('left', (e.pageX - 30) + 'px');
  $('#radial_container').css('top', (e.pageY - 40) + 'px');
  $("#radial_container").radmenu("show");
});

Here is a fiddle with a working version that you can play with further: http://jsfiddle.net/munderwood/7asLq/

The two values -30 and -40 that I use to shift the centre of the circle were picked just because they appear to work, more or less. They will change with the radius of the menu, text size, and so on, but I left them in so that you would see how and where to shift the menu relative to the mouse cursor.