Loading ...
Sorry, an error occurred while loading the content.

problems with removeItem in menu's

Expand Messages
  • James
    I ve had a crazy time trying to figure out how to dynamically build a menu. Finally got it working, but i m not sure that removeItem is working correctly in
    Message 1 of 4 , Nov 28, 2006
    • 0 Attachment
      I've had a crazy time trying to figure out how to dynamically build a
      menu. Finally got it working, but i'm not sure that removeItem is
      working correctly in all cases that it should.

      See the code below. There's two removeItem lines, one works, one
      doesn't. When it doesn't work, I mean the submenu is blanked and my
      new menuitems do not appear. It only happens within a mouseover
      event. Any ideas why?

      <HTML>
      <HEAD>
      <TITLE>test menu</TITLE>

      <!-- Dependencies -->
      <link rel="stylesheet" type="text/css" href="template/reset-fonts-
      grids.css">
      <link rel="stylesheet" type="text/css"
      href="template/menu.css">

      <script type="text/javascript"
      src="template/yahoo.js"></script>
      <script type="text/javascript" src="template/dom.js"></script>
      <script type="text/javascript"
      src="template/animation.js"></script>
      <script type="text/javascript"
      src="template/event.js"></script>
      <script type="text/javascript"
      src="template/container_core.js"></script>

      <!-- Source File for Menu's -->
      <script type="text/javascript"
      src="template/menu.js"></script>

      </HEAD>

      <BODY>
      <div id="mainmenu"></div>

      <script type="text/javascript">

      YAHOO.example.onMenuAvailable =
      function(p_oEvent) {

      // Instantiate and render the menu

      var oMenu = new YAHOO.widget.Menu(
      "storemenu",
      {
      position:"static",
      showdelay:250,
      hidedelay:750,
      lazyload:true,
      effect:{

      effect:YAHOO.widget.ContainerEffect.FADE,
      duration:0.25
      }
      }
      );

      oMenu.cfg.setProperty("width", "150px");

      var oSubMenu = new YAHOO.widget.Menu(
      "storesubmenu",
      {
      showdelay:250,
      hidedelay:750,
      lazyload:true,
      effect:{

      effect:YAHOO.widget.ContainerEffect.FADE,
      duration:0.25
      }
      }
      );

      oMenu.addItem(new YAHOO.widget.MenuItem
      ("Alphabetically",{ submenu: oSubMenu }));

      oSubMenu.addItem(new YAHOO.widget.MenuItem
      ("Yahoo! Mail", { url:"http://mail.yahoo.com"}));

      oSubMenu.cfg.addProperty("update",
      {value:1});
      oSubMenu.cfg.addProperty("catid",
      {value:5});
      oSubMenu.mouseOverEvent.subscribe
      (onCatMenuMouseOver,oSubMenu,true);

      oSubMenu.render(oMenu.getItem(0).element);

      oMenu.cfg.addProperty("update",{value:1});

      oMenu.render("mainmenu");

      oMenu.show();

      }

      function onCatMenuMouseOver(p_sType,
      p_aArguments) {
      var sUrl;
      var request;
      var menuobj;

      if (this.cfg.getProperty("update") == 1) {
      this.cfg.setProperty("update",0);

      menuobj = this.activeItem;
      idx = menuobj.index;

      label = menuobj.cfg.getProperty("text");
      submenu = menuobj.parent;
      catid = submenu.cfg.getProperty("catid");

      // This
      blanks the menu for good:

      this.removeItem(menuobj);

      objname
      = "mcat" + catid;
      var oSubMenu
      = new YAHOO.widget.Menu(
      objname,
      {
      showdelay:250,
      hidedelay:750,
      lazyload:true,
      effect:{

      effect:YAHOO.widget.ContainerEffect.FADE,
      duration:0.25
      }
      }
      );

      oSubMenu.cfg.addProperty("catid",{value:catid});
      oSubMenu.cfg.addProperty("update",{value:0});

      this.insertItem(new YAHOO.widget.MenuItem(label,{
      submenu: oSubMenu }),idx);

      oSubMenu.cfg.setProperty("width", "150px");

      // query
      remote server here for submenu's

      oSubMenu.addItem(new YAHOO.widget.MenuItem("Yahoo! Address
      Book", { url:"http://addressbook.yahoo.com"}));
      oSubMenu.addItem(new
      YAHOO.widget.MenuItem("Yahoo! Calendar", {
      url:"http://calendar.yahoo.com"}));
      oSubMenu.addItem(new
      YAHOO.widget.MenuItem("Yahoo! Notepad", {
      url:"http://notepad.yahoo.com"} ));

      oSubMenu.render(this.getItem(idx).element);

      // This
      works: removes only the specified menuitem

      //this.removeItem(menuobj);

      }
      }

      // Initialize and render the menu when it is available in the
      DOM

      YAHOO.util.Event.onAvailable("mainmenu",
      YAHOO.example.onMenuAvailable);

      </script>


      </BODY>
      </HTML>
    • Todd Kloots
      James - I d be happy to help you debug this one, but am having a difficult time trying to figure out what you are trying to do here. Is the idea that when the
      Message 2 of 4 , Nov 30, 2006
      • 0 Attachment
        James -

        I'd be happy to help you debug this one, but am having
        a difficult time trying to figure out what you are
        trying to do here. Is the idea that when the user
        mouses over a menu item that you clear the contents of
        the corresponding submenu and add new items to it?

        - Todd


        --- James <jamieff@...> wrote:

        > I've had a crazy time trying to figure out how to
        > dynamically build a
        > menu. Finally got it working, but i'm not sure that
        > removeItem is
        > working correctly in all cases that it should.
        >
        > See the code below. There's two removeItem lines,
        > one works, one
        > doesn't. When it doesn't work, I mean the submenu
        > is blanked and my
        > new menuitems do not appear. It only happens within
        > a mouseover
        > event. Any ideas why?
        >
        > <HTML>
        > <HEAD>
        > <TITLE>test menu</TITLE>
        >
        > <!-- Dependencies -->
        > <link rel="stylesheet" type="text/css"
        > href="template/reset-fonts-
        > grids.css">
        > <link rel="stylesheet" type="text/css"
        > href="template/menu.css">
        >
        > <script type="text/javascript"
        > src="template/yahoo.js"></script>
        > <script type="text/javascript"
        > src="template/dom.js"></script>
        > <script type="text/javascript"
        > src="template/animation.js"></script>
        > <script type="text/javascript"
        > src="template/event.js"></script>
        > <script type="text/javascript"
        > src="template/container_core.js"></script>
        >
        > <!-- Source File for Menu's -->
        > <script type="text/javascript"
        > src="template/menu.js"></script>
        >
        > </HEAD>
        >
        > <BODY>
        > <div id="mainmenu"></div>
        >
        > <script type="text/javascript">
        >
        > YAHOO.example.onMenuAvailable =
        > function(p_oEvent) {
        >
        > // Instantiate and render the menu
        >
        > var oMenu = new YAHOO.widget.Menu(
        > "storemenu",
        > {
        > position:"static",
        >
        > showdelay:250,
        > hidedelay:750,
        > lazyload:true,
        > effect:{
        >
        > effect:YAHOO.widget.ContainerEffect.FADE,
        > duration:0.25
        > }
        > }
        > );
        >
        > oMenu.cfg.setProperty("width", "150px");
        >
        > var oSubMenu = new YAHOO.widget.Menu(
        > "storesubmenu",
        > {
        > showdelay:250,
        >
        > hidedelay:750,
        >
        > lazyload:true,
        >
        > effect:{
        >
        > effect:YAHOO.widget.ContainerEffect.FADE,
        >
        > duration:0.25
        > }
        > }
        > );
        >
        > oMenu.addItem(new YAHOO.widget.MenuItem
        > ("Alphabetically",{ submenu: oSubMenu }));
        >
        > oSubMenu.addItem(new YAHOO.widget.MenuItem
        > ("Yahoo! Mail", { url:"http://mail.yahoo.com"}));
        >
        > oSubMenu.cfg.addProperty("update",
        > {value:1});
        > oSubMenu.cfg.addProperty("catid",
        > {value:5});
        > oSubMenu.mouseOverEvent.subscribe
        > (onCatMenuMouseOver,oSubMenu,true);
        >
        > oSubMenu.render(oMenu.getItem(0).element);
        >
        > oMenu.cfg.addProperty("update",{value:1});
        >
        > oMenu.render("mainmenu");
        >
        > oMenu.show();
        >
        > }
        >
        > function onCatMenuMouseOver(p_sType,
        > p_aArguments) {
        > var sUrl;
        > var request;
        > var menuobj;
        >
        > if (this.cfg.getProperty("update") == 1)
        > {
        > this.cfg.setProperty("update",0);
        >
        > menuobj = this.activeItem;
        > idx = menuobj.index;
        >
        > label =
        > menuobj.cfg.getProperty("text");
        > submenu = menuobj.parent;
        > catid =
        > submenu.cfg.getProperty("catid");
        >
        > // This
        > blanks the menu for good:
        >
        > this.removeItem(menuobj);
        >
        > objname
        > = "mcat" + catid;
        > var oSubMenu
        > = new YAHOO.widget.Menu(
        > objname,
        > {
        >
        > showdelay:250,
        >
        > hidedelay:750,
        >
        > lazyload:true,
        > effect:{
        >
        > effect:YAHOO.widget.ContainerEffect.FADE,
        >
        > duration:0.25
        > }
        > }
        > );
        >
        >
        > oSubMenu.cfg.addProperty("catid",{value:catid});
        >
        > oSubMenu.cfg.addProperty("update",{value:0});
        >
        > this.insertItem(new
        > YAHOO.widget.MenuItem(label,{
        > submenu: oSubMenu }),idx);
        >
        > oSubMenu.cfg.setProperty("width",
        > "150px");
        >
        > // query
        > remote server here for submenu's
        >
        > oSubMenu.addItem(new YAHOO.widget.MenuItem("Yahoo!
        > Address
        > Book", { url:"http://addressbook.yahoo.com"}));
        > oSubMenu.addItem(new
        > YAHOO.widget.MenuItem("Yahoo! Calendar", {
        > url:"http://calendar.yahoo.com"}));
        > oSubMenu.addItem(new
        > YAHOO.widget.MenuItem("Yahoo! Notepad", {
        > url:"http://notepad.yahoo.com"} ));
        >
        > oSubMenu.render(this.getItem(idx).element);
        >
        > // This
        > works: removes only the specified menuitem
        >
        > //this.removeItem(menuobj);
        >
        > }
        > }
        >
        > // Initialize and render the menu when it is
        > available in the
        > DOM
        >
        > YAHOO.util.Event.onAvailable("mainmenu",
        > YAHOO.example.onMenuAvailable);
        >
        > </script>
        >
        >
        >
        === message truncated ===
      • James ffolliott
        Hi Todd, Yes that s essentially the idea. I simplified my code to demonstrate the problem. The actual menu system is backed by a database and will end up
        Message 3 of 4 , Dec 1, 2006
        • 0 Attachment
          Hi Todd,

          Yes that's essentially the idea. I simplified my code to demonstrate the
          problem. The actual menu system is backed by a database and will end up
          becoming very large, and not very efficient to generate on every hit to the
          homepage. So what it does is display the top level of submenu's, and as the
          user browses the menu my actual implementation asks the server for the next
          submenu (with the connector component) and dynamically builds the menu out
          as needed.

          The reason I've got a menu item in each submenu is because that submenu does
          not render when it's empty, hence the mouseover event didn't get fired. Try
          commenting out this line to see what I mean:
          oSubMenu.addItem(new YAHOO.widget.MenuItem("Yahoo! Mail", {
          url:"http://mail.yahoo.com"}));

          So OnMouseOver, I clear the corresponding submenu, and add to that submenu.
          If I do it in that order, the submenu becomes blank. If I reverse that
          order, then mysteriously it works, and you'll see that in my example by
          switching between the two instances of "removeItem".

          Both problems are similar in that empty menu's aren't handled as you'd
          expect.

          Thanks for the help!

          Regards,
          James

          > James -
          >
          > I'd be happy to help you debug this one, but am having a
          > difficult time trying to figure out what you are trying to do
          > here. Is the idea that when the user mouses over a menu item
          > that you clear the contents of the corresponding submenu and
          > add new items to it?
          >
          > - Todd
          >
          >
          > --- James wrote:
          >
          > > I've had a crazy time trying to figure out how to
          > dynamically build a
          > > menu. Finally got it working, but i'm not sure that removeItem is
          > > working correctly in all cases that it should.
          > >
          > > See the code below. There's two removeItem lines, one works, one
          > > doesn't. When it doesn't work, I mean the submenu is
          > blanked and my
          > > new menuitems do not appear. It only happens within a mouseover
          > > event. Any ideas why?
          > >
          > > <HTML>
          > > <HEAD>
          > > <TITLE>test menu</TITLE>
          > >
          > > <!-- Dependencies -->
          > > <link rel="stylesheet" type="text/css"
          > > href="template/reset-fonts-
          > > grids.css">
          > > <link rel="stylesheet" type="text/css"
          > > href="template/menu.css">
          > >
          > > <script type="text/javascript"
          > > src="template/yahoo.js"></script>
          > > <script type="text/javascript"
          > > src="template/dom.js"></script>
          > > <script type="text/javascript"
          > > src="template/animation.js"></script>
          > > <script type="text/javascript"
          > > src="template/event.js"></script>
          > > <script type="text/javascript"
          > > src="template/container_core.js"></script>
          > >
          > > <!-- Source File for Menu's -->
          > > <script type="text/javascript"
          > > src="template/menu.js"></script>
          > >
          > > </HEAD>
          > >
          > > <BODY>
          > > <div id="mainmenu"></div>
          > >
          > > <script type="text/javascript">
          > >
          > > YAHOO.example.onMenuAvailable =
          > > function(p_oEvent) {
          > >
          > > // Instantiate and render the menu
          > >
          > > var oMenu = new YAHOO.widget.Menu(
          > > "storemenu",
          > > {
          > > position:"static",
          > >
          > > showdelay:250,
          > > hidedelay:750,
          > > lazyload:true,
          > > effect:{
          > >
          > > effect:YAHOO.widget.ContainerEffect.FADE,
          > > duration:0.25
          > > }
          > > }
          > > );
          > >
          > > oMenu.cfg.setProperty("width", "150px");
          > >
          > > var oSubMenu = new YAHOO.widget.Menu(
          > > "storesubmenu",
          > > {
          > > showdelay:250,
          > >
          > > hidedelay:750,
          > >
          > > lazyload:true,
          > >
          > > effect:{
          > >
          > > effect:YAHOO.widget.ContainerEffect.FADE,
          > >
          > > duration:0.25
          > > }
          > > }
          > > );
          > >
          > > oMenu.addItem(new
          > YAHOO.widget.MenuItem ("Alphabetically",{
          > > submenu: oSubMenu }));
          > >
          > > oSubMenu.addItem(new
          > YAHOO.widget.MenuItem ("Yahoo! Mail", {
          > > url:"http://mail.yahoo.com"}));
          > >
          > > oSubMenu.cfg.addProperty("update",
          > > {value:1});
          > > oSubMenu.cfg.addProperty("catid",
          > {value:5});
          > > oSubMenu.mouseOverEvent.subscribe
          > > (onCatMenuMouseOver,oSubMenu,true);
          > >
          > > oSubMenu.render(oMenu.getItem(0).element);
          > >
          > > oMenu.cfg.addProperty("update",{value:1});
          > >
          > > oMenu.render("mainmenu");
          > >
          > > oMenu.show();
          > >
          > > }
          > >
          > > function onCatMenuMouseOver(p_sType,
          > > p_aArguments) {
          > > var sUrl;
          > > var request;
          > > var menuobj;
          > >
          > > if (this.cfg.getProperty("update") == 1) {
          > > this.cfg.setProperty("update",0);
          > >
          > > menuobj = this.activeItem;
          > > idx = menuobj.index;
          > >
          > > label =
          > > menuobj.cfg.getProperty("text");
          > > submenu = menuobj.parent;
          > > catid =
          > > submenu.cfg.getProperty("catid");
          > >
          > > // This
          > > blanks the menu for good:
          > >
          > > this.removeItem(menuobj);
          > >
          > > objname
          > > = "mcat" + catid;
          > > var oSubMenu
          > > = new YAHOO.widget.Menu(
          > > objname,
          > > {
          > >
          > > showdelay:250,
          > >
          > > hidedelay:750,
          > >
          > > lazyload:true,
          > > effect:{
          > >
          > > effect:YAHOO.widget.ContainerEffect.FADE,
          > >
          > > duration:0.25
          > > }
          > > }
          > > );
          > >
          > >
          > > oSubMenu.cfg.addProperty("catid",{value:catid});
          > >
          > > oSubMenu.cfg.addProperty("update",{value:0});
          > >
          > > this.insertItem(new
          > > YAHOO.widget.MenuItem(label,{
          > > submenu: oSubMenu }),idx);
          > >
          > > oSubMenu.cfg.setProperty("width", "150px");
          > >
          > > // query
          > > remote server here for submenu's
          > >
          > > oSubMenu.addItem(new YAHOO.widget.MenuItem("Yahoo!
          > > Address
          > > Book", { url:"http://addressbook.yahoo.com"}));
          > > oSubMenu.addItem(new
          > > YAHOO.widget.MenuItem("Yahoo! Calendar", {
          > > url:"http://calendar.yahoo.com"}));
          > > oSubMenu.addItem(new
          > > YAHOO.widget.MenuItem("Yahoo! Notepad", {
          > > url:"http://notepad.yahoo.com"} ));
          > >
          > > oSubMenu.render(this.getItem(idx).element);
          > >
          > > // This
          > > works: removes only the specified menuitem
          > >
          > > //this.removeItem(menuobj);
          > >
          > > }
          > > }
          > >
          > > // Initialize and render the menu when it is
          > available in the
          > > DOM
          > >
          > > YAHOO.util.Event.onAvailable("mainmenu",
          > > YAHOO.example.onMenuAvailable);
          > >
          > > </script>
          > >
          > >
          > >
          > === message truncated ===
          >
          >
          >
        • Todd Kloots
          James - If you want to rebuild the contents of a menu on the fly, then I would do so by listener for the before show event. This event will fire regardless
          Message 4 of 4 , Dec 4, 2006
          • 0 Attachment
            James -

            If you want to rebuild the contents of a menu on the
            fly, then I would do so by listener for the "before
            show" event. This event will fire regardless what DOM
            event has triggered the display of the submenu. I
            created an example for you:

            http://yuiblog.com/sandbox/yui/v012/examples/menu/example10.php

            Hope that helps you.

            - Todd



            --- James ffolliott <jamieff@...> wrote:

            > Hi Todd,
            >
            > Yes that's essentially the idea. I simplified my
            > code to demonstrate the
            > problem. The actual menu system is backed by a
            > database and will end up
            > becoming very large, and not very efficient to
            > generate on every hit to the
            > homepage. So what it does is display the top level
            > of submenu's, and as the
            > user browses the menu my actual implementation asks
            > the server for the next
            > submenu (with the connector component) and
            > dynamically builds the menu out
            > as needed.
            >
            > The reason I've got a menu item in each submenu is
            > because that submenu does
            > not render when it's empty, hence the mouseover
            > event didn't get fired. Try
            > commenting out this line to see what I mean:
            > oSubMenu.addItem(new YAHOO.widget.MenuItem("Yahoo!
            > Mail", {
            > url:"http://mail.yahoo.com"}));
            >
            > So OnMouseOver, I clear the corresponding submenu,
            > and add to that submenu.
            > If I do it in that order, the submenu becomes blank.
            > If I reverse that
            > order, then mysteriously it works, and you'll see
            > that in my example by
            > switching between the two instances of "removeItem".
            >
            > Both problems are similar in that empty menu's
            > aren't handled as you'd
            > expect.
            >
            > Thanks for the help!
            >
            > Regards,
            > James
            >
            > > James -
            > >
            > > I'd be happy to help you debug this one, but am
            > having a
            > > difficult time trying to figure out what you are
            > trying to do
            > > here. Is the idea that when the user mouses over
            > a menu item
            > > that you clear the contents of the corresponding
            > submenu and
            > > add new items to it?
            > >
            > > - Todd
            > >
            > >
            > > --- James wrote:
            > >
            > > > I've had a crazy time trying to figure out how
            > to
            > > dynamically build a
            > > > menu. Finally got it working, but i'm not sure
            > that removeItem is
            > > > working correctly in all cases that it should.
            > > >
            > > > See the code below. There's two removeItem
            > lines, one works, one
            > > > doesn't. When it doesn't work, I mean the
            > submenu is
            > > blanked and my
            > > > new menuitems do not appear. It only happens
            > within a mouseover
            > > > event. Any ideas why?
            > > >
            > > > <HTML>
            > > > <HEAD>
            > > > <TITLE>test menu</TITLE>
            > > >
            > > > <!-- Dependencies -->
            > > > <link rel="stylesheet" type="text/css"
            > > > href="template/reset-fonts-
            > > > grids.css">
            > > > <link rel="stylesheet" type="text/css"
            > > > href="template/menu.css">
            > > >
            > > > <script type="text/javascript"
            > > > src="template/yahoo.js"></script>
            > > > <script type="text/javascript"
            > > > src="template/dom.js"></script>
            > > > <script type="text/javascript"
            > > > src="template/animation.js"></script>
            > > > <script type="text/javascript"
            > > > src="template/event.js"></script>
            > > > <script type="text/javascript"
            > > > src="template/container_core.js"></script>
            > > >
            > > > <!-- Source File for Menu's -->
            > > > <script type="text/javascript"
            > > > src="template/menu.js"></script>
            > > >
            > > > </HEAD>
            > > >
            > > > <BODY>
            > > > <div id="mainmenu"></div>
            > > >
            > > > <script type="text/javascript">
            > > >
            > > > YAHOO.example.onMenuAvailable =
            > > > function(p_oEvent) {
            > > >
            > > > // Instantiate and render the menu
            > > >
            > > > var oMenu = new YAHOO.widget.Menu(
            > > > "storemenu",
            > > > {
            > > >
            > position:"static",
            > > >
            > > > showdelay:250,
            >
            > > > hidedelay:750,
            >
            > > > lazyload:true,
            >
            > > > effect:{
            > > >
            > > > effect:YAHOO.widget.ContainerEffect.FADE,
            > > >
            > duration:0.25
            > > > }
            > > > }
            > > > );
            > > >
            > > > oMenu.cfg.setProperty("width",
            > "150px");
            > > >
            > > > var oSubMenu = new YAHOO.widget.Menu(
            > > > "storesubmenu",
            > > > {
            > > >
            > showdelay:250,
            > > >
            > > >
            > hidedelay:750,
            > > >
            > > >
            > lazyload:true,
            > > >
            > > > effect:{
            > > >
            > > > effect:YAHOO.widget.ContainerEffect.FADE,
            > > >
            > > > duration:0.25
            > > > }
            > > > }
            > > > );
            > > >
            > > > oMenu.addItem(new
            > > YAHOO.widget.MenuItem ("Alphabetically",{
            > > > submenu: oSubMenu }));
            > > >
            > > > oSubMenu.addItem(new
            > > YAHOO.widget.MenuItem ("Yahoo! Mail", {
            > > > url:"http://mail.yahoo.com"}));
            > > >
            > > > oSubMenu.cfg.addProperty("update",
            > > > {value:1});
            > > > oSubMenu.cfg.addProperty("catid",
            > > {value:5});
            > > > oSubMenu.mouseOverEvent.subscribe
            > > > (onCatMenuMouseOver,oSubMenu,true);
            > > >
            > > >
            > oSubMenu.render(oMenu.getItem(0).element);
            > > >
            > > >
            > oMenu.cfg.addProperty("update",{value:1});
            > > >
            > > > oMenu.render("mainmenu");
            > > >
            > > > oMenu.show();
            > > >
            > > > }
            > > >
            > > > function onCatMenuMouseOver(p_sType,
            > > > p_aArguments) {
            > > > var sUrl;
            > > > var request;
            > > > var menuobj;
            > > >
            > > > if (this.cfg.getProperty("update") ==
            > 1) {
            > > > this.cfg.setProperty("update",0);
            > > >
            > > > menuobj = this.activeItem;
            > > > idx = menuobj.index;
            > > >
            > > > label =
            > > > menuobj.cfg.getProperty("text");
            > > > submenu = menuobj.parent;
            >
            === message truncated ===
          Your message has been successfully submitted and would be delivered to recipients shortly.