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

Re: Submenu alignment for menu component

Expand Messages
  • Nick Momich
    I believe I have found the source of my problem in menu.js (yui_0.11.4.zip). The _onMenuShow() method (@line 3949) attempts to always set the
    Message 1 of 7 , Oct 2, 2006
    • 0 Attachment
      I believe I have found the source of my problem in menu.js
      (yui_0.11.4.zip). The _onMenuShow() method (@line 3949) attempts to
      always set the "submenualignment" property to that of the value
      found in a parent element. Seems like this makes it only possible to
      set the submenualignment at the top-most level of the menu. Any
      submenus will inherit this property. Just to test, I commmented out
      the block where the property it set and now I can control the
      alignment of submenus. Since this was just a test, and not the most
      elegant solution, I will consider a refactor to the method for our
      local use:

      // this.cfg.setProperty(
      // "submenualignment",
      // [ aAlignment[0], aAlignment[1] ]
      // );


      Hope this helps someone else out.



      --- In ydn-javascript@yahoogroups.com, "Nick Momich" <nmomich@...>
      wrote:
      >
      > I am having difficulty controlling the positioning and alignment
      of the
      > submenus when developing a hierarchical menu. The goal is to
      have some
      > of the submenus to present to the right, and others to the left.
      There
      > is a configuration property for "submenualignment" that is
      supposed to
      > support this functionality but I am unable to have it recognized
      when
      > the actual menu is rendered. I am working on a complex menu that
      > generates from a JSON-based model that is a derivation of the one
      used
      > in the example:
      > http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html
      >
      <http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html> I
      > have extended the method onMenuBeforeShow() to look for the
      > "submenualignment" parameter in the JSON object, and when found
      set the
      > configuration parameter during the creation of the new
      YAHOO.widget.Menu
      > object, but that does not seem to work (Please see examples
      below).
      > Not seen in the examples below, I have also tried brute force
      hacking
      > the creation of the Menu object by passing the config property to
      the
      > constructor, and that also does not seem to work. // does not
      work
      > oSubmenu = new YAHOO.widget.Menu(oItemData.submenuId,
      {submenualignment:
      > ["tr","tl"]}); Thanks in advance for the help! I have
      included
      > some code examples below:
      >
      > Example JSON: {text:"Profile Attributes", submenuId: "atts",
      > submenualignment: ["tr","tl"], submenuItems: [
      > {text:"Profession"},
      > {text:"Specialty"},
      > {text:"Degree"},
      > ]
      > }
      > Method enhanced:
      > // "beforeshow" handler for each submenu of the menubar
      > function onMenuBeforeShow(p_sType, p_sArgs) {
      > // Check if the menu has any items. If not, add them
      > if(this.getItemGroups().length == 0) { var
      aItemsData =
      > this.itemsData,
      > nItems = aItemsData.length,
      > oItemData,
      > oItemConfig,
      > oSubmenu; for(var i=0; i<nItems; i++) {
      > oItemData = aItemsData[i];
      > if(oItemData) {
      > oItemConfig = {};
      > if(oItemData.url) {
      > oItemConfig.url = oItemData.url;
      > }
      > if(oItemData.submenuItems) {
      > oSubmenu = new
      > YAHOO.widget.Menu(oItemData.submenuId);
      > oSubmenu.itemsData = oItemData.submenuItems;
      > if(oItemData.submenualignment) {
      > YAHOO.log( "Setting submenualignment: "
      > + oItemData.submenualignment, "info",
      > "onMenuBeforeShow" ); // first attempt
      to set
      >
      > oSubmenu.cfg.setProperty
      ("submenualignment",oItemData.submenualignment
      > ); // second attempt to set
      > oItemConfig.submenualignment =
      > oItemData.submenualignment; YAHOO.log(
      > "Config submenualignment: "
      > +
      oItemConfig.submenualignment, "info",
      > "onMenuBeforeShow" );
      > }
      > oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu,
      true);
      > oSubmenu.mouseOverEvent.subscribe
      (cancelTimer);
      > oSubmenu.mouseOutEvent.subscribe
      (onSubmenuMouseOut,
      > oSubmenu, true); oItemConfig.submenu =
      oSubmenu;
      > // Add the new YAHOO.widget.MenuItem instance to the Menu
      > this.addItem(new
      > YAHOO.widget.MenuItem(oItemData.text, oItemConfig));
      > }else{ // Add the new
      > YAHOO.widget.MenuItem instance to the Menu
      > this.addItem(new
      > YAHOO.widget.MenuItem(oItemData.text, oItemConfig, 0));
      > this.setItemGroupTitle("Click to Add
      Criteria", 0);
      > }
      > }
      > } // Render the submenu into its parent MenuItem
      > instance's element
      > this.render(this.parent.element);
      > }
      > }
      >
    • Todd Kloots
      Nick - You re correct - the submenualignment property is designed to cascade down to all submenus as a convience to the implementer so that you don t have to
      Message 2 of 7 , Oct 2, 2006
      • 0 Attachment
        Nick -

        You're correct - the "submenualignment" property is
        designed to cascade down to all submenus as a
        convience to the implementer so that you don't have to
        set that property on every since instance. Just out
        of curiosity, why are you opening some menus to the
        left and some to the right in your implementation? Is
        it to make sure that submenus remain inside the
        boudary of the viewport? If so, there is another
        configuration property named "constraintoviewport"
        that if set to "true" will ensure that all submenus
        remain positioned inside the viewport.

        -Todd

        --- Nick Momich <nmomich@...> wrote:

        >
        > I believe I have found the source of my problem in
        > menu.js
        > (yui_0.11.4.zip). The _onMenuShow() method (@line
        > 3949) attempts to
        > always set the "submenualignment" property to that
        > of the value
        > found in a parent element. Seems like this makes it
        > only possible to
        > set the submenualignment at the top-most level of
        > the menu. Any
        > submenus will inherit this property. Just to test, I
        > commmented out
        > the block where the property it set and now I can
        > control the
        > alignment of submenus. Since this was just a test,
        > and not the most
        > elegant solution, I will consider a refactor to the
        > method for our
        > local use:
        >
        > // this.cfg.setProperty(
        > // "submenualignment",
        > // [ aAlignment[0], aAlignment[1] ]
        > // );
        >
        >
        > Hope this helps someone else out.
        >
        >
        >
        > --- In ydn-javascript@yahoogroups.com, "Nick Momich"
        > <nmomich@...>
        > wrote:
        > >
        > > I am having difficulty controlling the positioning
        > and alignment
        > of the
        > > submenus when developing a hierarchical menu.
        > The goal is to
        > have some
        > > of the submenus to present to the right, and
        > others to the left.
        > There
        > > is a configuration property for "submenualignment"
        > that is
        > supposed to
        > > support this functionality but I am unable to have
        > it recognized
        > when
        > > the actual menu is rendered. I am working on a
        > complex menu that
        > > generates from a JSON-based model that is a
        > derivation of the one
        > used
        > > in the example:
        > >
        >
        http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html
        > >
        >
        <http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html>
        > I
        > > have extended the method onMenuBeforeShow() to
        > look for the
        > > "submenualignment" parameter in the JSON object,
        > and when found
        > set the
        > > configuration parameter during the creation of the
        > new
        > YAHOO.widget.Menu
        > > object, but that does not seem to work (Please
        > see examples
        > below).
        > > Not seen in the examples below, I have also tried
        > brute force
        > hacking
        > > the creation of the Menu object by passing the
        > config property to
        > the
        > > constructor, and that also does not seem to work.
        > // does not
        > work
        > > oSubmenu = new
        > YAHOO.widget.Menu(oItemData.submenuId,
        > {submenualignment:
        > > ["tr","tl"]}); Thanks in advance for the help!
        > I have
        > included
        > > some code examples below:
        > >
        > > Example JSON: {text:"Profile Attributes",
        > submenuId: "atts",
        > > submenualignment: ["tr","tl"], submenuItems: [
        > > {text:"Profession"},
        > > {text:"Specialty"},
        > > {text:"Degree"},
        > > ]
        > > }
        > > Method enhanced:
        > > // "beforeshow" handler for each submenu of the
        > menubar
        > > function onMenuBeforeShow(p_sType, p_sArgs) {
        > > // Check if the menu has any items. If not,
        > add them
        > > if(this.getItemGroups().length == 0) {
        > var
        > aItemsData =
        > > this.itemsData,
        > > nItems = aItemsData.length,
        > > oItemData,
        > > oItemConfig,
        > > oSubmenu; for(var i=0;
        > i<nItems; i++) {
        > > oItemData = aItemsData[i];
        > > if(oItemData) {
        > > oItemConfig = {};
        > > if(oItemData.url) {
        > > oItemConfig.url =
        > oItemData.url;
        > > }
        > > if(oItemData.submenuItems) {
        > > oSubmenu = new
        > > YAHOO.widget.Menu(oItemData.submenuId);
        >
        > > oSubmenu.itemsData = oItemData.submenuItems;
        >
        > > if(oItemData.submenualignment) {
        > > YAHOO.log( "Setting
        > submenualignment: "
        > > +
        > oItemData.submenualignment, "info",
        > > "onMenuBeforeShow" ); //
        > first attempt
        > to set
        > >
        > > oSubmenu.cfg.setProperty
        > ("submenualignment",oItemData.submenualignment
        > > ); // second attempt to
        > set
        > >
        > oItemConfig.submenualignment =
        > > oItemData.submenualignment;
        > YAHOO.log(
        > > "Config submenualignment: "
        > > +
        > oItemConfig.submenualignment, "info",
        > > "onMenuBeforeShow" );
        > > }
        > >
        > oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow,
        > oSubmenu,
        > true);
        > >
        > oSubmenu.mouseOverEvent.subscribe
        > (cancelTimer);
        > >
        > oSubmenu.mouseOutEvent.subscribe
        > (onSubmenuMouseOut,
        > > oSubmenu, true);
        > oItemConfig.submenu =
        > oSubmenu;
        > > // Add the new YAHOO.widget.MenuItem instance to
        > the Menu
        > > this.addItem(new
        > > YAHOO.widget.MenuItem(oItemData.text,
        > oItemConfig));
        > > }else{ //
        > Add the new
        > > YAHOO.widget.MenuItem instance to the Menu
        > > this.addItem(new
        > > YAHOO.widget.MenuItem(oItemData.text, oItemConfig,
        > 0));
        > > this.setItemGroupTitle("Click
        > to Add
        > Criteria", 0);
        > > }
        > > }
        > > } // Render the submenu into
        > its parent MenuItem
        > > instance's element
        > > this.render(this.parent.element);
        > > }
        > > }
        > >
        >
        >
        >
        >
        >
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        === message truncated ===
      • Nick Momich
        Yes, that is exactly what I was hoping to do. I must have missed that in the list of configuration properties. Thanks so much for the tip. I will give that a
        Message 3 of 7 , Oct 3, 2006
        • 0 Attachment
          Yes, that is exactly what I was hoping to do. I must have missed
          that in the list of configuration properties. Thanks so much for the
          tip. I will give that a go ASAP.


          -- Nick


          --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...>
          wrote:
          >
          > Nick -
          >
          > You're correct - the "submenualignment" property is
          > designed to cascade down to all submenus as a
          > convience to the implementer so that you don't have to
          > set that property on every since instance. Just out
          > of curiosity, why are you opening some menus to the
          > left and some to the right in your implementation? Is
          > it to make sure that submenus remain inside the
          > boudary of the viewport? If so, there is another
          > configuration property named "constraintoviewport"
          > that if set to "true" will ensure that all submenus
          > remain positioned inside the viewport.
          >
          > -Todd
          >
          > --- Nick Momich <nmomich@...> wrote:
          >
          > >
          > > I believe I have found the source of my problem in
          > > menu.js
          > > (yui_0.11.4.zip). The _onMenuShow() method (@line
          > > 3949) attempts to
          > > always set the "submenualignment" property to that
          > > of the value
          > > found in a parent element. Seems like this makes it
          > > only possible to
          > > set the submenualignment at the top-most level of
          > > the menu. Any
          > > submenus will inherit this property. Just to test, I
          > > commmented out
          > > the block where the property it set and now I can
          > > control the
          > > alignment of submenus. Since this was just a test,
          > > and not the most
          > > elegant solution, I will consider a refactor to the
          > > method for our
          > > local use:
          > >
          > > // this.cfg.setProperty(
          > > // "submenualignment",
          > > // [ aAlignment[0], aAlignment[1] ]
          > > // );
          > >
          > >
          > > Hope this helps someone else out.
          > >
          > >
          > >
          > > --- In ydn-javascript@yahoogroups.com, "Nick Momich"
          > > <nmomich@>
          > > wrote:
          > > >
          > > > I am having difficulty controlling the positioning
          > > and alignment
          > > of the
          > > > submenus when developing a hierarchical menu.
          > > The goal is to
          > > have some
          > > > of the submenus to present to the right, and
          > > others to the left.
          > > There
          > > > is a configuration property for "submenualignment"
          > > that is
          > > supposed to
          > > > support this functionality but I am unable to have
          > > it recognized
          > > when
          > > > the actual menu is rendered. I am working on a
          > > complex menu that
          > > > generates from a JSON-based model that is a
          > > derivation of the one
          > > used
          > > > in the example:
          > > >
          > >
          > http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html
          > > >
          > >
          > <http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html>
          > > I
          > > > have extended the method onMenuBeforeShow() to
          > > look for the
          > > > "submenualignment" parameter in the JSON object,
          > > and when found
          > > set the
          > > > configuration parameter during the creation of the
          > > new
          > > YAHOO.widget.Menu
          > > > object, but that does not seem to work (Please
          > > see examples
          > > below).
          > > > Not seen in the examples below, I have also tried
          > > brute force
          > > hacking
          > > > the creation of the Menu object by passing the
          > > config property to
          > > the
          > > > constructor, and that also does not seem to work.
          > > // does not
          > > work
          > > > oSubmenu = new
          > > YAHOO.widget.Menu(oItemData.submenuId,
          > > {submenualignment:
          > > > ["tr","tl"]}); Thanks in advance for the help!
          > > I have
          > > included
          > > > some code examples below:
          > > >
          > > > Example JSON: {text:"Profile Attributes",
          > > submenuId: "atts",
          > > > submenualignment: ["tr","tl"], submenuItems: [
          > > > {text:"Profession"},
          > > > {text:"Specialty"},
          > > > {text:"Degree"},
          > > > ]
          > > > }
          > > > Method enhanced:
          > > > // "beforeshow" handler for each submenu of the
          > > menubar
          > > > function onMenuBeforeShow(p_sType, p_sArgs) {
          > > > // Check if the menu has any items. If not,
          > > add them
          > > > if(this.getItemGroups().length == 0) {
          > > var
          > > aItemsData =
          > > > this.itemsData,
          > > > nItems = aItemsData.length,
          > > > oItemData,
          > > > oItemConfig,
          > > > oSubmenu; for(var i=0;
          > > i<nItems; i++) {
          > > > oItemData = aItemsData[i];
          > > > if(oItemData) {
          > > > oItemConfig = {};
          > > > if(oItemData.url) {
          > > > oItemConfig.url =
          > > oItemData.url;
          > > > }
          > > > if(oItemData.submenuItems) {
          > > > oSubmenu = new
          > > > YAHOO.widget.Menu(oItemData.submenuId);
          > >
          > > > oSubmenu.itemsData = oItemData.submenuItems;
          > >
          > > > if(oItemData.submenualignment) {
          > > > YAHOO.log( "Setting
          > > submenualignment: "
          > > > +
          > > oItemData.submenualignment, "info",
          > > > "onMenuBeforeShow" ); //
          > > first attempt
          > > to set
          > > >
          > > > oSubmenu.cfg.setProperty
          > > ("submenualignment",oItemData.submenualignment
          > > > ); // second attempt to
          > > set
          > > >
          > > oItemConfig.submenualignment =
          > > > oItemData.submenualignment;
          > > YAHOO.log(
          > > > "Config submenualignment: "
          > > > +
          > > oItemConfig.submenualignment, "info",
          > > > "onMenuBeforeShow" );
          > > > }
          > > >
          > > oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow,
          > > oSubmenu,
          > > true);
          > > >
          > > oSubmenu.mouseOverEvent.subscribe
          > > (cancelTimer);
          > > >
          > > oSubmenu.mouseOutEvent.subscribe
          > > (onSubmenuMouseOut,
          > > > oSubmenu, true);
          > > oItemConfig.submenu =
          > > oSubmenu;
          > > > // Add the new YAHOO.widget.MenuItem instance to
          > > the Menu
          > > > this.addItem(new
          > > > YAHOO.widget.MenuItem(oItemData.text,
          > > oItemConfig));
          > > > }else{ //
          > > Add the new
          > > > YAHOO.widget.MenuItem instance to the Menu
          > > > this.addItem(new
          > > > YAHOO.widget.MenuItem(oItemData.text, oItemConfig,
          > > 0));
          > > > this.setItemGroupTitle("Click
          > > to Add
          > > Criteria", 0);
          > > > }
          > > > }
          > > > } // Render the submenu into
          > > its parent MenuItem
          > > > instance's element
          > > > this.render(this.parent.element);
          > > > }
          > > > }
          > > >
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          > === message truncated ===
          >
        • ej_gmp
          Hi, I too am trying to confine the menus to the viewport, but when there is not enough space the menu jumps to the middle of the screen. So taking the example
          Message 4 of 7 , Mar 26, 2007
          • 0 Attachment
            Hi,
            I too am trying to confine the menus to the viewport, but when there
            is not enough space the menu jumps to the middle of the screen.

            So taking the example 'topnavfromjs.html', and reducing the browser
            width to the edge of the menu bar, then the right most menu jumps to
            the middle. Hence making it unusable. The sub menus do seem to work
            though, ie when there is not enough space it appears to the left of
            the parent menu.
            If the constraintoviewport attribute is set to false, then the menu
            appears in the correct position, but obviously out of the viewport.
            The browser is IE 6 if that helps.

            Cheers

            --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...>
            wrote:
            >
            > Nick -
            >
            > You're correct - the "submenualignment" property is
            > designed to cascade down to all submenus as a
            > convience to the implementer so that you don't have to
            > set that property on every since instance. Just out
            > of curiosity, why are you opening some menus to the
            > left and some to the right in your implementation? Is
            > it to make sure that submenus remain inside the
            > boudary of the viewport? If so, there is another
            > configuration property named "constraintoviewport"
            > that if set to "true" will ensure that all submenus
            > remain positioned inside the viewport.
            >
            > -Todd
            >
          • Todd Kloots
            Thanks. This bug has already been reported on SourceForge and will be fixed in the next release. - Todd ... From: ej_gmp To:
            Message 5 of 7 , Mar 26, 2007
            • 0 Attachment
              Thanks. This bug has already been reported on SourceForge and will be fixed in the next release.

              - Todd

              ----- Original Message ----
              From: ej_gmp <Stephen.Elliott@...>
              To: ydn-javascript@yahoogroups.com
              Sent: Monday, March 26, 2007 2:44:18 AM
              Subject: [ydn-javascript] Re: Submenu alignment for menu component

              Hi,
              I too am trying to confine the menus to the viewport, but when there
              is not enough space the menu jumps to the middle of the screen.

              So taking the example 'topnavfromjs.html', and reducing the browser
              width to the edge of the menu bar, then the right most menu jumps to
              the middle. Hence making it unusable. The sub menus do seem to work
              though, ie when there is not enough space it appears to the left of
              the parent menu.
              If the constraintoviewport attribute is set to false, then the menu
              appears in the correct position, but obviously out of the viewport.
              The browser is IE 6 if that helps.

              Cheers

              --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...>
              wrote:
              >
              > Nick -
              >
              > You're correct - the "submenualignment" property is
              > designed to cascade down to all submenus as a
              > convience to the implementer so that you don't have to
              > set that property on every since instance. Just out
              > of curiosity, why are you opening some menus to the
              > left and some to the right in your implementation? Is
              > it to make sure that submenus remain inside the
              > boudary of the viewport? If so, there is another
              > configuration property named "constraintoviewport"
              > that if set to "true" will ensure that all submenus
              > remain positioned inside the viewport.
              >
              > -Todd
              >




              Yahoo! Groups Links
            • ej_gmp
              Ok. Thanks for the reply. ... will be fixed in the next release. ... there ... browser ... to ... work ... of ... menu
              Message 6 of 7 , Mar 27, 2007
              • 0 Attachment
                Ok. Thanks for the reply.

                --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...>
                wrote:
                >
                > Thanks. This bug has already been reported on SourceForge and
                will be fixed in the next release.
                >
                > - Todd
                >
                > ----- Original Message ----
                > From: ej_gmp <Stephen.Elliott@...>
                > To: ydn-javascript@yahoogroups.com
                > Sent: Monday, March 26, 2007 2:44:18 AM
                > Subject: [ydn-javascript] Re: Submenu alignment for menu component
                >
                > Hi,
                > I too am trying to confine the menus to the viewport, but when
                there
                > is not enough space the menu jumps to the middle of the screen.
                >
                > So taking the example 'topnavfromjs.html', and reducing the
                browser
                > width to the edge of the menu bar, then the right most menu jumps
                to
                > the middle. Hence making it unusable. The sub menus do seem to
                work
                > though, ie when there is not enough space it appears to the left
                of
                > the parent menu.
                > If the constraintoviewport attribute is set to false, then the
                menu
                > appears in the correct position, but obviously out of the viewport.
                > The browser is IE 6 if that helps.
                >
                > Cheers
                >
                > --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@>
                > wrote:
                > >
                > > Nick -
                > >
                > > You're correct - the "submenualignment" property is
                > > designed to cascade down to all submenus as a
                > > convience to the implementer so that you don't have to
                > > set that property on every since instance. Just out
                > > of curiosity, why are you opening some menus to the
                > > left and some to the right in your implementation? Is
                > > it to make sure that submenus remain inside the
                > > boudary of the viewport? If so, there is another
                > > configuration property named "constraintoviewport"
                > > that if set to "true" will ensure that all submenus
                > > remain positioned inside the viewport.
                > >
                > > -Todd
                > >
                >
                >
                >
                >
                > Yahoo! Groups Links
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.