#1
  1. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    108
    Rep Power
    5

    Problem with positioning a context menu


    I am attempting to use medialize jQuery.contextMenu
    to create a static menu using the code below. I wish to
    have the menu centered below the span [inline block]
    with the ID of #newmainmenu. But instead it uses the
    mouse click coordinates to do the positing. Changing
    of: this, to of: "#newmainmenu", has no effect on this.

    What am I doing wrong??

    Code:
    /* The registerMainMenu function creates the 
     * main menu on the board18Map page. It uses
     * the jquery context menu plugin.
     */
    function registerMainMenu() {
      $.contextMenu({
        selector: "#newmainmenu", 
        trigger: "left",
        items: {
          accept: {
            name: "Accept Move",
            callback: function(){
              acceptMove();
            }
          },
          reset: {
            name: "Cancel Move",
            callback: function(){
              trayCanvasApp();
              mainCanvasApp();
              toknCanvasApp();
            }
          },
          stock: {
            name: "Stock Market",
            callback: function(){
              window.location = "board18Main.php";
            }
          },
          main: {
            name: "Main Page",
            callback: function(){
              window.location = "board18Main.php";
            }
          },
          logout: {
            name: "Log Out",
            callback: function(){
              $.post("php/logout.php", logoutOK);
            }
          },
          close: {
            name: "Close Menu",
            callback: function(){}
          }
        },
        zIndex: 10,
        determinePosition: function($menu) {
          // .position() is provided as a jQuery UI utility
          // (...and it won't work on hidden elements)
          $menu.css("display", "block").position({
            my: "top",
            at: "bottom",
            of: this,
            collision: "none"
          }).css("display", "none");
        },
        callback: function(key, options) {
          var m = "clicked on " + key + " on element ";
          m =  m + options.$trigger.attr("id");
          alert(m); 
        }
      });
    }
  2. #2
  3. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    108
    Rep Power
    5

    Smile


    I got help from the author. This is the changed code that works:

    Code:
    /* The registerMainMenu function creates the 
     * main menu on the board18Map page. It uses
     * the jquery context menu plugin.
     */
    function registerMainMenu() {
      $.contextMenu({
        selector: "#newmainmenu", 
        trigger: "left",
        items: {
          main: {
            name: "Main Page",
            callback: function(){
              window.location = "board18Main.php";
            }
          },
          logout: {
            name: "Log Out",
            callback: function(){
              $.post("php/logout.php", logoutOK);
            }
          },
          close: {
            name: "Close Menu",
            callback: function(){}
          }
        },
        zIndex: 10,
        // only change here! --------------------------------------
        position: function(opt, x, y) {
          opt.$menu.position({
            my: 'center top',
            at: 'center bottom',
            of: opt.$trigger
          });
        },
        // only change here! --------------------------------------
        callback: function(key, options) {
          var m = "clicked on " + key + " on element ";
          m =  m + options.$trigger.attr("id");
          alert(m); 
        }
      });
    }

IMN logo majestic logo threadwatch logo seochat tools logo