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

Menu in document flow

Expand Messages
  • rootstones
    I m trying to place a menubar into the document flow. I created a div in which I want the menu to be placed. The problem is that I can t seems to get it to
    Message 1 of 3 , Sep 28, 2006
      I'm trying to place a menubar into the document flow. I created a div
      in which I want the menu to be placed. The problem is that I can't
      seems to get it to work. The menubar is created from javascript
      without any markup. This is in my HTML:

      <div id="doc">
      <div id="hd">Header<><div id="menu"></div></div>
      <div id="bd">

      <div id="yui-main">
      <div class="yui-b">
      <div class="yui-g">
      <div class="yui-u first">
      test2
      </div>

      <div class="yui-u">
      test3
      </div>
      </div>
      </div>
      </div>

      </div>
      <div id="ft"></div>
      </div>

      I tried this (within the menu code, that I paste into the document):
      var oMenuBar = new YAHOO.widget.MenuBar("menu", { position: "static" } );

      And also tried:
      oMenuBar.render(); instead of oMenuBar.render(document.body);

      And even: oMenuBar.render(document.getElementById(this.id)); when I
      pasted the menu code within script tags within the menu div.

      Nothing works. Could someone please tell me how to get the menubar
      into the document flow? And does it matter that I paste the javascript
      code into the menu div, or somewhere elkse within the body?

      Thanks in advance!
    • Todd Kloots
      rootstones - If you are building your menu bar completely from script, the id that you pass to the MenuBar constructor is the id of the element that you want
      Message 2 of 3 , Sep 28, 2006
        "rootstones" -

        If you are building your menu bar completely from script, the id that you pass to the MenuBar constructor is the id of the element that you want to create. When you call the "render" method, you'll pass in the and id or element reference for a node that the menu bar should be appended into. The problem with your code appears to be that you are passing the same id to both the MenuBar constructor and the call to "render." Lastly, MenuBar is positioned statically by default, so there is no need for you to pass that configuration into the constructor. Your code should look something like this:

        var oMenuBar = new YAHOO.widget.MenuBar( [ the element id for your menu's root node ] );

        oMenuBar.addItem("one");
        oMenuBar.addItem("one");
        oMenuBar.addItem("one");

        oMenuBar.render( [ the id of the element your menu should be rendered into ] )

        I hope that helps you.

        You might also want to take a look at the examples that use MenuBar:

        http://developer.yahoo.com/yui/examples/menu/applicationmenubar.html
        http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html
        http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html


        - Todd

        ----- Original Message ----
        From: rootstones <b.dohmen@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Thursday, September 28, 2006 4:17:55 AM
        Subject: [ydn-javascript] Menu in document flow


        I'm trying to place a menubar into the document flow. I created a div
        in which I want the menu to be placed. The problem is that I can't
        seems to get it to work. The menubar is created from javascript
        without any markup. This is in my HTML:

        <div id="doc">
        <div id="hd">Header<><div id="menu"></div></div>
        <div id="bd">

        <div id="yui-main">
        <div class="yui-b">
        <div class="yui-g">
        <div class="yui-u first">
        test2
        </div>

        <div class="yui-u">
        test3
        </div>
        </div>
        </div>
        </div>

        </div>
        <div id="ft"></div>
        </div>

        I tried this (within the menu code, that I paste into the document):
        var oMenuBar = new YAHOO.widget.MenuBar("menu", { position: "static" } );

        And also tried:
        oMenuBar.render(); instead of oMenuBar.render(document.body);

        And even: oMenuBar.render(document.getElementById(this.id)); when I
        pasted the menu code within script tags within the menu div.

        Nothing works. Could someone please tell me how to get the menubar
        into the document flow? And does it matter that I paste the javascript
        code into the menu div, or somewhere elkse within the body?

        Thanks in advance!







        Yahoo! Groups Links
      • rootstones
        Thank you very much, now I understand the difference between the element id used in the constructor and the one in the render method. That was where I made the
        Message 3 of 3 , Sep 29, 2006
          Thank you very much, now I understand the difference between the
          element id used in the constructor and the one in the render method.
          That was where I made the error. All works now, thank you!


          --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
          >
          > "rootstones" -
          >
          > If you are building your menu bar completely from script, the id
          that you pass to the MenuBar constructor is the id of the element that
          you want to create. When you call the "render" method, you'll pass in
          the and id or element reference for a node that the menu bar should be
          appended into. The problem with your code appears to be that you are
          passing the same id to both the MenuBar constructor and the call to
          "render." Lastly, MenuBar is positioned statically by default, so
          there is no need for you to pass that configuration into the
          constructor. Your code should look something like this:
          >
          > var oMenuBar = new YAHOO.widget.MenuBar( [ the element id for your
          menu's root node ] );
          >
          > oMenuBar.addItem("one");
          > oMenuBar.addItem("one");
          > oMenuBar.addItem("one");
          >
          > oMenuBar.render( [ the id of the element your menu should be
          rendered into ] )
          >
          > I hope that helps you.
          >
          > You might also want to take a look at the examples that use MenuBar:
          >
          > http://developer.yahoo.com/yui/examples/menu/applicationmenubar.html
          > http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html
          > http://developer.yahoo.com/yui/examples/menu/topnavfromjs.html
          >
          >
          > - Todd
        Your message has been successfully submitted and would be delivered to recipients shortly.