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

RE: [ydn-javascript] problems with removeItem in menu's

Expand Messages
  • 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 1 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 2 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.