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

How do you make menus to only do custom events?

Expand Messages
  • almt_2000
    First off, I just started using YUI and am very pleased how well the toolkit is working. Thanks for making this available! I currently have a hierarchical
    Message 1 of 3 , Jan 4, 2008
    • 0 Attachment
      First off, I just started using YUI and am very pleased how well the
      toolkit is working. Thanks for making this available!

      I currently have a hierarchical menu with a custom event that changes
      the value of an input field. Something like this:

      function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
      document.getElementById('myField').value = p_oValue;
      }

      var aSubmenuData = [
      { text: "item1", fn: onMenuItemClick, obj: "item1" },
      { text: "item2", fn: onMenuItemClick, obj: "item2" }
      ];

      ....

      <input id="myField" name="myField" readonly>

      When I click on menu "item1", it changes the myField input field to
      "item1". However, YUI also moves my web page to the top. This is
      especially annoying if my web page is exceptionally long and the input
      field is at the bottom.

      Is there a way to tell YUI to not go to the url "#"? I also tried
      adding 'url: ""' to each menu entry but that didn't help.
    • Adam Moore
      ... Instead of changing the url, try using the event utility within the click event handler to prevent the navigation to the url: function
      Message 2 of 3 , Jan 4, 2008
      • 0 Attachment
        On Fri, Jan 04, 2008 at 08:44:11AM -0000, almt_2000 wrote:
        > First off, I just started using YUI and am very pleased how well the
        > toolkit is working. Thanks for making this available!
        >
        > I currently have a hierarchical menu with a custom event that changes
        > the value of an input field. Something like this:
        >
        > function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
        > document.getElementById('myField').value = p_oValue;
        > }
        >
        > var aSubmenuData = [
        > { text: "item1", fn: onMenuItemClick, obj: "item1" },
        > { text: "item2", fn: onMenuItemClick, obj: "item2" }
        > ];
        >
        > <input id="myField" name="myField" readonly>
        >
        > When I click on menu "item1", it changes the myField input field to
        > "item1". However, YUI also moves my web page to the top. This is
        > especially annoying if my web page is exceptionally long and the input
        > field is at the bottom.
        >
        > Is there a way to tell YUI to not go to the url "#"? I also tried
        > adding 'url: ""' to each menu entry but that didn't help.

        Instead of changing the url, try using the event utility within the
        click event handler to prevent the navigation to the url:

        function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
        document.getElementById('myField').value = p_oValue;
        YAHOO.util.Event.preventDefault(p_aArgs[0]);
        }

        -Adam
      • almt_2000
        ... Thanks for the pointer. Unfortunately this didn t help. But I have noticed the problem only occurs on Firefox. IE works fine as is.
        Message 3 of 3 , Jan 4, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, Adam Moore <adamoore@...> wrote:
          >
          > On Fri, Jan 04, 2008 at 08:44:11AM -0000, almt_2000 wrote:
          > > First off, I just started using YUI and am very pleased how well the
          > > toolkit is working. Thanks for making this available!
          > >
          > > I currently have a hierarchical menu with a custom event that changes
          > > the value of an input field. Something like this:
          > >
          > > function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
          > > document.getElementById('myField').value = p_oValue;
          > > }
          > >
          > > var aSubmenuData = [
          > > { text: "item1", fn: onMenuItemClick, obj: "item1" },
          > > { text: "item2", fn: onMenuItemClick, obj: "item2" }
          > > ];
          > >
          > > <input id="myField" name="myField" readonly>
          > >
          > > When I click on menu "item1", it changes the myField input field to
          > > "item1". However, YUI also moves my web page to the top. This is
          > > especially annoying if my web page is exceptionally long and the input
          > > field is at the bottom.
          > >
          > > Is there a way to tell YUI to not go to the url "#"? I also tried
          > > adding 'url: ""' to each menu entry but that didn't help.
          >
          > Instead of changing the url, try using the event utility within the
          > click event handler to prevent the navigation to the url:
          >
          > function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
          > document.getElementById('myField').value = p_oValue;
          > YAHOO.util.Event.preventDefault(p_aArgs[0]);
          > }
          >
          > -Adam
          >

          Thanks for the pointer. Unfortunately this didn't help. But I have
          noticed the problem only occurs on Firefox. IE works fine as is.
        Your message has been successfully submitted and would be delivered to recipients shortly.