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

Layout Manager sample code--Top layout covered by Left, Center, Right layouts

Expand Messages
  • cjavajim
    Regarding the sample code for the Layout Manager available here: http://developer.yahoo.com/yui/layout/ When I used that code essentially verbatim (shown
    Message 1 of 3 , Jan 1, 2009
    View Source
    • 0 Attachment
      Regarding the sample code for the Layout Manager available here:

      http://developer.yahoo.com/yui/layout/

      When I used that code essentially verbatim (shown below), the
      appearance in Firefox 2.0.0.20 and IE6 is unacceptable--and I'm not
      referring to the CSS aspect--I mean that the Top layout is covered by
      the Left, Center, and Right layouts. So my question is: why is the
      Layout Manager allowing this to occur?

      Note: this does not happen in the Examples at
      http://developer.yahoo.com/yui/examples/layout/index.html --just with
      the sample code on the Layout Manager page.

      Here's the code:

      <html>
      <head>
      <title>Layout Manager</title>

      <!-- This code was copied from: -->
      <!-- http://developer.yahoo.com/yui/layout/ -->

      <!-- Skin CSS files resize.css must load before layout.css -->
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/resize.css">
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/layout.css">
      <!-- Utility Dependencies -->
      <script
      src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

      <script
      src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>

      <script
      src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>

      <!-- Optional Animation Support-->
      <script
      src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>

      <!-- Optional Resize Support -->
      <script
      src="http://yui.yahooapis.com/2.6.0/build/resize/resize-min.js"></script>
      <!-- Source file for the Layout Manager -->
      <script
      src="http://yui.yahooapis.com/2.6.0/build/layout/layout-min.js"></script>

      </head>

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

      <!-- These <div> were added to the sample code -->
      <div id="top1"><p>This is the body of the Top</p></div>
      <div id="right1"><p>This is the body of the Right</p></div>
      <div id="bottom1"><p>This is the body of the Bottom</p></div>
      <div id="left1"><p>This is the body of the Left</p></div>
      <div id="center1"><p>This is the body of the Center</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: 50,
      resize: false,
      gutter: '5px',
      collapse: true,
      resize: true,
      body: 'top1' <!-- Added -->
      },
      {
      position: 'right',
      header: 'Right',
      width: 300,
      resize: true,
      gutter: '5px',
      footer: 'Footer',
      collapse: true,
      scroll: true,
      body: 'right1' <!-- Added -->
      },
      {
      position: 'bottom',
      header: 'Bottom',
      height: 100,
      resize: true,
      gutter: '5px',
      collapse: true,
      body: 'bottom1' <!-- Added -->
      },
      {
      position: 'left',
      header: 'Left',
      width: 200,
      resize: true,
      gutter: '5px',
      collapse: true,
      close: true,
      collapseSize: 50,
      scroll: true,
      body: 'left1' <!-- Added -->
      },
      {
      position: 'center',
      body: 'center1' <!-- Added -->
      }
      ]
      });
      layout.render();
      });
      })();

      </script>

      </body>
    • cjavajim
      ... E.T.A. A clarification: I tested the code in Firefox 2.0.0.20 and IE6 on Windows XP SP2 -- I did not test it with any other browser(s) or OS.
      Message 2 of 3 , Jan 1, 2009
      View Source
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "cjavajim" <cjavajim@...> wrote:
        >
        > Regarding the sample code for the Layout Manager available here:
        >
        > http://developer.yahoo.com/yui/layout/
        >
        > When I used that code essentially verbatim (shown below), the
        > appearance in Firefox 2.0.0.20 and IE6 is unacceptable--and I'm not
        > referring to the CSS aspect--I mean that the Top layout is covered by
        > the Left, Center, and Right layouts. So my question is: why is the
        > Layout Manager allowing this to occur?
        >

        <SNIP>

        E.T.A. A clarification: I tested the code in Firefox 2.0.0.20 and IE6
        on Windows XP SP2 -- I did not test it with any other browser(s) or OS.
      • Dav Glass
        Try including reset and fonts: Dav
        Message 3 of 3 , Jan 1, 2009
        View Source
        • 0 Attachment
          Try including reset and fonts:
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">

          Dav

          --
          Dav Glass
          davglass@...
          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  +


          On Thu, Jan 1, 2009 at 9:11 PM, cjavajim <cjavajim@...> wrote:

          Regarding the sample code for the Layout Manager available here:

          http://developer.yahoo.com/yui/layout/

          When I used that code essentially verbatim (shown below), the
          appearance in Firefox 2.0.0.20 and IE6 is unacceptable--and I'm not
          referring to the CSS aspect--I mean that the Top layout is covered by
          the Left, Center, and Right layouts. So my question is: why is the
          Layout Manager allowing this to occur?

          Note: this does not happen in the Examples at
          http://developer.yahoo.com/yui/examples/layout/index.html --just with
          the sample code on the Layout Manager page.

          Here's the code:

          <html>
          <head>
          <title>Layout Manager</title>

          <!-- This code was copied from: -->
          <!-- http://developer.yahoo.com/yui/layout/ -->

          <!-- Skin CSS files resize.css must load before layout.css -->
          <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/resize.css">
          <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/layout.css">
          <!-- Utility Dependencies -->
          <script
          src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

          <script
          src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>

          <script
          src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>

          <!-- Optional Animation Support-->
          <script
          src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>

          <!-- Optional Resize Support -->
          <script
          src="http://yui.yahooapis.com/2.6.0/build/resize/resize-min.js"></script>
          <!-- Source file for the Layout Manager -->
          <script
          src="http://yui.yahooapis.com/2.6.0/build/layout/layout-min.js"></script>

          </head>

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

          <!-- These <div> were added to the sample code -->
          <div id="top1"><p>This is the body of the Top</p></div>
          <div id="right1"><p>This is the body of the Right</p></div>
          <div id="bottom1"><p>This is the body of the Bottom</p></div>
          <div id="left1"><p>This is the body of the Left</p></div>
          <div id="center1"><p>This is the body of the Center</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: 50,
          resize: false,
          gutter: '5px',
          collapse: true,
          resize: true,
          body: 'top1' <!-- Added -->
          },
          {
          position: 'right',
          header: 'Right',
          width: 300,
          resize: true,
          gutter: '5px',
          footer: 'Footer',
          collapse: true,
          scroll: true,
          body: 'right1' <!-- Added -->
          },
          {
          position: 'bottom',
          header: 'Bottom',
          height: 100,
          resize: true,
          gutter: '5px',
          collapse: true,
          body: 'bottom1' <!-- Added -->
          },
          {
          position: 'left',
          header: 'Left',
          width: 200,
          resize: true,
          gutter: '5px',
          collapse: true,
          close: true,
          collapseSize: 50,
          scroll: true,
          body: 'left1' <!-- Added -->
          },
          {
          position: 'center',
          body: 'center1' <!-- Added -->
          }
          ]
          });
          layout.render();
          });
          })();

          </script>

          </body>


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