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

LayoutManager and Menu

Expand Messages
  • Francis Amanfo
    Hi, I have a LayoutManager configuations whose top I want to display a menu created from a javascript function. The problem is that the menu doesn t display
    Message 1 of 6 , Mar 29, 2008
    • 0 Attachment
      Hi,

      I have a LayoutManager configuations whose top I want to display a menu created from a javascript function.
      The problem is that the menu doesn't display and I don't get any errors as well.

      Looking at the code, I want to display the content of the function productsMenu() as body of "Top" in the layout configuration.
      Can someone please tell me what I'm doing wrong?

      Thanks in advance.

      Here is the code:


      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <title>Full Page Layout - Example</title>
      <style type="text/css">
      /*margin and padding on body element
        can introduce errors in determining
        element position and are not recommended;
        we turn them off as a foundation for YUI
        CSS treatments. */
       
        div.yui-b p {
                 
                      margin: 0 0 .5em 0;
                      color: #999;
                 
                  }
                 
                  div.yui-b p strong {
                 
                      font-weight: bold;
                      color: #000;
                 
                  }
                 
                  div.yui-b p em {

                      color: #000;
                 
                  }           
                 
                  h1 {

                      font-weight: bold;
                      margin: 0 0 1em 0;
                      padding: .25em .5em;
                      background-color: #ccc;

                  }

                  #productsandservices {

                      margin: 0 0 10px 0;
                 
                  }
       
       
      body {
          margin:0;
          padding:0;
      }
      #toggle {
          text-align: center;
        
      }
      #toggle a {
          padding: 0 5px;
          border-left: 1px solid black;
      }
      #tRight {
          border-left: none !important;
      }
      </style>
      <link rel="stylesheet" type="text/css" href="yui/reset-fonts-grids/reset-fonts-grids.css" />
      <link rel="stylesheet" type="text/css" href="yui/resize/assets/skins/sam/resize.css" />
      <link rel="stylesheet" type="text/css" href="yui/layout/assets/skins/sam/layout.css" />
      <link rel="stylesheet" type="text/css" href="yui/button/assets/skins/sam/button.css" />
      <link rel="stylesheet" type="text/css" href="yui/menu/assets/skins/sam/menu.css">
      <script type="text/javascript" src="yui/yahoo/yahoo-min.js"></script>
      <script type="text/javascript" src="yui/event/event-min.js"></script>
      <script type="text/javascript" src="yui/dom/dom-min.js"></script>

      <script type="text/javascript" src="yui/element/element-beta-min.js"></script>
      <script type="text/javascript" src="yui/dragdrop/dragdrop-min.js"></script>
      <script type="text/javascript" src="yui/resize/resize-beta-min.js"></script>
      <script type="text/javascript" src="yui/animation/animation-min.js"></script>
      <script type="text/javascript" src="yui/layout/layout-beta-min.js"></script>

      <script type="text/javascript" src="yui/animation/animation.js"></script>
      <script type="text/javascript" src="yui/container/container_core.js"></script>
      <script type="text/javascript" src="yui/menu/menu.js"></script>

      </head>

      <body class=" yui-skin-sam">

         <div id="productsandservices">
       
        
         </div>



      <div id="bottom1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p></div>
      <div id="right1">
          <b>Right 1</b>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      </div>
      <div id="left1">
          <p>Lorem sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

      </div>
      <div id="center1">
          <p id="toggle"><a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a><a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a></p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
      </div>


      <script>

      (function() {
          var Dom = YAHOO.util.Dom,
              Event = YAHOO.util.Event;

          Event.onDOMReady(function() {
              var layout = new YAHOO.widget.Layout({
                  units: [
                      { position: 'top', height: 80, body: productsMenu()},
                      { position: 'right',width: 300,  body: 'right1' },
                      { position: 'bottom', height: 50, body: 'bottom1' },
                      { position: 'left', width: 300, body: 'left1',  },
                      { position: 'center', body: 'center1' }
                  ]
              });
            
              layout.render();
             
             
            
          });


      })();
      </script>


      <script type="text/javascript">

                  /*
                       Initialize and render the MenuBar when its elements are ready
                       to be scripted.
                  */

      function productsMenu(){

                      /*
                           Instantiate a MenuBar:  The first argument passed to the
                           constructor is the id of the element in the page
                           representing the MenuBar; the second is an object literal
                           of configuration properties.
                      */

                      var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
                                                                  autosubmenudisplay: true,
                                                                  hidedelay: 750,
                                                                  lazyload: false });
                                                                 
                    

                      /*
                           Define an array of object literals, each containing
                           the data necessary to create a submenu.
                      */

                      var aSubmenuData = [
                     
                          {
                              id: "communication",
                              itemdata: [
                                  { text: "360", url: "http://360.yahoo.com" },
                                  { text: "Alerts", url: "http://alerts.yahoo.com" },
                                  { text: "Avatars", url: "http://avatars.yahoo.com" },
                                  { text: "Groups", url: "http://groups.yahoo.com " },
                                  { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                                  {
                                      text: "PIM",
                                      submenu: {
                                                  id: "pim",
                                                  itemdata: [
                                                      { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                                                      { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                                                      { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                                                      { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                                                  ]
                                              }
                                 
                                  },
                                  { text: "Member Directory", url: "http://members.yahoo.com" },
                                  { text: "Messenger", url: "http://messenger.yahoo.com" },
                                  { text: "Mobile", url: "http://mobile.yahoo.com" },
                                  { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
                              ]
                          },

                          {
                              id: "shopping",
                              itemdata: [
                                  { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                                  { text: "Autos", url: "http://autos.yahoo.com" },
                                  { text: "Classifieds", url: "http://classifieds.yahoo.com" },
                                  { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                                  { text: "Real Estate", url: "http://realestate.yahoo.com" },
                                  { text: "Travel", url: "http://travel.yahoo.com" },
                                  { text: "Wallet", url: "http://wallet.yahoo.com" },
                                  { text: "Yellow Pages", url: "http://yp.yahoo.com" }                   
                              ]   
                          },
                         
                          {
                              id: "entertainment",
                              itemdata: [
                                  { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                                  { text: "Games", url: "http://games.yahoo.com" },
                                  { text: "Kids", url: "http://www.yahooligans.com" },
                                  { text: "Music", url: "http://music.yahoo.com" },
                                  { text: "Movies", url: "http://movies.yahoo.com" },
                                  { text: "Radio", url: "http://music.yahoo.com/launchcast" },
                                  { text: "Travel", url: "http://travel.yahoo.com" },
                                  { text: "TV", url: "http://tv.yahoo.com" }             
                              ]
                          },
                         
                          {
                              id: "information",
                              itemdata: [
                                  { text: "Downloads", url: "http://downloads.yahoo.com" },
                                  { text: "Finance", url: "http://finance.yahoo.com" },
                                  { text: "Health", url: "http://health.yahoo.com" },
                                  { text: "Local", url: "http://local.yahoo.com" },
                                  { text: "Maps & Directions", url: "http://maps.yahoo.com" },
                                  { text: "My Yahoo!", url: "http://my.yahoo.com" },
                                  { text: "News", url: "http://news.yahoo.com" },
                                  { text: "Search", url: "http://search.yahoo.com" },
                                  { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                                  { text: "Weather", url: "http://weather.yahoo.com" }
                              ]
                          }                   
                      ];


                      var ua = YAHOO.env.ua,
                          oAnim;  // Animation instance


                      /*
                           "beforeshow" event handler for each submenu of the MenuBar
                           instance, used to setup certain style properties before
                           the menu is animated.
                      */

                      function onSubmenuBeforeShow(p_sType, p_sArgs) {

                          var oBody,
                              oElement,
                              oShadow,
                              oUL;
                     

                          if (this.parent) {

                              oElement = this.element;

                              /*
                                   Get a reference to the Menu's shadow element and
                                   set its "height" property to "0px" to syncronize
                                   it with the height of the Menu instance.
                              */

                              oShadow = oElement.lastChild;
                              oShadow.style.height = "0px";

                             
                              /*
                                  Stop the Animation instance if it is currently
                                  animating a Menu.
                              */
                         
                              if (oAnim && oAnim.isAnimated()) {
                             
                                  oAnim.stop();
                                  oAnim = null;
                             
                              }


                              /*
                                  Set the body element's "overflow" property to
                                  "hidden" to clip the display of its negatively
                                  positioned <ul> element.
                              */

                              oBody = this.body;


                              //  Check if the menu is a submenu of a submenu.

                              if (this.parent &&
                                  !(this.parent instanceof YAHOO.widget.MenuBarItem)) {
                             

                                  /*
                                      There is a bug in gecko-based browsers where
                                      an element whose "position" property is set to
                                      "absolute" and "overflow" property is set to
                                      "hidden" will not render at the correct width when
                                      its offsetParent's "position" property is also
                                      set to "absolute."  It is possible to work around
                                      this bug by specifying a value for the width
                                      property in addition to overflow.
                                  */

                                  if (ua.gecko) {
                                 
                                      oBody.style.width = oBody.clientWidth + "px";
                                 
                                  }
                                 
                                 
                                  /*
                                      Set a width on the submenu to prevent its
                                      width from growing when the animation
                                      is complete.
                                  */
                                 
                                  if (ua.ie == 7) {

                                      oElement.style.width = oElement.clientWidth + "px";

                                  }
                             
                              }

         
                              oBody.style.overflow = "hidden";


                              /*
                                  Set the <ul> element's "marginTop" property
                                  to a negative value so that the Menu's height
                                  collapses.
                              */

                              oUL = oBody.getElementsByTagName("ul")[0];

                              oUL.style.marginTop = ("-" + oUL.offsetHeight + "px");
                         
                          }

                      }


                      /*
                          "tween" event handler for the Anim instance, used to
                          syncronize the size and position of the Menu instance's
                          shadow and iframe shim (if it exists) with its
                          changing height.
                      */

                      function onTween(p_sType, p_aArgs, p_oShadow) {

                          if (this.cfg.getProperty("iframe")) {
                         
                              this.syncIframe();
                     
                          }
                     
                          if (p_oShadow) {
                     
                              p_oShadow.style.height = this.element.offsetHeight + "px";
                         
                          }
                     
                      }


                      /*
                          "complete" event handler for the Anim instance, used to
                          remove style properties that were animated so that the
                          Menu instance can be displayed at its final height.
                      */

                      function onAnimationComplete(p_sType, p_aArgs, p_oShadow) {

                          var oBody = this.body,
                              oUL = oBody.getElementsByTagName("ul")[0];

                          if (p_oShadow) {
                         
                              p_oShadow.style.height = this.element.offsetHeight + "px";
                         
                          }


                          oUL.style.marginTop = "";
                          oBody.style.overflow = "";
                         

                          //  Check if the menu is a submenu of a submenu.

                          if (this.parent &&
                              !(this.parent instanceof YAHOO.widget.MenuBarItem)) {


                              // Clear widths set by the "beforeshow" event handler

                              if (ua.gecko) {
                             
                                  oBody.style.width = "";
                             
                              }
                             
                              if (ua.ie == 7) {

                                  this.element.style.width = "";

                              }
                         
                          }
                         
                      }


                      /*
                           "show" event handler for each submenu of the MenuBar
                           instance - used to kick off the animation of the
                           <ul> element.
                      */

                      function onSubmenuShow(p_sType, p_sArgs) {

                          var oElement,
                              oShadow,
                              oUL;
                     
                          if (this.parent) {

                              oElement = this.element;
                              oShadow = oElement.lastChild;
                              oUL = this.body.getElementsByTagName("ul")[0];
                         

                              /*
                                   Animate the <ul> element's "marginTop" style
                                   property to a value of 0.
                              */

                              oAnim = new YAHOO.util.Anim(oUL,
                                  { marginTop: { to: 0 } },
                                  .5, YAHOO.util.Easing.easeOut);


                              oAnim.onStart.subscribe(function () {
             
                                  oShadow.style.height = "100%";
                             
                              });
         

                              oAnim.animate();

         
                              /*
                                  Subscribe to the Anim instance's "tween" event for
                                  IE to syncronize the size and position of a
                                  submenu's shadow and iframe shim (if it exists) 
                                  with its changing height.
                              */
         
                              if (YAHOO.env.ua.ie) {
                                 
                                  oShadow.style.height = oElement.offsetHeight + "px";


                                  /*
                                      Subscribe to the Anim instance's "tween"
                                      event, passing a reference Menu's shadow
                                      element and making the scope of the event
                                      listener the Menu instance.
                                  */

                                  oAnim.onTween.subscribe(onTween, oShadow, this);
         
                              }
         

                              /*
                                  Subscribe to the Anim instance's "complete" event,
                                  passing a reference Menu's shadow element and making
                                  the scope of the event listener the Menu instance.
                              */
         
                              oAnim.onComplete.subscribe(onAnimationComplete, oShadow, this);
                         
                          }
                     
                      }


                      /*
                           Subscribe to the "beforerender" event, adding a submenu
                           to each of the items in the MenuBar instance.
                      */

                      oMenuBar.subscribe("beforeRender", function () {

                          if (this.getRoot() == this) {

                              this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
                              this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
                              this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
                              this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

                          }

                      });


           &nb

      (Message over 64 KB, truncated)
    • Dav Glass
      Francis -- Take a look at this thread: http://tech.groups.yahoo.com/group/ydn-javascript/message/26105 Dav Dav Glass dav.glass@yahoo.com blog.davglass.com +
      Message 2 of 6 , Mar 29, 2008
      • 0 Attachment
        Francis --

        Take a look at this thread:
        http://tech.groups.yahoo.com/group/ydn-javascript/message/26105
         
        Dav

        Dav Glass
        dav.glass@...
        blog.davglass.com



        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: Francis Amanfo <famanfo@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Saturday, March 29, 2008 1:38:33 AM
        Subject: [ydn-javascript] LayoutManager and Menu

        Hi,

        I have a LayoutManager configuations whose top I want to display a menu created from a javascript function.
        The problem is that the menu doesn't display and I don't get any errors as well.

        Looking at the code, I want to display the content of the function productsMenu() as body of "Top" in the layout configuration.
        Can someone please tell me what I'm doing wrong?

        Thanks in advance.

        Here is the code:


        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Full Page Layout - Example</title>
        <style type="text/css">
        /*margin and padding on body element
          can introduce errors in determining
          element position and are not recommended;
          we turn them off as a foundation for YUI
          CSS treatments. */
         
          div.yui-b p {
                   
                        margin: 0 0 .5em 0;
                        color: #999;
                   
                    }
                   
                    div.yui-b p strong {
                   
                        font-weight: bold;
                        color: #000;
                   
                    }
                   
                    div.yui-b p em {

                        color: #000;
                   
                    }           
                   
                    h1 {

                        font-weight: bold;
                        margin: 0 0 1em 0;
                        padding: .25em .5em;
                        background-color: #ccc;

                    }

                    #productsandservices {

                        margin: 0 0 10px 0;
                   
                    }
         
         
        body {
            margin:0;
            padding:0;
        }
        #toggle {
            text-align: center;
          
        }
        #toggle a {
            padding: 0 5px;
            border-left: 1px solid black;
        }
        #tRight {
            border-left: none !important;
        }
        </style>
        <link rel="stylesheet" type="text/css" href="yui/reset-fonts-grids/reset-fonts-grids.css" />
        <link rel="stylesheet" type="text/css" href="yui/resize/assets/skins/sam/resize.css" />
        <link rel="stylesheet" type="text/css" href="yui/layout/assets/skins/sam/layout.css" />
        <link rel="stylesheet" type="text/css" href="yui/button/assets/skins/sam/button.css" />
        <link rel="stylesheet" type="text/css" href="yui/menu/assets/skins/sam/menu.css">
        <script type="text/javascript" src="yui/yahoo/yahoo-min.js"></script>
        <script type="text/javascript" src="yui/event/event-min.js"></script>
        <script type="text/javascript" src="yui/dom/dom-min.js"></script>

        <script type="text/javascript" src="yui/element/element-beta-min.js"></script>
        <script type="text/javascript" src="yui/dragdrop/dragdrop-min.js"></script>
        <script type="text/javascript" src="yui/resize/resize-beta-min.js"></script>
        <script type="text/javascript" src="yui/animation/animation-min.js"></script>
        <script type="text/javascript" src="yui/layout/layout-beta-min.js"></script>

        <script type="text/javascript" src="yui/animation/animation.js"></script>
        <script type="text/javascript" src="yui/container/container_core.js"></script>
        <script type="text/javascript" src="yui/menu/menu.js"></script>

        </head>

        <body class=" yui-skin-sam">

           <div id="productsandservices">
         
          
           </div>



        <div id="bottom1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p></div>
        <div id="right1">
            <b>Right 1</b>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
        </div>
        <div id="left1">
            <p>Lorem sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

        </div>
        <div id="center1">
            <p id="toggle"><a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a><a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a></p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
        </div>


        <script>

        (function() {
            var Dom = YAHOO.util.Dom,
                Event = YAHOO.util.Event;

            Event.onDOMReady(function() {
                var layout = new YAHOO.widget.Layout({
                    units: [
                        { position: 'top', height: 80, body: productsMenu()},
                        { position: 'right',width: 300,  body: 'right1' },
                        { position: 'bottom', height: 50, body: 'bottom1' },
                        { position: 'left', width: 300, body: 'left1',  },
                        { position: 'center', body: 'center1' }
                    ]
                });
              
                layout.render();
               
               
              
            });


        })();
        </script>


        <script type="text/javascript">

                    /*
                         Initialize and render the MenuBar when its elements are ready
                         to be scripted.
                    */

        function productsMenu(){

                        /*
                             Instantiate a MenuBar:  The first argument passed to the
                             constructor is the id of the element in the page
                             representing the MenuBar; the second is an object literal
                             of configuration properties.
                        */

                        var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
                                                                    autosubmenudisplay: true,
                                                                    hidedelay: 750,
                                                                    lazyload: false });
                                                                   
                      

                        /*
                             Define an array of object literals, each containing
                             the data necessary to create a submenu.
                        */

                        var aSubmenuData = [
                       
                            {
                                id: "communication",
                                itemdata: [
                                    { text: "360", url: "http://360.yahoo.com" },
                                    { text: "Alerts", url: "http://alerts.yahoo.com" },
                                    { text: "Avatars", url: "http://avatars.yahoo.com" },
                                    { text: "Groups", url: "http://groups.yahoo.com " },
                                    { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                                    {
                                        text: "PIM",
                                        submenu: {
                                                    id: "pim",
                                                    itemdata: [
                                                        { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                                                        { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                                                        { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                                                        { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                                                    ]
                                                }
                                   
                                    },
                                    { text: "Member Directory", url: "http://members.yahoo.com" },
                                    { text: "Messenger", url: "http://messenger.yahoo.com" },
                                    { text: "Mobile", url: "http://mobile.yahoo.com" },
                                    { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
                                ]
                            },

                            {
                                id: "shopping",
                                itemdata: [
                                    { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                                    { text: "Autos", url: "http://autos.yahoo.com" },
                                    { text: "Classifieds", url: "http://classifieds.yahoo.com" },
                                    { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                                    { text: "Real Estate", url: "http://realestate.yahoo.com" },
                                    { text: "Travel", url: "http://travel.yahoo.com" },
                                    { text: "Wallet", url: "http://wallet.yahoo.com" },
                                    { text: "Yellow Pages", url: "http://yp.yahoo.com" }                   
                                ]   
                            },
                           
                            {
                                id: "entertainment",
                                itemdata: [
                                    { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                                    { text: "Games", url: "http://games.yahoo.com" },
                                    { text: "Kids", url: "http://www.yahooligans.com" },
                                    { text: "Music", url: "http://music.yahoo.com" },
                                    { text: "Movies", url: "http://movies.yahoo.com" },
                                    { text: "Radio", url: "http://music.yahoo.com/launchcast" },
                                    { text: "Travel", url: "http://travel.yahoo.com" },
                                    { text: "TV", url: "http://tv.yahoo.com" }             
                                ]
                            },
                           
                            {
                                id: "information",
                                itemdata: [
                                    { text: "Downloads", url: "http://downloads.yahoo.com" },
                                    { text: "Finance", url: "http://finance.yahoo.com" },
                                    { text: "Health", url: "http://health.yahoo.com" },
                                    { text: "Local", url: "http://local.yahoo.com" },
                                    { text: "Maps & Directions", url: "http://maps.yahoo.com" },
                                    { text: "My Yahoo!", url: "http://my.yahoo.com" },
                                    { text: "News", url: "http://news.yahoo.com" },
                                    { text: "Search", url: "http://search.yahoo.com" },
                                    { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                                    { text: "Weather", url: "http://weather.yahoo.com" }
                                ]
                            }                   
                        ];


                        var ua = YAHOO.env.ua,
                            oAnim;  // Animation instance


                        /*
                             "beforeshow" event handler for each submenu of the MenuBar
                             instance, used to setup certain style properties before
                             the menu is animated.
                        */

                        function onSubmenuBeforeShow(p_sType, p_sArgs) {

                            var oBody,
                                oElement,
                                oShadow,
                                oUL;
                       

                            if (this.parent) {

                                oElement = this.element;

                                /*
                                     Get a reference to the Menu's shadow element and
                                     set its "height" property to "0px" to syncronize
                                     it with the height of the Menu instance.
                                */

                                oShadow = oElement.lastChild;
                                oShadow.style.height = "0px";

                               
                                /*
                                    Stop the Animation instance if it is currently
                                    animating a Menu.
                                */
                           
                                if (oAnim && oAnim.isAnimated()) {
                               
                                    oAnim.stop();
                                    oAnim = null;
                               
                                }


                                /*
                                    Set the body element's "overflow" property to
                                    "hidden" to clip the display of its negatively
                                    positioned <ul> element.
                                */

                                oBody = this.body;


                                //  Check if the menu is a submenu of a submenu.

                                if (this.parent &&
                                    !(this.parent instanceof YAHOO.widget.MenuBarItem)) {
                               

                                    /*
                                        There is a bug in gecko-based browsers where
                                        an element whose "position" property is set to
                                        "absolute" and "overflow" property is set to
                                        "hidden" will not render at the correct width when
                                        its offsetParent's "position" property is also
                                        set to "absolute."  It is possible to work around
                                        this bug by specifying a value for the width
                                        property in addition to overflow.
                                    */

                                    if (ua.gecko) {
                                   
                                        oBody.style.width = oBody.clientWidth + "px";
                                   
                                    }
                                   
                                   
                                    /*
                                        Set a width on the submenu to prevent its
                                        width from growing when the animation
                                        is complete.
                                    */
                                   
                                    if (ua.ie == 7) {

                                        oElement.style.width = oElement.clientWidth + "px";

                                    }
                               
                                }

           
                                oBody.style.overflow = "hidden";


                                /*
                                    Set the <ul> element's "marginTop" property
                                    to a negative value so that the Menu's height
                                    collapses.
                                */

                                oUL = oBody.getElementsByTagName("ul")[0];

                                oUL.style.marginTop = ("-" + oUL.offsetHeight + "px");
                           
                            }

                        }


                        /*
                            "tween" event handler for the Anim instance, used to
                            syncronize the size and position of the Menu instance's
                            shadow and iframe shim (if it exists) with its
                            changing height.
                        */

                        function onTween(p_sType, p_aArgs, p_oShadow) {

                            if (this.cfg.getProperty("iframe")) {
                           
                                this.syncIframe();
                       
                            }
                       
                            if (p_oShadow) {
                       
                                p_oShadow.style.height = this.element.offsetHeight + "px";
                           
                            }
                       
                        }


                        /*
                            "complete" event handler for the Anim instance, used to
                            remove style properties that were animated so that the
                            Menu instance can be displayed at its final height.
                        */

                        function onAnimationComplete(p_sType, p_aArgs, p_oShadow) {

                            var oBody = this.body,
                                oUL = oBody.getElementsByTagName("ul")[0];

                            if (p_oShadow) {
                           
                                p_oShadow.style.height = this.element.offsetHeight + "px";
                           
                            }


                            oUL.style.marginTop = "";
                            oBody.style.overflow = "";
                           

                            //  Check if the menu is a submenu of a submenu.

                            if (this.parent &&
                                !(this.parent instanceof YAHOO.widget.MenuBarItem)) {


                                // Clear widths set by the "beforeshow" event handler

                                if (ua.gecko) {
                               
                                    oBody.style.width = "";
                               
                                }
                               
                                if (ua.ie == 7) {

                                    this.element.style.width = "";

                                }
                           
                            }
                           
                        }


                        /*
                             "show" event handler for each submenu of the MenuBar
                             instance - used to kick off the animation of the
                             <ul> element.
                        */

                        function onSubmenuShow(p_sType, p_sArgs) {

                            var oElement,
                                oShadow,
                                oUL;
                       
                            if (this.parent) {

                                oElement = this.element;
                                oShadow = oElement.lastChild;
                                oUL = this.body.getElementsByTagName("ul")[0];
                           

                                /*
                                     Animate the <ul> element's "marginTop" style
                                     property to a value of 0.
                                */

                                oAnim = new YAHOO.util.Anim(oUL,
                                    { marginTop: { to: 0 } },
                                    .5, YAHOO.util.Easing.easeOut);


                                oAnim.onStart.subscribe(function () {
               
                                    oShadow.style.height = "100%";
                               
                                });
           

                                oAnim.animate();

           
                                /*
                                    Subscribe to the Anim instance's "tween" event for
                                    IE to syncronize the size and position of a
                                    submenu's shadow and iframe shim (if it exists) 
                                    with its changing height.
                                */
           
                                if (YAHOO.env.ua.ie) {
                                   
                                    oShadow.style.height = oElement.offsetHeight + "px";


                                    /*
                                        Subscribe to the Anim instance's "tween"
                                        event, passing a reference Menu's shadow
                                        element and making the scope of the event
                                        listener the Menu instance.
                                    */

                                    oAnim.onTween.subscribe(onTween, oShadow, this);
           
                                }
           

                                /*
                                    Subscribe to the Anim instance's "complete" event,
                                    passing a reference Menu's shadow element and making
                                    the scope of the event listener the Menu instance.
                                */
           
                                oAnim.onComplete.subscribe(onAnimationComplete, oShadow, this);
                           
                            }
                       
                        }


                        /*
                             Subscribe to the "beforerender" event, adding a submenu
                             to each of the items in the MenuBar instance.
                        */

                        oMenuBar.subscribe("beforeRender", function () {

                            if (this.getRoot() == this) {

                     &nbs

        (Message over 64 KB, truncated)
      • Francis Amanfo
        Hi Dav, Thanks for the response. Not very sure, but it seemed to me that solution was addressing a different problem. I did try though by putting in that style
        Message 3 of 6 , Mar 30, 2008
        • 0 Attachment
          Hi Dav,

          Thanks for the response. Not very sure, but it seemed to me that solution was addressing a different problem. I did try though by putting in that style declarations but that couldn't solve my problem. My problrm is that I'm not seeing anything dispayed at all at the Top part of the layoutmanager's declarations. I'm expecting the menu generated from the javascript function declared.
          Any help would be much appreciated.

          Thanks,
          Francis

          On Sun, Mar 30, 2008 at 12:49 AM, Dav Glass <dav.glass@...> wrote:

          Francis --

          Take a look at this thread:
          http://tech.groups.yahoo.com/group/ydn-javascript/message/26105
           
          Dav

          Dav Glass
          dav.glass@...
          blog.davglass.com



          + Windows: n. - The most successful computer virus, ever. +
          + A computer without a Microsoft operating system is like a dog
          without bricks tied to its head +
          + A Microsoft Certified Systems Engineer is to computing what a
          McDonalds Certified Food Specialist is to fine cuisine +


          ----- Original Message ----
          From: Francis Amanfo <famanfo@...>
          To: ydn-javascript@yahoogroups.com
          Sent: Saturday, March 29, 2008 1:38:33 AM
          Subject: [ydn-javascript] LayoutManager and Menu

          Hi,

          I have a LayoutManager configuations whose top I want to display a menu created from a javascript function.
          The problem is that the menu doesn't display and I don't get any errors as well.

          Looking at the code, I want to display the content of the function productsMenu() as body of "Top" in the layout configuration.
          Can someone please tell me what I'm doing wrong?

          Thanks in advance.

          Here is the code:


          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
          <title>Full Page Layout - Example</title>
          <style type="text/css">
          /*margin and padding on body element
            can introduce errors in determining
            element position and are not recommended;
            we turn them off as a foundation for YUI
            CSS treatments. */
           
            div.yui-b p {
                     
                          margin: 0 0 .5em 0;
                          color: #999;
                     
                      }
                     
                      div.yui-b p strong {
                     
                          font-weight: bold;
                          color: #000;
                     
                      }
                     
                      div.yui-b p em {

                          color: #000;
                     
                      }           
                     
                      h1 {

                          font-weight: bold;
                          margin: 0 0 1em 0;
                          padding: .25em .5em;
                          background-color: #ccc;

                      }

                      #productsandservices {

                          margin: 0 0 10px 0;
                     
                      }
           
           
          body {
              margin:0;
              padding:0;
          }
          #toggle {
              text-align: center;
            
          }
          #toggle a {
              padding: 0 5px;
              border-left: 1px solid black;
          }
          #tRight {
              border-left: none !important;
          }
          </style>
          <link rel="stylesheet" type="text/css" href="yui/reset-fonts-grids/reset-fonts-grids.css" />
          <link rel="stylesheet" type="text/css" href="yui/resize/assets/skins/sam/resize.css" />
          <link rel="stylesheet" type="text/css" href="yui/layout/assets/skins/sam/layout.css" />
          <link rel="stylesheet" type="text/css" href="yui/button/assets/skins/sam/button.css" />
          <link rel="stylesheet" type="text/css" href="yui/menu/assets/skins/sam/menu.css">
          <script type="text/javascript" src="yui/yahoo/yahoo-min.js"></script>
          <script type="text/javascript" src="yui/event/event-min.js"></script>
          <script type="text/javascript" src="yui/dom/dom-min.js"></script>

          <script type="text/javascript" src="yui/element/element-beta-min.js"></script>
          <script type="text/javascript" src="yui/dragdrop/dragdrop-min.js"></script>
          <script type="text/javascript" src="yui/resize/resize-beta-min.js"></script>
          <script type="text/javascript" src="yui/animation/animation-min.js"></script>
          <script type="text/javascript" src="yui/layout/layout-beta-min.js"></script>

          <script type="text/javascript" src="yui/animation/animation.js"></script>
          <script type="text/javascript" src="yui/container/container_core.js"></script>
          <script type="text/javascript" src="yui/menu/menu.js"></script>

          </head>

          <body class=" yui-skin-sam">

             <div id="productsandservices">
           
            
             </div>



          <div id="bottom1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p></div>
          <div id="right1">
              <b>Right 1</b>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
          </div>
          <div id="left1">
              <p>Lorem sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

          </div>
          <div id="center1">
              <p id="toggle"><a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a><a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a></p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
          </div>


          <script>

          (function() {
              var Dom = YAHOO.util.Dom,
                  Event = YAHOO.util.Event;

              Event.onDOMReady(function() {
                  var layout = new YAHOO.widget.Layout({
                      units: [
                          { position: 'top', height: 80, body: productsMenu()},
                          { position: 'right',width: 300,  body: 'right1' },
                          { position: 'bottom', height: 50, body: 'bottom1' },
                          { position: 'left', width: 300, body: 'left1',  },
                          { position: 'center', body: 'center1' }
                      ]
                  });
                
                  layout.render();
                 
                 
                
              });


          })();
          </script>


          <script type="text/javascript">

                      /*
                           Initialize and render the MenuBar when its elements are ready
                           to be scripted.
                      */

          function productsMenu(){

                          /*
                               Instantiate a MenuBar:  The first argument passed to the
                               constructor is the id of the element in the page
                               representing the MenuBar; the second is an object literal
                               of configuration properties.
                          */

                          var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
                                                                      autosubmenudisplay: true,
                                                                      hidedelay: 750,
                                                                      lazyload: false });
                                                                     
                        

                          /*
                               Define an array of object literals, each containing
                               the data necessary to create a submenu.
                          */

                          var aSubmenuData = [
                         
                              {
                                  id: "communication",
                                  itemdata: [
                                      { text: "360", url: "http://360.yahoo.com" },
                                      { text: "Alerts", url: "http://alerts.yahoo.com" },
                                      { text: "Avatars", url: "http://avatars.yahoo.com" },
                                      { text: "Groups", url: "http://groups.yahoo.com " },
                                      { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                                      {
                                          text: "PIM",
                                          submenu: {
                                                      id: "pim",
                                                      itemdata: [
                                                          { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                                                          { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                                                          { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                                                          { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                                                      ]
                                                  }
                                     
                                      },
                                      { text: "Member Directory", url: "http://members.yahoo.com" },
                                      { text: "Messenger", url: "http://messenger.yahoo.com" },
                                      { text: "Mobile", url: "http://mobile.yahoo.com" },
                                      { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
                                  ]
                              },

                              {
                                  id: "shopping",
                                  itemdata: [
                                      { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                                      { text: "Autos", url: "http://autos.yahoo.com" },
                                      { text: "Classifieds", url: "http://classifieds.yahoo.com" },
                                      { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                                      { text: "Real Estate", url: "http://realestate.yahoo.com" },
                                      { text: "Travel", url: "http://travel.yahoo.com" },
                                      { text: "Wallet", url: "http://wallet.yahoo.com" },
                                      { text: "Yellow Pages", url: "http://yp.yahoo.com" }                   
                                  ]   
                              },
                             
                              {
                                  id: "entertainment",
                                  itemdata: [
                                      { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                                      { text: "Games", url: "http://games.yahoo.com" },
                                      { text: "Kids", url: "http://www.yahooligans.com" },
                                      { text: "Music", url: "http://music.yahoo.com" },
                                      { text: "Movies", url: "http://movies.yahoo.com" },
                                      { text: "Radio", url: "http://music.yahoo.com/launchcast" },
                                      { text: "Travel", url: "http://travel.yahoo.com" },
                                      { text: "TV", url: "http://tv.yahoo.com" }             
                                  ]
                              },
                             
                              {
                                  id: "information",
                                  itemdata: [
                                      { text: "Downloads", url: "http://downloads.yahoo.com" },
                                      { text: "Finance", url: "http://finance.yahoo.com" },
                                      { text: "Health", url: "http://health.yahoo.com" },
                                      { text: "Local", url: "http://local.yahoo.com" },
                                      { text: "Maps & Directions", url: "http://maps.yahoo.com" },
                                      { text: "My Yahoo!", url: "http://my.yahoo.com" },
                                      { text: "News", url: "http://news.yahoo.com" },
                                      { text: "Search", url: "http://search.yahoo.com" },
                                      { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                                      { text: "Weather", url: "http://weather.yahoo.com" }
                                  ]
                              }                   
                          ];


                          var ua = YAHOO.env.ua,
                              oAnim;  // Animation instance


                          /*
                               "beforeshow" event handler for each submenu of the MenuBar
                               instance, used to setup certain style properties before
                               the menu is animated.
                          */

                          function onSubmenuBeforeShow(p_sType, p_sArgs) {

                              var oBody,
                                  oElement,
                                  oShadow,
                                  oUL;
                         

                              if (this.parent) {

                                  oElement = this.element;

                                  /*
                                       Get a reference to the Menu's shadow element and
                                       set its "height" property to "0px" to syncronize
                                       it with the height of the Menu instance.
                                  */

                                  oShadow = oElement.lastChild;
                                  oShadow.style.height = "0px";

                                 
                                  /*
                                      Stop the Animation instance if it is currently
                                      animating a Menu.
                                  */
                             
                                  if (oAnim && oAnim.isAnimated()) {
                                 
                                      oAnim.stop();
                                      oAnim = null;
                                 
                                  }


                                  /*
                                      Set the body element's "overflow" property to
                                      "hidden" to clip the display of its negatively
                                      positioned <ul> element.
                                  */

                                  oBody = this.body;


                                  //  Check if the menu is a submenu of a submenu.

                                  if (this.parent &&
                                      !(this.parent instanceof YAHOO.widget.MenuBarItem)) {
                                 

                                      /*
                                          There is a bug in gecko-based browsers where
                                          an element whose "position" property is set to
                                          "absolute" and "overflow" property is set to
                                          "hidden" will not render at the correct width when
                                          its offsetParent's "position" property is also
                                          set to "absolute."  It is possible to work around
                                          this bug by specifying a value for the width
                                          property in addition to overflow.
                                      */

                                      if (ua.gecko) {
                                     
                                          oBody.style.width = oBody.clientWidth + "px";
                                     
                                      }
                                     
                                     
                                      /*
                                          Set a width on the submenu to prevent its
                                          width from growing when the animation
                                          is complete.
                                      */
                                     
                                      if (ua.ie == 7) {

                                          oElement.style.width = oElement.clientWidth + "px";

                                      }
                                 
                                  }

             
                                  oBody.style.overflow = "hidden";


                                  /*
                                      Set the <ul> element's "marginTop" property
                                      to a negative value so that the Menu's height
                                      collapses.
                                  */

                                  oUL = oBody.getElementsByTagName("ul")[0];

                                  oUL.style.marginTop = ("-" + oUL.offsetHeight + "px");
                             
                              }

                          }


                          /*
                              "tween" event handler for the Anim instance, used to
                              syncronize the size and position of the Menu instance's
                              shadow and iframe shim (if it exists) with its
                              changing height.
                          */

                          function onTween(p_sType, p_aArgs, p_oShadow) {

                              if (this.cfg.getProperty("iframe")) {
                             
                                  this.syncIframe();
                         
                              }
                         
                              if (p_oShadow) {
                         
                                  p_oShadow.style.height = this.element.offsetHeight + "px";
                             
                              }
                         
                          }


                          /*
                              "complete" event handler for the Anim instance, used to
                              remove style properties that were animated so that the
                              Menu instance can be displayed at its final height.
                          */

                          function onAnimationComplete(p_sType, p_aArgs, p_oShadow) {

                              var oBody = this.body,
                                  oUL = oBody.getElementsByTagName("ul")[0];

                              if (p_oShadow) {
                             
                                  p_oShadow.style.height = this.element.offsetHeight + "px";
                             
                              }


                              oUL.style.marginTop = "";
                              oBody.style.overflow = "";
                             

                              //  Check if the menu is a submenu of a submenu.

                              if (this.parent &&
                                  !(this.parent instanceof YAHOO.widget.MenuBarItem)) {


                                  // Clear widths set by the "beforeshow" event handler

                                  if (ua.gecko) {
                                 
                                      oBody.style.width = "";
                                 
                                  }
                                 
                                  if (ua.ie == 7) {

                                      this.element.style.width = "";

                                  }
                             
                              }
                             
                          }


                          /*
                               "show" event handler for each submenu of the MenuBar
                               instance - used to kick off the animation of the
                               <ul> element.
                          */

                          function onSubmenuShow(p_sType, p_sArgs) {

                              var oElement,
                                  oShadow,
                                  oUL;
                         
                              if (this.parent) {

                                  oElement = this.element;
                                  oShadow = oElement.lastChild;
                                  oUL = this.body.getElementsByTagName("ul")[0];
                             

                                  /*
                                       Animate the <ul> element's "marginTop" style
                                       property to a value of 0.
                                  */

                                  oAnim = new YAHOO.util.Anim(oUL,
                                      { marginTop: { to: 0 } },
                                      .5, YAHOO.util.Easing.easeOut);


                                  oAnim.onStart.subscribe(function () {
                 
                                      oShadow.style.height = "100%";
                                 
                                  });
             

                                  oAnim.animate();

             
                                  /*
                                      Subscribe to the Anim instance's "tween" event for
                                      IE to syncronize the size and position of a
                                      submenu's shadow and iframe shim (if it exists) 
                                      with its changing height.
                                  */
             
                                  if (YAHOO.env.ua.ie) {
                                     
                                      oShadow.style.height = oElement.offsetHeight + "px";


                                      /*
                                          Subscribe to the Anim instance's "tween"
                                          event, passing a reference Menu's shadow
                                          element and making the scope of the event
                                          listener the Menu instance.
                                      */

                                      oAnim.onTween.subscribe(onTween,

          (Message over 64 KB, truncated)
        • Dav Glass
          Francis -- I see a couple of issues here, first move the productsandservices div inside another div with an id of top1. Then change the layout code to this:
          Message 4 of 6 , Mar 31, 2008
          • 0 Attachment
            Francis --

            I see a couple of issues here, first move the productsandservices div inside another div with an id of top1.
            Then change the layout code to this:

            Event.onDOMReady(function() {
                    var layout = new YAHOO.widget.Layout({
                        units: [
                            { position: 'top', height: 80, body: 'top1'},
                            { position: 'right',width: 300,  body: 'right1' },
                            { position: 'bottom', height: 50, body: 'bottom1' },
                            { position: 'left', width: 300, body: 'left1',  },
                            { position: 'center', body: 'center1' }
                        ]
                   });
                   layout.on('render', function() {
                        productsMenu();
                   });
                   layout.render();
            });

            Now the Layout will render the top1 as the top unit, then on render calling the productsMenu method will initialize the menu..

            You will still need to apply the CSS from the other thread to make the menu overlap the other unit's.

            Hope that helps :)
            Dav


            Dav Glass
            dav.glass@...
            blog.davglass.com



            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: Francis Amanfo <famanfo@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Sunday, March 30, 2008 1:30:16 PM
            Subject: Re: [ydn-javascript] LayoutManager and Menu

            Hi Dav,

            Thanks for the response. Not very sure, but it seemed to me that solution was addressing a different problem. I did try though by putting in that style declarations but that couldn't solve my problem. My problrm is that I'm not seeing anything dispayed at all at the Top part of the layoutmanager's declarations. I'm expecting the menu generated from the javascript function declared.
            Any help would be much appreciated.

            Thanks,
            Francis

            On Sun, Mar 30, 2008 at 12:49 AM, Dav Glass <dav.glass@...> wrote:

            Francis --

            Take a look at this thread:
            http://tech.groups.yahoo.com/group/ydn-javascript/message/26105
             
            Dav

            Dav Glass
            dav.glass@...
            blog.davglass.com



            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: Francis Amanfo <famanfo@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Saturday, March 29, 2008 1:38:33 AM
            Subject: [ydn-javascript] LayoutManager and Menu

            Hi,

            I have a LayoutManager configuations whose top I want to display a menu created from a javascript function.
            The problem is that the menu doesn't display and I don't get any errors as well.

            Looking at the code, I want to display the content of the function productsMenu() as body of "Top" in the layout configuration.
            Can someone please tell me what I'm doing wrong?

            Thanks in advance.

            Here is the code:


            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
            <title>Full Page Layout - Example</title>
            <style type="text/css">
            /*margin and padding on body element
              can introduce errors in determining
              element position and are not recommended;
              we turn them off as a foundation for YUI
              CSS treatments. */
             
              div.yui-b p {
                       
                            margin: 0 0 .5em 0;
                            color: #999;
                       
                        }
                       
                        div.yui-b p strong {
                       
                            font-weight: bold;
                            color: #000;
                       
                        }
                       
                        div.yui-b p em {

                            color: #000;
                       
                        }           
                       
                        h1 {

                            font-weight: bold;
                            margin: 0 0 1em 0;
                            padding: .25em .5em;
                            background-color: #ccc;

                        }

                        #productsandservices {

                            margin: 0 0 10px 0;
                       
                        }
             
             
            body {
                margin:0;
                padding:0;
            }
            #toggle {
                text-align: center;
              
            }
            #toggle a {
                padding: 0 5px;
                border-left: 1px solid black;
            }
            #tRight {
                border-left: none !important;
            }
            </style>
            <link rel="stylesheet" type="text/css" href="yui/reset-fonts-grids/reset-fonts-grids.css" />
            <link rel="stylesheet" type="text/css" href="yui/resize/assets/skins/sam/resize.css" />
            <link rel="stylesheet" type="text/css" href="yui/layout/assets/skins/sam/layout.css" />
            <link rel="stylesheet" type="text/css" href="yui/button/assets/skins/sam/button.css" />
            <link rel="stylesheet" type="text/css" href="yui/menu/assets/skins/sam/menu.css">
            <script type="text/javascript" src="yui/yahoo/yahoo-min.js"></script>
            <script type="text/javascript" src="yui/event/event-min.js"></script>
            <script type="text/javascript" src="yui/dom/dom-min.js"></script>

            <script type="text/javascript" src="yui/element/element-beta-min.js"></script>
            <script type="text/javascript" src="yui/dragdrop/dragdrop-min.js"></script>
            <script type="text/javascript" src="yui/resize/resize-beta-min.js"></script>
            <script type="text/javascript" src="yui/animation/animation-min.js"></script>
            <script type="text/javascript" src="yui/layout/layout-beta-min.js"></script>

            <script type="text/javascript" src="yui/animation/animation.js"></script>
            <script type="text/javascript" src="yui/container/container_core.js"></script>
            <script type="text/javascript" src="yui/menu/menu.js"></script>

            </head>

            <body class=" yui-skin-sam">

               <div id="productsandservices">
             
              
               </div>



            <div id="bottom1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p></div>
            <div id="right1">
                <b>Right 1</b>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
            </div>
            <div id="left1">
                <p>Lorem sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

            </div>
            <div id="center1">
                <p id="toggle"><a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a><a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
            </div>


            <script>

            (function() {
                var Dom = YAHOO.util.Dom,
                    Event = YAHOO.util.Event;

                Event.onDOMReady(function() {
                    var layout = new YAHOO.widget.Layout({
                        units: [
                            { position: 'top', height: 80, body: productsMenu()},
                            { position: 'right',width: 300,  body: 'right1' },
                            { position: 'bottom', height: 50, body: 'bottom1' },
                            { position: 'left', width: 300, body: 'left1',  },
                            { position: 'center', body: 'center1' }
                        ]
                    });
                  
                    layout.render();
                   
                   
                  
                });


            })();
            </script>


            <script type="text/javascript">

                        /*
                             Initialize and render the MenuBar when its elements are ready
                             to be scripted.
                        */

            function productsMenu(){

                            /*
                                 Instantiate a MenuBar:  The first argument passed to the
                                 constructor is the id of the element in the page
                                 representing the MenuBar; the second is an object literal
                                 of configuration properties.
                            */

                            var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
                                                                        autosubmenudisplay: true,
                                                                        hidedelay: 750,
                                                                        lazyload: false });
                                                                       
                          

                            /*
                                 Define an array of object literals, each containing
                                 the data necessary to create a submenu.
                            */

                            var aSubmenuData = [
                           
                                {
                                    id: "communication",
                                    itemdata: [
                                        { text: "360", url: "http://360.yahoo.com" },
                                        { text: "Alerts", url: "http://alerts.yahoo.com" },
                                        { text: "Avatars", url: "http://avatars.yahoo.com" },
                                        { text: "Groups", url: "http://groups.yahoo.com " },
                                        { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                                        {
                                            text: "PIM",
                                            submenu: {
                                                        id: "pim",
                                                        itemdata: [
                                                            { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                                                            { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                                                            { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                                                            { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                                                        ]
                                                    }
                                       
                                        },
                                        { text: "Member Directory", url: "http://members.yahoo.com" },
                                        { text: "Messenger", url: "http://messenger.yahoo.com" },
                                        { text: "Mobile", url: "http://mobile.yahoo.com" },
                                        { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
                                    ]
                                },

                                {
                                    id: "shopping",
                                    itemdata: [
                                        { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                                        { text: "Autos", url: "http://autos.yahoo.com" },
                                        { text: "Classifieds", url: "http://classifieds.yahoo.com" },
                                        { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                                        { text: "Real Estate", url: "http://realestate.yahoo.com" },
                                        { text: "Travel", url: "http://travel.yahoo.com" },
                                        { text: "Wallet", url: "http://wallet.yahoo.com" },
                                        { text: "Yellow Pages", url: "http://yp.yahoo.com" }                   
                                    ]   
                                },
                               
                                {
                                    id: "entertainment",
                                    itemdata: [
                                        { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                                        { text: "Games", url: "http://games.yahoo.com" },
                                        { text: "Kids", url: "http://www.yahooligans.com" },
                                        { text: "Music", url: "http://music.yahoo.com" },
                                        { text: "Movies", url: "http://movies.yahoo.com" },
                                        { text: "Radio", url: "http://music.yahoo.com/launchcast" },
                                        { text: "Travel", url: "http://travel.yahoo.com" },
                                        { text: "TV", url: "http://tv.yahoo.com" }             
                                    ]
                                },
                               
                                {
                                    id: "information",
                                    itemdata: [
                                        { text: "Downloads", url: "http://downloads.yahoo.com" },
                                        { text: "Finance", url: "http://finance.yahoo.com" },
                                        { text: "Health", url: "http://health.yahoo.com" },
                                        { text: "Local", url: "http://local.yahoo.com" },
                                        { text: "Maps & Directions", url: "http://maps.yahoo.com" },
                                        { text: "My Yahoo!", url: "http://my.yahoo.com" },
                                        { text: "News", url: "http://news.yahoo.com" },
                                        { text: "Search", url: "http://search.yahoo.com" },
                                        { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                                        { text: "Weather", url: "http://weather.yahoo.com" }
                                    ]
                                }                   
                            ];


                            var ua = YAHOO.env.ua,
                                oAnim;  // Animation instance


                            /*
                                 "beforeshow" event handler for each submenu of the MenuBar
                                 instance, used to setup certain style properties before
                                 the menu is animated.
                            */

                            function onSubmenuBeforeShow(p_sType, p_sArgs) {

                                var oBody,
                                    oElement,
                                    oShadow,
                                    oUL;
                           

                                if (this.parent) {

                                    oElement = this.element;

                                    /*
                                         Get a reference to the Menu's shadow element and
                                         set its "height" property to "0px" to syncronize
                                         it with the height of the Menu instance.
                                    */

                                    oShadow = oElement.lastChild;
                                    oShadow.style.height = "0px";

                                   
                                    /*
                                        Stop the Animation instance if it is currently
                                        animating a Menu.
                                    */
                               
                                    if (oAnim && oAnim.isAnimated()) {
                                   
                                        oAnim.stop();
                                        oAnim = null;
                                   
                                    }


                                    /*
                                        Set the body element's "overflow" property to
                                        "hidden" to clip the display of its negatively
                                        positioned <ul> element.
                                    */

                                    oBody = this.body;


                                    //  Check if the menu is a submenu of a submenu.

                                    if (this.parent &&
                                        !(this.parent instanceof YAHOO.widget.MenuBarItem)) {
                                   

                                        /*
                                            There is a bug in gecko-based browsers where
                                            an element whose "position" property is set to
                                            "absolute" and "overflow" property is set to
                                            "hidden" will not render at the correct width when
                                            its offsetParent's "position" property is also
                                            set to "absolute."  It is possible to work around
                                            this bug by specifying a value for the width
                                            property in addition to overflow.
                                        */

                                        if (ua.gecko) {
                                       
                                            oBody.style.width = oBody.clientWidth + "px";
                                       
                                        }
                                       
                                       
                                        /*
                                            Set a width on the submenu to prevent its
                                            width from growing when the animation
                                            is complete.
                                        */
                                       
                                        if (ua.ie == 7) {

                                            oElement.style.width = oElement.clientWidth + "px";

                                        }
                                   
                                    }

               
                                    oBody.style.overflow = "hidden";


                                    /*
                                        Set the <ul> element's "marginTop" property
                                        to a negative value so that the Menu's height
                                        collapses.
                                    */

                                    oUL = oBody.getElementsByTagName("ul")[0];

                                    oUL.style.marginTop = ("-" + oUL.offsetHeight + "px");
                               
                                }

                            }


                            /*
                                "tween" event handler for the Anim instance, used to
                                syncronize the size and position of the Menu instance's
                                shadow and iframe shim (if it exists) with its
                                changing height.
                            */

                            function onTween(p_sType, p_aArgs, p_oShadow) {

                                if (this.cfg.getProperty("iframe")) {
                               
                                    this.syncIframe();
                           
                                }
                           
                                if (p_oShadow) {
                           
                                    p_oShadow.style.height = this.element.offsetHeight + "px";
                               
                                }
                           
                            }


                            /*
                                "complete" event handler for the Anim instance, used to
                                remove style properties that were animated so that the
                                Menu instance can be displayed at its final height.
                            */

                            function onAnimationComplete(p_sType, p_aArgs, p_oShadow) {

                                var oBody = this.body,
                                    oUL = oBody.getElementsByTagName("ul")[0];

                                if (p_oShadow) {
                               
                                    p_oShadow.style.height = this.element.offsetHeight + "px";
                               
                                }


                                oUL.style.marginTop = "";
                                oBody.style.overflow = "";
                               

                                //  Check if the menu is a submenu of a submenu.

                                if (this.parent &&
                                    !(this.parent instanceof YAHOO.widget.MenuBarItem)) {


                                    // Clear widths set by the "beforeshow" event handler

                                    if (ua.gecko) {
                                   
                                        oBody.style.width = "";
                                   
                                    }
                                   
                                    if (ua.ie == 7) {

                                        this.element.style.width = "";

                                    }
                               
                                }
                               
                            }


                            /*
                                 "show" event handler for each submenu of the MenuBar
                                 instance - used to kick off the animation of the
                                 <ul> element.
                            */

                            function onSubmenuShow(p_sType, p_sArgs) {

                                var oElement,
                                    oShadow,
                                    oUL;
                           
                                if (this.parent) {

                                    oElement = this.element;
                                    oShadow = oElement.lastChild;
                                    oUL = this.body.getElementsByTagName("ul")[0];
                               

                                    /*
                                         Animate the <ul> element's "marginTop" style
                                         property to a value of 0.
                                    */

                                    oAnim = new YAHOO.util.Anim(oUL,
                                        { marginTop: { to: 0 } },
                                        .5, YAHOO.util.Easing.easeOut);


                                    oAnim.onStart.subscribe(function () {
                   
                                        oShadow.style.height = "100%";
                                   
                                    });
               

                                    oAnim.animate();

               
                                    /*
                                        Subscribe to the Anim instance's "tween" event for
                                        IE to syncronize the size and position of a
                                        submenu's shadow and iframe shim (if it exists) 
                                        with its changing height.
                                    */
               
                                    if (YAHOO.env.ua.ie) {
                                       
                                        oShadow.style.height = oElement.offsetHeight + "px";


             &n

            (Message over 64 KB, truncated)
          • Francis Amanfo
            Hi Dav, Thanks so far for your responses. I ve modified the code as you instructed but still no luck. Here is it:
            Message 5 of 6 , Apr 2, 2008
            • 0 Attachment
              Hi Dav,

              Thanks so far for your responses. I've modified the code as you instructed but still no luck.

              Here is it:


              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
              <html>
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
              <title>Full Page Layout - Example</title>
              <style type="text/css">
              /*margin and padding on body element
                can introduce errors in determining
                element position and are not recommended;
                we turn them off as a foundation for YUI
                CSS treatments. */
               
                div.yui-b p {
                        
                              margin: 0 0 .5em 0;
                              color: #999;
                        
                          }
                        
                          div.yui-b p strong {
                        
                              font-weight: bold;
                              color: #000;
                        
                          }
                        
                          div.yui-b p em {

                              color: #000;
                        
                          }          
                        
                          h1 {

                              font-weight: bold;
                              margin: 0 0 1em 0;
                              padding: .25em .5em;
                              background-color: #ccc;

                          }

                          #productsandservices {

                              margin: 0 0 10px 0;
                        
                          }
               
               
              body {
                  margin:0;
                  padding:0;
              }
              #toggle {
                  text-align: center;
               
              }
              #toggle a {
                  padding: 0 5px;
                  border-left: 1px solid black;
              }
              #tRight {
                  border-left: none !important;
              }
              .yui-layout-unit-left {
              z-index: 1;
              overflow: visible;
              }
              .yui-layout-unit-top {
              z-index: 1;
              overflow: visible;
              }
              .yui-layout-unit-left div.yui-layout-bd {
              overflow: visible;
              }
              </style>
              <link rel="stylesheet" type="text/css" href="yuii/reset-fonts-grids/reset-fonts-grids.css" />
              <link rel="stylesheet" type="text/css" href="yuii/resize/assets/skins/sam/resize.css" />
              <link rel="stylesheet" type="text/css" href="yuii/layout/assets/skins/sam/layout.css" />
              <link rel="stylesheet" type="text/css" href="yuii/button/assets/skins/sam/button.css" />
              <link rel="stylesheet" type="text/css" href="yuii/menu/assets/skins/sam/menu.css">
              <script type="text/javascript" src="yuii/yahoo/yahoo-min.js"></script>
              <script type="text/javascript" src="yuii/event/event-min.js"></script>
              <script type="text/javascript" src="yuii/dom/dom-min.js"></script>

              <script type="text/javascript" src="yuii/element/element-beta-min.js"></script>
              <script type="text/javascript" src="yuii/dragdrop/dragdrop-min.js"></script>
              <script type="text/javascript" src="yuii/resize/resize-beta-min.js"></script>
              <script type="text/javascript" src="yuii/animation/animation-min.js"></script>
              <script type="text/javascript" src="yuii/layout/layout-beta-min.js"></script>

              <script type="text/javascript" src="yuii/animation/animation.js"></script>
              <script type="text/javascript" src="yuii/container/container_core.js"></script>
              <script type="text/javascript" src="yuii/menu/menu.js"></script>

              </head>

              <body class=" yui-skin-sam">
              <div id="top1">
                  <div id="productsandservices"></div>
              </div>



              <div id="bottom1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p></div>
              <div id="right1">
                  <b>Right 1</b>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
              </div>
              <div id="left1">
                  <p>Lorem sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

              </div>
              <div id="center1">
                  <p id="toggle"><a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a><a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a></p>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
              </div>


              <script>

              (function() {
                  var Dom = YAHOO.util.Dom,
                      Event = YAHOO.util.Event;

                  Event.onDOMReady(function() {
                      var layout = new YAHOO.widget.Layout({
                          units: [
                              { position: 'top', height: 80, body: 'top1'},
                              { position: 'right',width: 300,  body: 'right1' },
                              { position: 'bottom', height: 50, body: 'bottom1' },
                              { position: 'left', width: 300, body: 'left1',  },
                              { position: 'center', body: 'center1' }
                          ]
                      });
                   
                      layout.on('render', function() {
                          productsMenu();
                     });
                     layout.render();
                    
                    
                   
                  });


              })();
              </script>


              <script type="text/javascript">

                          /*
                               Initialize and render the MenuBar when its elements are ready
                               to be scripted.
                          */

              function productsMenu(){

                              /*
                                   Instantiate a MenuBar:  The first argument passed to the
                                   constructor is the id of the element in the page
                                   representing the MenuBar; the second is an object literal
                                   of configuration properties.
                              */

                              var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
                                                                          autosubmenudisplay: true,
                                                                          hidedelay: 750,
                                                                          lazyload: false });
                                                                        
                           

                              /*
                                   Define an array of object literals, each containing
                                   the data necessary to create a submenu.
                              */

                              var aSubmenuData = [
                            
                                  {
                                      id: "communication",
                                      itemdata: [
                                          { text: "360", url: "http://360.yahoo.com" },
                                          { text: "Alerts", url: "http://alerts.yahoo.com" },
                                          { text: "Avatars", url: "http://avatars.yahoo.com" },
                                          { text: "Groups", url: "http://groups.yahoo.com " },
                                          { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                                          {
                                              text: "PIM",
                                              submenu: {
                                                          id: "pim",
                                                          itemdata: [
                                                              { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                                                              { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                                                              { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                                                              { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                                                          ]
                                                      }
                                        
                                          },
                                          { text: "Member Directory", url: "http://members.yahoo.com" },
                                          { text: "Messenger", url: "http://messenger.yahoo.com" },
                                          { text: "Mobile", url: "http://mobile.yahoo.com" },
                                          { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
                                      ]
                                  },

                                  {
                                      id: "shopping",
                                      itemdata: [
                                          { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                                          { text: "Autos", url: "http://autos.yahoo.com" },
                                          { text: "Classifieds", url: "http://classifieds.yahoo.com" },
                                          { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                                          { text: "Real Estate", url: "http://realestate.yahoo.com" },
                                          { text: "Travel", url: "http://travel.yahoo.com" },
                                          { text: "Wallet", url: "http://wallet.yahoo.com" },
                                          { text: "Yellow Pages", url: "http://yp.yahoo.com" }                  
                                      ]  
                                  },
                                
                                  {
                                      id: "entertainment",
                                      itemdata: [
                                          { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                                          { text: "Games", url: "http://games.yahoo.com" },
                                          { text: "Kids", url: "http://www.yahooligans.com" },
                                          { text: "Music", url: "http://music.yahoo.com" },
                                          { text: "Movies", url: "http://movies.yahoo.com" },
                                          { text: "Radio", url: "http://music.yahoo.com/launchcast" },
                                          { text: "Travel", url: "http://travel.yahoo.com" },
                                          { text: "TV", url: "http://tv.yahoo.com" }            
                                      ]
                                  },
                                
                                  {
                                      id: "information",
                                      itemdata: [
                                          { text: "Downloads", url: "http://downloads.yahoo.com" },
                                          { text: "Finance", url: "http://finance.yahoo.com" },
                                          { text: "Health", url: "http://health.yahoo.com" },
                                          { text: "Local", url: "http://local.yahoo.com" },
                                          { text: "Maps & Directions", url: "http://maps.yahoo.com" },
                                          { text: "My Yahoo!", url: "http://my.yahoo.com" },
                                          { text: "News", url: "http://news.yahoo.com" },
                                          { text: "Search", url: "http://search.yahoo.com" },
                                          { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                                          { text: "Weather", url: "http://weather.yahoo.com" }
                                      ]
                                  }                  
                              ];


                              var ua = YAHOO.env.ua,
                                  oAnim;  // Animation instance


                              /*
                                   "beforeshow" event handler for each submenu of the MenuBar
                                   instance, used to setup certain style properties before
                                   the menu is animated.
                              */

                              function onSubmenuBeforeShow(p_sType, p_sArgs) {

                                  var oBody,
                                      oElement,
                                      oShadow,
                                      oUL;
                            

                                  if (this.parent) {

                                      oElement = this.element;

                                      /*
                                           Get a reference to the Menu's shadow element and
                                           set its "height" property to "0px" to syncronize
                                           it with the height of the Menu instance.
                                      */

                                      oShadow = oElement.lastChild;
                                      oShadow.style.height = "0px";

                                    
                                      /*
                                          Stop the Animation instance if it is currently
                                          animating a Menu.
                                      */
                                
                                      if (oAnim && oAnim.isAnimated()) {
                                    
                                          oAnim.stop();
                                          oAnim = null;
                                    
                                      }


                                      /*
                                          Set the body element's "overflow" property to
                                          "hidden" to clip the display of its negatively
                                          positioned <ul> element.
                                      */

                                      oBody = this.body;


                                      //  Check if the menu is a submenu of a submenu.

                                      if (this.parent &&
                                          !(this.parent instanceof YAHOO.widget.MenuBarItem)) {
                                    

                                          /*
                                              There is a bug in gecko-based browsers where
                                              an element whose "position" property is set to
                                              "absolute" and "overflow" property is set to
                                              "hidden" will not render at the correct width when
                                              its offsetParent's "position" property is also
                                              set to "absolute."  It is possible to work around
                                              this bug by specifying a value for the width
                                              property in addition to overflow.
                                          */

                                          if (ua.gecko) {
                                        
                                              oBody.style.width = oBody.clientWidth + "px";
                                        
                                          }
                                        
                                        
                                          /*
                                              Set a width on the submenu to prevent its
                                              width from growing when the animation
                                              is complete.
                                          */
                                        
                                          if (ua.ie == 7) {

                                              oElement.style.width = oElement.clientWidth + "px";

                                          }
                                    
                                      }

                
                                      oBody.style.overflow = "hidden";


                                      /*
                                          Set the <ul> element's "marginTop" property
                                          to a negative value so that the Menu's height
                                          collapses.
                                      */

                                      oUL = oBody.getElementsByTagName("ul")[0];

                                      oUL.style.marginTop = ("-" + oUL.offsetHeight + "px");
                                
                                  }

                              }


                              /*
                                  "tween" event handler for the Anim instance, used to
                                  syncronize the size and position of the Menu instance's
                                  shadow and iframe shim (if it exists) with its
                                  changing height.
                              */

                              function onTween(p_sType, p_aArgs, p_oShadow) {

                                  if (this.cfg.getProperty("iframe")) {
                                
                                      this.syncIframe();
                            
                                  }
                            
                                  if (p_oShadow) {
                            
                                      p_oShadow.style.height = this.element.offsetHeight + "px";
                                
                                  }
                            
                              }


                              /*
                                  "complete" event handler for the Anim instance, used to
                                  remove style properties that were animated so that the
                                  Menu instance can be displayed at its final height.
                              */

                              function onAnimationComplete(p_sType, p_aArgs, p_oShadow) {

                                  var oBody = this.body,
                                      oUL = oBody.getElementsByTagName("ul")[0];

                                  if (p_oShadow) {
                                
                                      p_oShadow.style.height = this.element.offsetHeight + "px";
                                
                                  }


                                  oUL.style.marginTop = "";
                                  oBody.style.overflow = "";
                                

                                  //  Check if the menu is a submenu of a submenu.

                                  if (this.parent &&
                                      !(this.parent instanceof YAHOO.widget.MenuBarItem)) {


                                      // Clear widths set by the "beforeshow" event handler

                                      if (ua.gecko) {
                                    
                                          oBody.style.width = "";
                                    
                                      }
                                    
                                      if (ua.ie == 7) {

                                          this.element.style.width = "";

                                      }
                                
                                  }
                                
                              }


                              /*
                                   "show" event handler for each submenu of the MenuBar
                                   instance - used to kick off the animation of the
                                   <ul> element.
                              */

                              function onSubmenuShow(p_sType, p_sArgs) {

                                  var oElement,
                                      oShadow,
                                      oUL;
                            
                                  if (this.parent) {

                                      oElement = this.element;
                                      oShadow = oElement.lastChild;
                                      oUL = this.body.getElementsByTagName("ul")[0];
                                

                                      /*
                                           Animate the <ul> element's "marginTop" style
                                           property to a value of 0.
                                      */

                                      oAnim = new YAHOO.util.Anim(oUL,
                                          { marginTop: { to: 0 } },
                                          .5, YAHOO.util.Easing.easeOut);


                                      oAnim.onStart.subscribe(function () {
                    
                                          oShadow.style.height = "100%";
                                    
                                      });
                

                                      oAnim.animate();

                
                                      /*
                                          Subscribe to the Anim instance's "tween" event for
                                          IE to syncronize the size and position of a
                                          submenu's shadow and iframe shim (if it exists)
                                          with its changing height.
                                      */
                
                                      if (YAHOO.env.ua.ie) {
                                        
                                          oShadow.style.height = oElement.offsetHeight + "px";


                                          /*
                                              Subscribe to the Anim instance's "tween"
                                              event, passing a reference Menu's shadow
                                              element and making the scope of the event
                                              listener the Menu instance.
                                          */

                                          oAnim.onTween.subscribe(onTween, oShadow, this);
                
                                      }
                

                                      /*
                                          Subscribe to the Anim instance's "complete" event,
                                          passing a reference Menu's shadow element and making
                                          the scope of the event listener the Menu instance.
                                      */
                
                                      oAnim.onComplete.subscribe(onAnimationComplete, oShadow, this);
                                
                                  }
                            
                              }


                              /*
                                   Subscribe to the "beforerender" event, adding a submenu
                                   to each of the items in the MenuBar instance.
                              */

                              oMenuBar.subscribe("beforeRender", function () {

                                  if (this.getRoot() == this) {

                                      this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
                                      this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
                                      this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
                                      this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

                                  }

                              });


                              /*
                                   Subscribe to the "beforeShow" and "show" events for
                            &n

              (Message over 64 KB, truncated)
            • Dav Glass
              Francis -- Here is a working example: http://blog.davglass.com/files/yui/layout8/ Hope that helps :) Dav Dav Glass dav.glass@yahoo.com blog.davglass.com +
              Message 6 of 6 , Apr 2, 2008
              • 0 Attachment
                Francis --

                Here is a working example:
                http://blog.davglass.com/files/yui/layout8/

                Hope that helps :)
                Dav
                 
                Dav Glass
                dav.glass@...
                blog.davglass.com



                + Windows: n. - The most successful computer virus, ever. +
                + A computer without a Microsoft operating system is like a dog
                without bricks tied to its head +
                + A Microsoft Certified Systems Engineer is to computing what a
                McDonalds Certified Food Specialist is to fine cuisine +


                ----- Original Message ----
                From: Francis Amanfo <famanfo@...>
                To: ydn-javascript@yahoogroups.com
                Sent: Wednesday, April 2, 2008 6:19:07 AM
                Subject: Re: [ydn-javascript] LayoutManager and Menu

                Hi Dav,

                Thanks so far for your responses. I've modified the code as you instructed but still no luck.

                Here is it:


                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                <html>
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
                <title>Full Page Layout - Example</title>
                <style type="text/css">
                /*margin and padding on body element
                  can introduce errors in determining
                  element position and are not recommended;
                  we turn them off as a foundation for YUI
                  CSS treatments. */
                 
                  div.yui-b p {
                          
                                margin: 0 0 .5em 0;
                                color: #999;
                          
                            }
                          
                            div.yui-b p strong {
                          
                                font-weight: bold;
                                color: #000;
                          
                            }
                          
                            div.yui-b p em {

                                color: #000;
                          
                            }          
                          
                            h1 {

                                font-weight: bold;
                                margin: 0 0 1em 0;
                                padding: .25em .5em;
                                background-color: #ccc;

                            }

                            #productsandservices {

                                margin: 0 0 10px 0;
                          
                            }
                 
                 
                body {
                    margin:0;
                    padding:0;
                }
                #toggle {
                    text-align: center;
                 
                }
                #toggle a {
                    padding: 0 5px;
                    border-left: 1px solid black;
                }
                #tRight {
                    border-left: none !important;
                }
                .yui-layout-unit-left {
                z-index: 1;
                overflow: visible;
                }
                .yui-layout-unit-top {
                z-index: 1;
                overflow: visible;
                }
                .yui-layout-unit-left div.yui-layout-bd {
                overflow: visible;
                }
                </style>
                <link rel="stylesheet" type="text/css" href="yuii/reset-fonts-grids/reset-fonts-grids.css" />
                <link rel="stylesheet" type="text/css" href="yuii/resize/assets/skins/sam/resize.css" />
                <link rel="stylesheet" type="text/css" href="yuii/layout/assets/skins/sam/layout.css" />
                <link rel="stylesheet" type="text/css" href="yuii/button/assets/skins/sam/button.css" />
                <link rel="stylesheet" type="text/css" href="yuii/menu/assets/skins/sam/menu.css">
                <script type="text/javascript" src="yuii/yahoo/yahoo-min.js"></script>
                <script type="text/javascript" src="yuii/event/event-min.js"></script>
                <script type="text/javascript" src="yuii/dom/dom-min.js"></script>

                <script type="text/javascript" src="yuii/element/element-beta-min.js"></script>
                <script type="text/javascript" src="yuii/dragdrop/dragdrop-min.js"></script>
                <script type="text/javascript" src="yuii/resize/resize-beta-min.js"></script>
                <script type="text/javascript" src="yuii/animation/animation-min.js"></script>
                <script type="text/javascript" src="yuii/layout/layout-beta-min.js"></script>

                <script type="text/javascript" src="yuii/animation/animation.js"></script>
                <script type="text/javascript" src="yuii/container/container_core.js"></script>
                <script type="text/javascript" src="yuii/menu/menu.js"></script>

                </head>

                <body class=" yui-skin-sam">
                <div id="top1">
                    <div id="productsandservices"></div>
                </div>



                <div id="bottom1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p></div>
                <div id="right1">
                    <b>Right 1</b>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                </div>
                <div id="left1">
                    <p>Lorem sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

                </div>
                <div id="center1">
                    <p id="toggle"><a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a><a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a></p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
                </div>


                <script>

                (function() {
                    var Dom = YAHOO.util.Dom,
                        Event = YAHOO.util.Event;

                    Event.onDOMReady(function() {
                        var layout = new YAHOO.widget.Layout({
                            units: [
                                { position: 'top', height: 80, body: 'top1'},
                                { position: 'right',width: 300,  body: 'right1' },
                                { position: 'bottom', height: 50, body: 'bottom1' },
                                { position: 'left', width: 300, body: 'left1',  },
                                { position: 'center', body: 'center1' }
                            ]
                        });
                     
                        layout.on('render', function() {
                            productsMenu();
                       });
                       layout.render();
                      
                      
                     
                    });


                })();
                </script>


                <script type="text/javascript">

                            /*
                                 Initialize and render the MenuBar when its elements are ready
                                 to be scripted.
                            */

                function productsMenu(){

                                /*
                                     Instantiate a MenuBar:  The first argument passed to the
                                     constructor is the id of the element in the page
                                     representing the MenuBar; the second is an object literal
                                     of configuration properties.
                                */

                                var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
                                                                            autosubmenudisplay: true,
                                                                            hidedelay: 750,
                                                                            lazyload: false });
                                                                          
                             

                                /*
                                     Define an array of object literals, each containing
                                     the data necessary to create a submenu.
                                */

                                var aSubmenuData = [
                              
                                    {
                                        id: "communication",
                                        itemdata: [
                                            { text: "360", url: "http://360.yahoo.com" },
                                            { text: "Alerts", url: "http://alerts.yahoo.com" },
                                            { text: "Avatars", url: "http://avatars.yahoo.com" },
                                            { text: "Groups", url: "http://groups.yahoo.com " },
                                            { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                                            {
                                                text: "PIM",
                                                submenu: {
                                                            id: "pim",
                                                            itemdata: [
                                                                { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                                                                { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                                                                { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                                                                { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                                                            ]
                                                        }
                                          
                                            },
                                            { text: "Member Directory", url: "http://members.yahoo.com" },
                                            { text: "Messenger", url: "http://messenger.yahoo.com" },
                                            { text: "Mobile", url: "http://mobile.yahoo.com" },
                                            { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
                                        ]
                                    },

                                    {
                                        id: "shopping",
                                        itemdata: [
                                            { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                                            { text: "Autos", url: "http://autos.yahoo.com" },
                                            { text: "Classifieds", url: "http://classifieds.yahoo.com" },
                                            { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                                            { text: "Real Estate", url: "http://realestate.yahoo.com" },
                                            { text: "Travel", url: "http://travel.yahoo.com" },
                                            { text: "Wallet", url: "http://wallet.yahoo.com" },
                                            { text: "Yellow Pages", url: "http://yp.yahoo.com" }                  
                                        ]  
                                    },
                                  
                                    {
                                        id: "entertainment",
                                        itemdata: [
                                            { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                                            { text: "Games", url: "http://games.yahoo.com" },
                                            { text: "Kids", url: "http://www.yahooligans.com" },
                                            { text: "Music", url: "http://music.yahoo.com" },
                                            { text: "Movies", url: "http://movies.yahoo.com" },
                                            { text: "Radio", url: "http://music.yahoo.com/launchcast" },
                                            { text: "Travel", url: "http://travel.yahoo.com" },
                                            { text: "TV", url: "http://tv.yahoo.com" }            
                                        ]
                                    },
                                  
                                    {
                                        id: "information",
                                        itemdata: [
                                            { text: "Downloads", url: "http://downloads.yahoo.com" },
                                            { text: "Finance", url: "http://finance.yahoo.com" },
                                            { text: "Health", url: "http://health.yahoo.com" },
                                            { text: "Local", url: "http://local.yahoo.com" },
                                            { text: "Maps & Directions", url: "http://maps.yahoo.com" },
                                            { text: "My Yahoo!", url: "http://my.yahoo.com" },
                                            { text: "News", url: "http://news.yahoo.com" },
                                            { text: "Search", url: "http://search.yahoo.com" },
                                            { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                                            { text: "Weather", url: "http://weather.yahoo.com" }
                                        ]
                                    }                  
                                ];


                                var ua = YAHOO.env.ua,
                                    oAnim;  // Animation instance


                                /*
                                     "beforeshow" event handler for each submenu of the MenuBar
                                     instance, used to setup certain style properties before
                                     the menu is animated.
                                */

                                function onSubmenuBeforeShow(p_sType, p_sArgs) {

                                    var oBody,
                                        oElement,
                                        oShadow,
                                        oUL;
                              

                                    if (this.parent) {

                                        oElement = this.element;

                                        /*
                                             Get a reference to the Menu's shadow element and
                                             set its "height" property to "0px" to syncronize
                                             it with the height of the Menu instance.
                                        */

                                        oShadow = oElement.lastChild;
                                        oShadow.style.height = "0px";

                                      
                                        /*
                                            Stop the Animation instance if it is currently
                                            animating a Menu.
                                        */
                                  
                                        if (oAnim && oAnim.isAnimated()) {
                                      
                                            oAnim.stop();
                                            oAnim = null;
                                      
                                        }


                                        /*
                                            Set the body element's "overflow" property to
                                            "hidden" to clip the display of its negatively
                                            positioned <ul> element.
                                        */

                                        oBody = this.body;


                                        //  Check if the menu is a submenu of a submenu.

                                        if (this.parent &&
                                            !(this.parent instanceof YAHOO.widget.MenuBarItem)) {
                                      

                                            /*
                                                There is a bug in gecko-based browsers where
                                                an element whose "position" property is set to
                                                "absolute" and "overflow" property is set to
                                                "hidden" will not render at the correct width when
                                                its offsetParent's "position" property is also
                                                set to "absolute."  It is possible to work around
                                                this bug by specifying a value for the width
                                                property in addition to overflow.
                                            */

                                            if (ua.gecko) {
                                          
                                                oBody.style.width = oBody.clientWidth + "px";
                                          
                                            }
                                          
                                          
                                            /*
                                                Set a width on the submenu to prevent its
                                                width from growing when the animation
                                                is complete.
                                            */
                                          
                                            if (ua.ie == 7) {

                                                oElement.style.width = oElement.clientWidth + "px";

                                            }
                                      
                                        }

                  
                                        oBody.style.overflow = "hidden";


                                        /*
                                            Set the <ul> element's "marginTop" property
                                            to a negative value so that the Menu's height
                                            collapses.
                                        */

                                        oUL = oBody.getElementsByTagName("ul")[0];

                                        oUL.style.marginTop = ("-" + oUL.offsetHeight + "px");
                                  
                                    }

                                }


                                /*
                                    "tween" event handler for the Anim instance, used to
                                    syncronize the size and position of the Menu instance's
                                    shadow and iframe shim (if it exists) with its
                                    changing height.
                                */

                                function onTween(p_sType, p_aArgs, p_oShadow) {

                                    if (this.cfg.getProperty("iframe")) {
                                  
                                        this.syncIframe();
                              
                                    }
                              
                                    if (p_oShadow) {
                              
                                        p_oShadow.style.height = this.element.offsetHeight + "px";
                                  
                                    }
                              
                                }


                                /*
                                    "complete" event handler for the Anim instance, used to
                                    remove style properties that were animated so that the
                                    Menu instance can be displayed at its final height.
                                */

                                function onAnimationComplete(p_sType, p_aArgs, p_oShadow) {

                                    var oBody = this.body,
                                        oUL = oBody.getElementsByTagName("ul")[0];

                                    if (p_oShadow) {
                                  
                                        p_oShadow.style.height = this.element.offsetHeight + "px";
                                  
                                    }


                                    oUL.style.marginTop = "";
                                    oBody.style.overflow = "";
                                  

                                    //  Check if the menu is a submenu of a submenu.

                                    if (this.parent &&
                                        !(this.parent instanceof YAHOO.widget.MenuBarItem)) {


                                        // Clear widths set by the "beforeshow" event handler

                                        if (ua.gecko) {
                                      
                                            oBody.style.width = "";
                                      
                                        }
                                      
                                        if (ua.ie == 7) {

                                            this.element.style.width = "";

                                        }
                                  
                                    }
                                  
                                }


                                /*
                                     "show" event handler for each submenu of the MenuBar
                                     instance - used to kick off the animation of the
                                     <ul> element.
                                */

                                function onSubmenuShow(p_sType, p_sArgs) {

                                    var oElement,
                                        oShadow,
                                        oUL;
                              
                                    if (this.parent) {

                                        oElement = this.element;
                                        oShadow = oElement.lastChild;
                                        oUL = this.body.getElementsByTagName("ul")[0];
                                  

                                        /*
                                             Animate the <ul> element's "marginTop" style
                                             property to a value of 0.
                                        */

                                        oAnim = new YAHOO.util.Anim(oUL,
                                            { marginTop: { to: 0 } },
                                            .5, YAHOO.util.Easing.easeOut);


                                        oAnim.onStart.subscribe(function () {
                      
                                            oShadow.style.height = "100%";
                                      
                                        });
                  

                                        oAnim.animate();

                  
                                        /*
                                            Subscribe to the Anim instance's "tween" event for
                                            IE to syncronize the size and position of a
                                            submenu's shadow and iframe shim (if it exists)
                                            with its changing height.
                                        */
                  
                                        if (YAHOO.env.ua.ie) {
                                          
                                            oShadow.style.height = oElement.offsetHeight + "px";


                                            /*
                                                Subscribe to the Anim instance's "tween"
                                                event, passing a reference Menu's shadow
                                                element and making the scope of the event
                                                listener the Menu instance.
                                            */

                                            oAnim.onTween.subscribe(onTween, oShadow, this);
                  
                                        }
                  

                                        /*
                                            Subscribe to the Anim instance's "complete" event,
                                            passing a reference Menu's shadow element and making
                                            the scope of the event listener the Menu instance.
                                        */
                  
                                        oAnim.onComplete.subscribe(onAnimationComplete, oShadow, this);
                                  
                                    }
                              
                                }


                                /*
                                     Subscribe to the "beforerender" event, adding a submenu
                                     to each of the items in the MenuBar instance.
                                */

                                oMenuBar.subscribe("beforeRender", function () {

                                    if (this.getRoot() == this) {

                                        this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
                                        this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
                                       

                (Message over 64 KB, truncated)
              Your message has been successfully submitted and would be delivered to recipients shortly.