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

Re: [ydn-javascript] Re: Submenu alignment for menu component

Expand Messages
  • 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 1 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 2 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 3 of 7 , Mar 26 2:44 AM
        • 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 4 of 7 , Mar 26 9:10 AM
          • 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 5 of 7 , Mar 27 1:18 AM
            • 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.