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

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

Expand Messages
  • 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 1 of 3 , Jan 1, 2009
    • 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 2 of 3 , Jan 1, 2009
      • 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.