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

Possible Bug when Combining Menu and Panel in IE

Expand Messages
  • dvidluca
    Hi, I have a page with a vertical navigation menu, a context menu and a couple of panels all built from the yui and styled with the sam skin. Basically, there
    Message 1 of 4 , Oct 1, 2007
    • 0 Attachment
      Hi,

      I have a page with a vertical navigation menu, a context menu and a
      couple of panels all built from the yui and styled with the sam skin.

      Basically, there is a thumbnail image on the page which when right-
      clicked displays the context menu. The option on the context menu is
      to view a larger version of the image, which is contained in a panel.

      The page all works fine, the panel is displayed when the option for
      it on the context menu is selected, but in Internet Explorer 7 the
      items on the navigation menu are not displayed until the panel is
      opened or when part of the item is rolled over.

      In FireFox, the navigation menu renders fine so the code should be ok

      Here is my code:

      <script type="text/javascript" src="yahoo-dom-event.js"></script>
      <script type="text/javascript" src="dragdrop-min.js"></script>
      <script type="text/javascript" src="container-min.js"></script>
      <script type="text/javascript" src="menu-min.js"></script>
      <script type="text/javascript">
      function init() {
      var menu = new YAHOO.widget.Menu("navmenu", {
      position:"static" });
      menu.render();

      var images = document.getElementsByTagName("img");
      var context = new YAHOO.widget.ContextMenu("imgcontext", {
      trigger: images });
      context.addItem("View full-size");
      context.render(document.body);

      var panel = new YAHOO.widget.Panel("panel", {
      close:true,
      visible:false,
      width:"600px"
      });
      panel.render();

      function viewFull()
      panel.show();
      }
      YAHOO.util.Event.addListener("yui-gen11", "click", viewFull);
      }
      YAHOO.util.Event.onDOMReady(init);
      </script>

      Is it a bug or am I doing it wrong?
    • Todd Kloots
      dvidluca - Glancing at the code that you have provided, nothing seems wrong. However, you really haven t provided much. You usage of the YUI APIs *seems*
      Message 2 of 4 , Oct 2, 2007
      • 0 Attachment
        "dvidluca" -

        Glancing at the code that you have provided, nothing seems wrong.
        However, you really haven't provided much. You usage of the YUI APIs
        *seems* correct, but there may be problems when viewed in the context of
        your page or application. If you could provide us with a URL to a
        simple example of your usage of YUI it would be much, much easier for us
        to help you figure out if the bug is in our code or yours.

        - Todd

        dvidluca wrote:
        >
        > Hi,
        >
        > I have a page with a vertical navigation menu, a context menu and a
        > couple of panels all built from the yui and styled with the sam skin.
        >
        > Basically, there is a thumbnail image on the page which when right-
        > clicked displays the context menu. The option on the context menu is
        > to view a larger version of the image, which is contained in a panel.
        >
        > The page all works fine, the panel is displayed when the option for
        > it on the context menu is selected, but in Internet Explorer 7 the
        > items on the navigation menu are not displayed until the panel is
        > opened or when part of the item is rolled over.
        >
        > In FireFox, the navigation menu renders fine so the code should be ok
        >
        > Here is my code:
        >
        > <script type="text/javascript" src="yahoo-dom-event.js"></script>
        > <script type="text/javascript" src="dragdrop-min.js"></script>
        > <script type="text/javascript" src="container-min.js"></script>
        > <script type="text/javascript" src="menu-min.js"></script>
        > <script type="text/javascript">
        > function init() {
        > var menu = new YAHOO.widget.Menu("navmenu", {
        > position:"static" });
        > menu.render();
        >
        > var images = document.getElementsByTagName("img");
        > var context = new YAHOO.widget.ContextMenu("imgcontext", {
        > trigger: images });
        > context.addItem("View full-size");
        > context.render(document.body);
        >
        > var panel = new YAHOO.widget.Panel("panel", {
        > close:true,
        > visible:false,
        > width:"600px"
        > });
        > panel.render();
        >
        > function viewFull()
        > panel.show();
        > }
        > YAHOO.util.Event.addListener("yui-gen11", "click", viewFull);
        > }
        > YAHOO.util.Event.onDOMReady(init);
        > </script>
        >
        > Is it a bug or am I doing it wrong?
        >
        >
      • dvidluca
        Hi Todd, Thanks for the swift response, I don t have a live site at the moment, but here s the entire page the problem occurs on:
        Message 3 of 4 , Oct 2, 2007
        • 0 Attachment
          Hi Todd,

          Thanks for the swift response, I don't have a live site at the
          moment, but here's the entire page the problem occurs on:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
          4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title>Panel Test</title>
          <script type="text/javascript" src="yahoo-dom-event.js"></script>
          <script type="text/javascript" src="dragdrop-min.js"></script>
          <script type="text/javascript" src="container-min.js"></script>
          <script type="text/javascript" src="menu-min.js"></script>
          <script type="text/javascript">
          function init() {
          var menu = new YAHOO.widget.Menu("navmenu", {
          position:"static"
          });
          menu.render();
          alert("Menu");
          var images = document.getElementsByTagName("img");
          var context = new YAHOO.widget.ContextMenu("imgcontext", {
          trigger:images
          });
          context.addItem("View full-size");
          context.render(document.body);
          alert("context");
          var panel = new YAHOO.widget.Panel("panel", {
          close:true,
          visible:false,
          width:"600px",
          modal:true
          });
          panel.render();
          alert("panel");
          function viewFull() {
          panel.show();
          }
          YAHOO.util.Event.addListener("yui-gen11", "click", viewFull);
          }
          YAHOO.util.Event.onDOMReady(init);
          </script>
          <link rel="stylesheet" type="text/css" href="build/reset-fonts-
          grids/reset-fonts-grids.css">
          <link rel="stylesheet" type="text/css"
          href="build/assets/skins/sam/container.css">
          <link rel="stylesheet" type="text/css"
          href="build/assets/skins/sam/menu.css">
          <style type="text/css">
          .images {
          margin:10px;
          }
          img {
          margin-right:10px;
          border:1px solid #000;
          }
          </style>
          </head>
          <body class="yui-skin-sam">
          <div id="doc3" class="yui-t1">
          <div id="hd">
          </div>
          <div id="bd">
          <div class="yui-b">
          <div id="navmenu" class="yuimenu">
          <div class="bd">
          <ul class="first-of-type">
          <li class="yuimenuitem first-of-type"><a
          class="yuimenuitemlabel" href="aboutus.html">About Our
          Company</a></li>
          <li class="yuimenuitem"><a class="yuimenuitemlabel"
          href="products.html">Products</a>
          <div id="products" class="yuimenu">
          <div class="bd">
          <ul>
          <li class="yuimenuitem"><a
          class="yuimenuitemlabel" href="components.html">Components</a></li>
          <li class="yuimenuitem"><a
          class="yuimenuitemlabel" href="barebones.html">Barebone Kits</a></li>
          <li class="yuimenuitem"><a
          class="yuimenuitemlabel" href="cooling.html">Cooling Products</a></li>
          </ul>
          </div>
          </div>
          </li>
          <li class="yuimenuitem"><a class="yuimenuitemlabel"
          href="reviews.html">Reviews</a></li>
          <li class="yuimenuitem"><a class="yuimenuitemlabel"
          href="contact.html">Contact Us</a></li>
          <li class="yuimenuitem"><a class="yuimenuitemlabel"
          href="resources.html">Other Resources</a>
          <div id="links" class="yuimenu">
          <div class="bd">
          <ul>
          <li class="yuimenuitem"><a
          class="yuimenuitemlabel" href="http://www.devhardware.com">Dev
          Hardware</a></li>
          <li class="yuimenuitem"><a
          class="yuimenuitemlabel" href="www.hexus.net">Hexus</a></li>
          <li class="yuimenuitem"><a
          class="yuimenuitemlabel" href="http://www.yahoo.com">Yahoo</a></li>
          </ul>
          </div>
          </div>
          </li>
          </ul>
          </div>
          </div>
          </div>
          <div id="yui-main">
          <div class="yui-b">
          <p class="content-head">New Products</p>
          <div class="images">
          <img id="img1" src="images/image1_thumb.jpg"
          title="Right-click for options"><img id="img2"
          src="images/image2_thumb.jpg" title="Right-click for options">
          </div>
          <div id="panel">
          <div class="hd">Image 1</div>
          <div class="bd"><img src="images/image1_full.jpg"></div>
          <div class="ft"></div>
          </div>
          </div>
          </div>
          </div>
          <div id="ft"></div>
          </div>
          </body>
          </html>

          You'll see in IE7 that only the bottom navmenu item is displayed
          until the panel is opened via the context menu. The panel has to be
          modal for the rest of the navmenu items to appear after opening the
          panel.
          In IE 6 the problem is slightly different; all of the items in the
          navmenu are displayed as soon as the page opens, but the link element
          in each menu item is truncated to the width of the inner text, so
          opening the submenus works when you roll over the text, but as soon
          as you move off the text to move into the submenu, the submenu
          disappears. I've tried some CSS to correct this but it hasn't
          helped....
          In FireFox nothing bad happens and every works as it should.

          Really sorry I can't provide a link to a working page, but I hope the
          above code helps
        • dvidluca
          sorry it took a few days but here is a link to a demo page: http://www.geocities.com/dvidluca/ The weird thing is that as soon as I put the page up on
          Message 4 of 4 , Oct 6, 2007
          • 0 Attachment
            sorry it took a few days but here is a link to a demo page:

            http://www.geocities.com/dvidluca/

            The weird thing is that as soon as I put the page up on geocities, the
            problem sort of went away. When I run the exact same web page from my
            desktop, I get the problem, but as soon as I upload the exact same page
            to the web, the problem doesn't occur.

            The problem where the nav menu links dont stretch accross the whole
            width of the menu is still evident though.

            Why would code run online but not offline?
          Your message has been successfully submitted and would be delivered to recipients shortly.