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

Yahoo UI Library Menu Control appears below Drop Down List controls

Expand Messages
  • jonathanssewell
    I m using the YUI Menu control on our pages but have discovered that drop down list controls below the menu appear above the menu items whenever menu items are
    Message 1 of 6 , Jul 27, 2006
    • 0 Attachment
      I'm using the YUI Menu control on our pages but have discovered that
      drop down list controls below the menu appear above the menu items
      whenever menu items are displayed. This happens in IE6 but not IE7.

      Has anyone heard of a solution for this? (besides wrecking my page
      layout by moving the drop down lists far down the page where they are
      out of reach of menu items)

      Thanks!
    • Thomas S. Sha
      ... Please post a functional example - either code or a link - that replicates this condition. This will help in providing you with a solution or workaround.
      Message 2 of 6 , Jul 27, 2006
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "jonathanssewell"
        <jonathan_sewell@...> wrote:
        >
        > I'm using the YUI Menu control on our pages but have discovered that
        > drop down list controls below the menu appear above the menu items
        > whenever menu items are displayed. This happens in IE6 but not IE7.
        >
        > Has anyone heard of a solution for this? (besides wrecking my page
        > layout by moving the drop down lists far down the page where they are
        > out of reach of menu items)
        >
        > Thanks!

        Please post a functional example - either code or a link - that
        replicates this condition. This will help in providing you with a
        solution or workaround.

        Regards,
        Thomas
      • jonathanssewell
        Basically, I have a menu running along the top of the page. When the mouse moves over it the contents of the menu drop out. The problem is that if there is an
        Message 3 of 6 , Jul 28, 2006
        • 0 Attachment
          Basically, I have a menu running along the top of the page. When the
          mouse moves over it the contents of the menu drop out. The problem
          is that if there is an ASP.NET drop down list server control below
          the menu, the menu is drawn behind the control. Here is the code
          from an example:

          <%@ Page Language="vb" AutoEventWireup="false"
          Codebehind="WebForm2.aspx.vb" Inherits="AnimatedMenus.WebForm2"%>
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <!-- Dependencies -->
          <link rel="stylesheet" type="text/css" href="fonts.css">
          <link rel="stylesheet" type="text/css" href="menu.css">
          <script type="text/javascript" src="yahoo.js"></script>
          <script type="text/javascript" src="dom.js"></script>
          <script type="text/javascript" src="event.js"></script>
          <script type="text/javascript" src="container_core.js"></script>
          <!-- Source File -->
          <script type="text/javascript" src="menu.js"></script>
          <script type="text/javascript" src="menuSetup.js"></script>
          </HEAD>

          <body>
          <form id="Form1" method="post" runat="server">
          <div id="yproducts" class="yuimenubar">
          <div class="bd">
          <ul class="first">
          <li id="BMSData" class="yuimenubaritem first">
          <a href="#" class="topmenubarlink">BMS Data</a></li>
          <li id="Energy" class="yuimenubaritem">
          <a href="#" class="topmenubarlink">Energy</a></li>
          <li id="Performance" class="yuimenubaritem">
          <a href="#"
          class="topmenubarlink">Performance</a></li>
          <li id="Administration" class="yuimenubaritem">
          <a href="#"
          class="topmenubarlink">Administration</a></li>
          </ul>
          </div>
          </div>
          <br />
          </asp:DropDownList> <asp:DropDownList id="Dropdownlist2"
          runat="server" Width="208px"></asp:DropDownList>
          </form>
          </body>
          </HTML>






          Contents of menuSetup.js is below (I think all of these external
          files come from the YUI Library (http://sourceforge.net/projects/yui)




          YAHOO.example.OverlayManager = new YAHOO.widget.OverlayManager();


          // Data used to built product category submenus

          var g_aYProducts = {

          BMSData: [

          { text: "View Data", url: "../BMSData/ViewData.aspx" }
          ],

          Energy: [

          { text: "Cost Overview", url: "../BMSData/ViewData.aspx" },
          { text: "Energy Consumption",
          url: "../BMSData/ViewData.aspx" },
          { text: "Degree Day Analysis",
          url: "../BMSData/ViewData.aspx" }
          ],

          Performance: [

          { text: "Consumption Metrics",
          url: "../BMSData/ViewData.aspx" }
          ],

          Administration: [

          { text: "Setup Tariff", url: "../BMSData/ViewData.aspx" },
          { text: "Configure Seachange Meters",
          url: "../BMSData/ViewData.aspx" },
          { text: "Group Areas to Meters",
          url: "../BMSData/ViewData.aspx" },
          { text: "Change Password", url: "../BMSData/ViewData.aspx" },
          { text: "Logout", url: "../BMSData/ViewData.aspx" }
          ]

          };

          var g_nTimeoutId;


          // "mouseover" event handler for the root menu

          function onMenuBarMouseOver(p_sType, p_aArguments, p_oMenu) {

          if(g_nTimeoutId) {

          window.clearTimeout(g_nTimeoutId);

          }

          }

          // "mouseover" event handler for each submenu

          function onSubmenuMouseOver(p_sType, p_aArguments, p_oMenu) {

          if(g_nTimeoutId) {

          window.clearTimeout(g_nTimeoutId);

          }

          }


          // "mouseout" event handler for each submenu

          function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {

          function hideMenu() {

          p_oMenu.hide();

          }


          if(g_nTimeoutId) {

          window.clearTimeout(g_nTimeoutId);

          }

          g_nTimeoutId = window.setTimeout(hideMenu, 750);

          }


          // "mousedown" handler for the document

          function onDocumentMouseDown(p_oEvent) {

          YAHOO.example.OverlayManager.hideAll();

          }


          // "mouseover" handler for each item in the menu bar

          function onMenuBarItemMouseOver(p_sType, p_aArguments, p_oMenuItem) {

          var oActiveItem = this.parent.activeItem;


          // Hide any other submenus that might be visible

          if(oActiveItem && oActiveItem != this) {

          this.parent.clearActiveItem();

          }


          // Select and focus the current MenuItem instance

          this.cfg.setProperty("selected", true);
          this.focus();


          // Show the submenu for this instance

          var oSubmenu = this.cfg.getProperty("submenu");

          if(oSubmenu) {

          oSubmenu.show();

          }

          };


          // "mouseout" handler for each item in the menu bar

          function onMenuBarItemMouseOut(p_sType, p_aArguments, p_oMenuItem) {

          this.cfg.setProperty("selected", false);


          var oSubmenu = this.cfg.getProperty("submenu");

          if(oSubmenu) {

          var oEvent = p_aArguments[0],
          oRelatedTarget = YAHOO.util.Event.getRelatedTarget
          (oEvent);

          if(
          !(
          oRelatedTarget == oSubmenu.element ||
          this._oDom.isAncestor(oSubmenu.element,
          oRelatedTarget)
          )
          ) {

          oSubmenu.hide();

          }

          }

          };




          // "load" handler for the window

          function onWindowLoad() {

          var oMenuBar = new YAHOO.widget.MenuBar("yproducts");

          var i = oMenuBar.getItemGroups()[0].length - 1,
          oMenuItem,
          oSubmenu,
          aSubmenuItems,
          nSubmenuItems;


          do {

          oMenuItem = oMenuBar.getItem(i);

          aSubmenuItems = g_aYProducts[oMenuItem.element.id];

          if(aSubmenuItems) {

          // Create a submenu

          oSubmenu = new YAHOO.widget.Menu(
          (oMenuItem.element.id + "menu")
          );

          // Add a "mouseover" event handler to the submenu

          oSubmenu.mouseOverEvent.subscribe(
          onSubmenuMouseOver,
          oSubmenu,
          true
          );


          // Add a "mouseout" event handler to the submenu

          oSubmenu.mouseOutEvent.subscribe(
          onSubmenuMouseOut,
          oSubmenu,
          true
          );


          // Add items to the submenu

          nSubmenuItems = aSubmenuItems.length;

          for(var n=0; n<nSubmenuItems; n++) {

          oSubmenu.addItem(
          new YAHOO.widget.MenuItem(
          aSubmenuItems[n].text,
          { url: aSubmenuItems[n].url}
          )
          );

          }


          // Add the submenu to its parent item in the main menu

          oMenuItem.cfg.setProperty("submenu", oSubmenu);

          YAHOO.example.OverlayManager.register(oSubmenu);

          }

          }
          while(i--);


          // Render the menubar and corresponding submenus

          oMenuBar.render();


          /*
          Add a "mouseover" and "mouseout" event handler each item
          in the menu bar
          */

          var aMenuBarItems = oMenuBar.getItemGroups()[0],
          i = aMenuBarItems.length - 1;

          do {

          aMenuBarItems[i].mouseOverEvent.subscribe(
          onMenuBarItemMouseOver,
          this
          );

          aMenuBarItems[i].mouseOutEvent.subscribe(
          onMenuBarItemMouseOut,
          this
          );

          }
          while(i--);


          // Add a "mouseover" handler to the menubar

          oMenuBar.mouseOverEvent.subscribe(
          onMenuBarMouseOver,
          oMenuBar,
          true
          );


          // Add a "mousedown" handler to the document

          YAHOO.util.Event.addListener(
          document,
          "mousedown",
          onDocumentMouseDown
          );

          }


          // Add a "load" handler for the window

          YAHOO.util.Event.addListener(window, "load", onWindowLoad);
        • Todd Kloots
          What version of the YUI Library are you using? ... === message truncated ===
          Message 4 of 6 , Jul 28, 2006
          • 0 Attachment
            What version of the YUI Library are you using?

            --- jonathanssewell <jonathan_sewell@...>
            wrote:

            > Basically, I have a menu running along the top of
            > the page. When the
            > mouse moves over it the contents of the menu drop
            > out. The problem
            > is that if there is an ASP.NET drop down list server
            > control below
            > the menu, the menu is drawn behind the control. Here
            > is the code
            > from an example:
            >
            > <%@ Page Language="vb" AutoEventWireup="false"
            > Codebehind="WebForm2.aspx.vb"
            > Inherits="AnimatedMenus.WebForm2"%>
            > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
            > Transitional//EN">
            > <HTML>
            > <HEAD>
            > <!-- Dependencies -->
            > <link rel="stylesheet" type="text/css"
            > href="fonts.css">
            > <link rel="stylesheet" type="text/css"
            > href="menu.css">
            > <script type="text/javascript"
            > src="yahoo.js"></script>
            > <script type="text/javascript"
            > src="dom.js"></script>
            > <script type="text/javascript"
            > src="event.js"></script>
            > <script type="text/javascript"
            > src="container_core.js"></script>
            > <!-- Source File -->
            > <script type="text/javascript"
            > src="menu.js"></script>
            > <script type="text/javascript"
            > src="menuSetup.js"></script>
            > </HEAD>
            >
            > <body>
            > <form id="Form1" method="post" runat="server">
            > <div id="yproducts" class="yuimenubar">
            > <div class="bd">
            > <ul class="first">
            > <li id="BMSData" class="yuimenubaritem first">
            > <a href="#" class="topmenubarlink">BMS
            > Data</a></li>
            > <li id="Energy" class="yuimenubaritem">
            > <a href="#" class="topmenubarlink">Energy</a></li>
            > <li id="Performance" class="yuimenubaritem">
            > <a href="#"
            > class="topmenubarlink">Performance</a></li>
            > <li id="Administration" class="yuimenubaritem">
            > <a href="#"
            > class="topmenubarlink">Administration</a></li>
            > </ul>
            > </div>
            > </div>
            > <br />
            > </asp:DropDownList> <asp:DropDownList
            > id="Dropdownlist2"
            > runat="server" Width="208px"></asp:DropDownList>
            > </form>
            > </body>
            > </HTML>
            >
            >
            >
            >
            >
            >
            > Contents of menuSetup.js is below (I think all of
            > these external
            > files come from the YUI Library
            > (http://sourceforge.net/projects/yui)
            >
            >
            >
            >
            > YAHOO.example.OverlayManager = new
            > YAHOO.widget.OverlayManager();
            >
            >
            > // Data used to built product category submenus
            >
            > var g_aYProducts = {
            >
            > BMSData: [
            >
            > { text: "View Data", url:
            > "../BMSData/ViewData.aspx" }
            > ],
            >
            > Energy: [
            >
            > { text: "Cost Overview", url:
            > "../BMSData/ViewData.aspx" },
            > { text: "Energy Consumption",
            > url: "../BMSData/ViewData.aspx" },
            > { text: "Degree Day Analysis",
            > url: "../BMSData/ViewData.aspx" }
            > ],
            >
            > Performance: [
            >
            > { text: "Consumption Metrics",
            > url: "../BMSData/ViewData.aspx" }
            > ],
            >
            > Administration: [
            >
            > { text: "Setup Tariff", url:
            > "../BMSData/ViewData.aspx" },
            > { text: "Configure Seachange Meters",
            > url: "../BMSData/ViewData.aspx" },
            > { text: "Group Areas to Meters",
            > url: "../BMSData/ViewData.aspx" },
            > { text: "Change Password", url:
            > "../BMSData/ViewData.aspx" },
            > { text: "Logout", url:
            > "../BMSData/ViewData.aspx" }
            > ]
            >
            > };
            >
            > var g_nTimeoutId;
            >
            >
            > // "mouseover" event handler for the root menu
            >
            > function onMenuBarMouseOver(p_sType, p_aArguments,
            > p_oMenu) {
            >
            > if(g_nTimeoutId) {
            >
            > window.clearTimeout(g_nTimeoutId);
            >
            > }
            >
            > }
            >
            > // "mouseover" event handler for each submenu
            >
            > function onSubmenuMouseOver(p_sType, p_aArguments,
            > p_oMenu) {
            >
            > if(g_nTimeoutId) {
            >
            > window.clearTimeout(g_nTimeoutId);
            >
            > }
            >
            > }
            >
            >
            > // "mouseout" event handler for each submenu
            >
            > function onSubmenuMouseOut(p_sType, p_aArguments,
            > p_oMenu) {
            >
            > function hideMenu() {
            >
            > p_oMenu.hide();
            >
            > }
            >
            >
            > if(g_nTimeoutId) {
            >
            > window.clearTimeout(g_nTimeoutId);
            >
            > }
            >
            > g_nTimeoutId = window.setTimeout(hideMenu, 750);
            >
            > }
            >
            >
            > // "mousedown" handler for the document
            >
            > function onDocumentMouseDown(p_oEvent) {
            >
            > YAHOO.example.OverlayManager.hideAll();
            >
            > }
            >
            >
            > // "mouseover" handler for each item in the menu bar
            >
            > function onMenuBarItemMouseOver(p_sType,
            > p_aArguments, p_oMenuItem) {
            >
            > var oActiveItem = this.parent.activeItem;
            >
            >
            > // Hide any other submenus that might be visible
            >
            > if(oActiveItem && oActiveItem != this) {
            >
            > this.parent.clearActiveItem();
            >
            > }
            >
            >
            === message truncated ===
          • Todd Kloots
            Jonathan - I looked into this. It is a bug specific to instances of YAHOO.widget.Menu that are submenus of items that are members of YAHOO.widget.MenuBar. I
            Message 5 of 6 , Jul 28, 2006
            • 0 Attachment
              Jonathan -

              I looked into this. It is a bug specific to instances
              of YAHOO.widget.Menu that are submenus of items that
              are members of YAHOO.widget.MenuBar. I will be sure
              to fix this bug in the next release. In the meantime,
              you can fix this yourself by adding a "beforeshow"
              event handler to each of your submenus that toggles
              the iframe shim on. Here is an example:

              http://yuiblog.com/sandbox/yui/v011/examples/menu/example06.php

              Hope that helps.

              - Todd


              --- jonathanssewell <jonathan_sewell@...>
              wrote:

              > Basically, I have a menu running along the top of
              > the page. When the
              > mouse moves over it the contents of the menu drop
              > out. The problem
              > is that if there is an ASP.NET drop down list server
              > control below
              > the menu, the menu is drawn behind the control. Here
              > is the code
              > from an example:
              >
              > <%@ Page Language="vb" AutoEventWireup="false"
              > Codebehind="WebForm2.aspx.vb"
              > Inherits="AnimatedMenus.WebForm2"%>
              > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
              > Transitional//EN">
              > <HTML>
              > <HEAD>
              > <!-- Dependencies -->
              > <link rel="stylesheet" type="text/css"
              > href="fonts.css">
              > <link rel="stylesheet" type="text/css"
              > href="menu.css">
              > <script type="text/javascript"
              > src="yahoo.js"></script>
              > <script type="text/javascript"
              > src="dom.js"></script>
              > <script type="text/javascript"
              > src="event.js"></script>
              > <script type="text/javascript"
              > src="container_core.js"></script>
              > <!-- Source File -->
              > <script type="text/javascript"
              > src="menu.js"></script>
              > <script type="text/javascript"
              > src="menuSetup.js"></script>
              > </HEAD>
              >
              > <body>
              > <form id="Form1" method="post" runat="server">
              > <div id="yproducts" class="yuimenubar">
              > <div class="bd">
              > <ul class="first">
              > <li id="BMSData" class="yuimenubaritem first">
              > <a href="#" class="topmenubarlink">BMS
              > Data</a></li>
              > <li id="Energy" class="yuimenubaritem">
              > <a href="#" class="topmenubarlink">Energy</a></li>
              > <li id="Performance" class="yuimenubaritem">
              > <a href="#"
              > class="topmenubarlink">Performance</a></li>
              > <li id="Administration" class="yuimenubaritem">
              > <a href="#"
              > class="topmenubarlink">Administration</a></li>
              > </ul>
              > </div>
              > </div>
              > <br />
              > </asp:DropDownList> <asp:DropDownList
              > id="Dropdownlist2"
              > runat="server" Width="208px"></asp:DropDownList>
              > </form>
              > </body>
              > </HTML>
              >
              >
              >
              >
              >
              >
              > Contents of menuSetup.js is below (I think all of
              > these external
              > files come from the YUI Library
              > (http://sourceforge.net/projects/yui)
              >
              >
              >
              >
              > YAHOO.example.OverlayManager = new
              > YAHOO.widget.OverlayManager();
              >
              >
              > // Data used to built product category submenus
              >
              > var g_aYProducts = {
              >
              > BMSData: [
              >
              > { text: "View Data", url:
              > "../BMSData/ViewData.aspx" }
              > ],
              >
              > Energy: [
              >
              > { text: "Cost Overview", url:
              > "../BMSData/ViewData.aspx" },
              > { text: "Energy Consumption",
              > url: "../BMSData/ViewData.aspx" },
              > { text: "Degree Day Analysis",
              > url: "../BMSData/ViewData.aspx" }
              > ],
              >
              > Performance: [
              >
              > { text: "Consumption Metrics",
              > url: "../BMSData/ViewData.aspx" }
              > ],
              >
              > Administration: [
              >
              > { text: "Setup Tariff", url:
              > "../BMSData/ViewData.aspx" },
              > { text: "Configure Seachange Meters",
              > url: "../BMSData/ViewData.aspx" },
              > { text: "Group Areas to Meters",
              > url: "../BMSData/ViewData.aspx" },
              > { text: "Change Password", url:
              > "../BMSData/ViewData.aspx" },
              > { text: "Logout", url:
              > "../BMSData/ViewData.aspx" }
              > ]
              >
              > };
              >
              > var g_nTimeoutId;
              >
              >
              > // "mouseover" event handler for the root menu
              >
              > function onMenuBarMouseOver(p_sType, p_aArguments,
              > p_oMenu) {
              >
              > if(g_nTimeoutId) {
              >
              > window.clearTimeout(g_nTimeoutId);
              >
              > }
              >
              > }
              >
              > // "mouseover" event handler for each submenu
              >
              > function onSubmenuMouseOver(p_sType, p_aArguments,
              > p_oMenu) {
              >
              > if(g_nTimeoutId) {
              >
              > window.clearTimeout(g_nTimeoutId);
              >
              > }
              >
              > }
              >
              >
              > // "mouseout" event handler for each submenu
              >
              > function onSubmenuMouseOut(p_sType, p_aArguments,
              > p_oMenu) {
              >
              > function hideMenu() {
              >
              > p_oMenu.hide();
              >
              > }
              >
              >
              > if(g_nTimeoutId) {
              >
              > window.clearTimeout(g_nTimeoutId);
              >
              > }
              >
              > g_nTimeoutId = window.setTimeout(hideMenu, 750);
              >
              > }
              >
              >
              > // "mousedown" handler for the document
              >
              > function onDocumentMouseDown(p_oEvent) {
              >
              > YAHOO.example.OverlayManager.hideAll();
              >
              > }
              >
              >
              > // "mouseover" handler for each item in the menu bar
              >
              > function onMenuBarItemMouseOver(p_sType,
              > p_aArguments, p_oMenuItem) {
              >
              > var oActiveItem = this.parent.activeItem;
              >
              >
              > // Hide any other submenus that might be visible
              >
              > if(oActiveItem && oActiveItem != this) {
              >
              > this.parent.clearActiveItem();
              >
              > }
              >
              >
              === message truncated ===
            • jonathanssewell
              Hi Todd, Yes, it works fine now. I tried just adding the beforeShow event handler but that didn t work. I didn t have as much javascript as you did in your
              Message 6 of 6 , Jul 31, 2006
              • 0 Attachment
                Hi Todd,

                Yes, it works fine now. I tried just adding the beforeShow event
                handler but that didn't work. I didn't have as much javascript as you
                did in your example so I must have been missing something else too.
                Anyway, I copied the relevant code from your example and everything
                works.

                Thanks for you help!

                Jonathan.
              Your message has been successfully submitted and would be delivered to recipients shortly.