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

Re: [ydn-javascript] Module content is not visible?

Expand Messages
  • Todd Kloots
    Alan - This is not a bug. The Module class is an inline content container and uses the CSS display property so that it doesn t take up any space in the
    Message 1 of 6 , Feb 1, 2007
    • 0 Attachment
      Alan -

      This is not a bug. The Module class is an inline
      content container and uses the CSS "display" property
      so that it doesn't take up any space in the document
      flow when hidden. Overlay is an absolutely positioned
      content container (meaning it is already out of the
      document flow) and that is why it is hidden via the
      CSS "visibility" property.

      - Todd

      --- Alan Pinstein <apinstein@...> wrote:

      > After playing with this a little more, I have found
      > a solution.
      >
      > I am not sure if this is a bug or not in YUI; if
      > someone can let me
      > know I can post a bug to sourceforge.
      >
      > Basically, Modules and the various Module subclasses
      > handle showing/
      > hiding the content in different ways.
      >
      > In Module, show/hide toggles display: block | none.
      > In Panel, Overlay, etc, show/hide toggles
      > visibility: visible | hidden.
      >
      > Thus, to make a module's content hidden until you
      > decide to render
      > it, you must do:
      >
      > <div id="module" style="display: none;">
      > <div class="hd"></div>
      > <div class="bd">This is a module. By default
      > modules have no
      > style; they are just blocks of content. <a href="#"
      >
      >
      onClick="PHOCOA.runtime.getObject('module').hide();">Hide
      > Module</a>
      > </div>
      > <div class="ft"></div>
      > </div>
      >
      > And to accomplish the same for a panel, you must do:
      >
      > <div id="overlay" style="display: none; visibility:
      > hidden;">
      > <div class="hd"></div>
      > <div class="bd">This is an overlay. By default
      > overlays have no
      > style; they are just absolutely positioned blocks of
      > content. <a
      > href="#"
      >
      onClick="PHOCOA.runtime.getObject('overlay').hide();">Hide
      >
      > Overlay</a>
      > </div>
      > <div class="ft"></div>
      > </div>
      >
      > combined with:
      >
      > var module = new
      > YAHOO.widget.Overlay("overlay");
      > module.cfg.queueProperty('visible', false);
      > module.cfg.queueProperty('monitorresize',
      > true);
      > module.render();
      > YAHOO.util.Dom.setStyle('overlay', 'display',
      > 'block'); // MAKE
      > CONTENT VISIBLE
      >
      > So, is this expected behavior or does it need to be
      > cleaned up?
      >
      > If you want to see it working in action, I have
      > posted the fixes to
      > my live samples page:
      >
      >
      http://phocoa.com/webapp/examples/ajax/container/container
      >
      > Thanks,
      > Alan
      >
      >
      >
      > On Jan 30, 2007, at 11:35 PM, Alan Pinstein wrote:
      >
      > > I am wrestling with a Module rendering issue. I am
      > writing a PHP
      > > framework that includes widgets for YUI controls,
      > and I am working on
      > > the Container classes.
      > >
      > > I am setting up the Module with existing markup:
      > >
      > > <div id="module" style="visibility: hidden;">
      > > <div class="hd"></div>
      > > <div class="bd">This is a module. By default
      > modules have no
      > > style; they are just blocks of content. <a
      > href="#"
      > >
      >
      onClick="PHOCOA.runtime.getObject('module').hide();">Hide
      > Module</a></
      > > div>
      > > <div class="ft"></div>
      > > </div>
      > >
      > > As per the YUI example for OverlayManager:
      > http://developer.yahoo.com/
      > > yui/examples/container/overlaymanager/1.html, I am
      > setting the
      > > visibility to hidden to prevent content from
      > "flashing" on screen
      > > before YUI has a chance to "hide" it.
      > >
      > > As you can see from the live code:
      > >
      > >
      >
      http://phocoa.com/webapp/examples/ajax/container/container
      > >
      > > When the "Module" is shown, the AREA for the
      > module is set up, but
      > > the content is still not visible.
      > >
      > > The Overlay and Panel subclasses use the exact
      > same code/setup, but
      > > they do appear correctly.
      > >
      > > If I simply remove the:
      > >
      > > style="visibility: hidden;"
      > >
      > > from the content setup, it shows up correctly, but
      > of course it also
      > > "flashes" briefly as the document loads. I have
      > tried using
      > > cfg.setProperty('visibility', true) and get the
      > same behavior.
      > >
      > > Is this a bug or am I doing something wrong?
      > >
      > > Thanks,
      > > Alan
      > >
      > >
      >
      >
    • Alan Pinstein
      Ah... I didn t realize that distinction between module and its subclasses. Makes perfect sense now how it works. However, it only makes sense to me now that
      Message 2 of 6 , Feb 2, 2007
      • 0 Attachment
        Ah... I didn't realize that distinction between module and its
        subclasses. Makes perfect sense now how it works.

        However, it only makes sense to me now that I've gone through
        figuring it out. I think most people using Containers would expect to
        be able to use the same techniques whether the item is a Module,
        Overlay, Panel, etc.

        So while you've convinced me that there is no programmatic bug, there
        are definitely some documentation issues.

        1) The "visible" property is documented as the the way to change
        between "display: block" and "display: none". However, that's true
        only for Modules. For all other subclasses, setting this property
        toggles "visibility: visible" and "visibility: hidden".

        2) Setting "initial" visibility (to prevent unwanted "flash" of
        rendered content with subclasses or "invisible block" for modules
        that should not be initially visible).

        Because of the differences in the way module and its subclasses are
        positioned, you have set up the initial markup differently depending
        on whether you are making a Module or one of its subclasses *from
        existing markup*.

        - To make a module's initial state be "hidden" set the style to
        "display: none".
        - To make a subclass's initial state be "hidden" set the style to
        "visibility: hidden".
        - At runtime, use show()/hide() or cfg.setProperty('visible', true/
        false) to edit the visibility.

        3) It'd be great if the Container docs explained directly somewhere
        that:

        - Modules are *inline* content (ie a normally positioned block)
        - All other subclasses are *floating* content (ie absolutely
        positioned blocks)

        While you can eventually infer this after you play with it a bit, it
        would save a lot of headache to know it up front.

        ------------

        Hopefully this will help others with these issues.

        I also have a Container effect question, but I'll post that in a
        separate thread.

        Alan


        On Feb 1, 2007, at 12:46 PM, Todd Kloots wrote:

        > Alan -
        >
        > This is not a bug. The Module class is an inline
        > content container and uses the CSS "display" property
        > so that it doesn't take up any space in the document
        > flow when hidden. Overlay is an absolutely positioned
        > content container (meaning it is already out of the
        > document flow) and that is why it is hidden via the
        > CSS "visibility" property.
        >
        > - Todd
        >
        > --- Alan Pinstein <apinstein@...> wrote:
        >
        >> After playing with this a little more, I have found
        >> a solution.
        >>
        >> I am not sure if this is a bug or not in YUI; if
        >> someone can let me
        >> know I can post a bug to sourceforge.
        >>
        >> Basically, Modules and the various Module subclasses
        >> handle showing/
        >> hiding the content in different ways.
        >>
        >> In Module, show/hide toggles display: block | none.
        >> In Panel, Overlay, etc, show/hide toggles
        >> visibility: visible | hidden.
        >>
        >> Thus, to make a module's content hidden until you
        >> decide to render
        >> it, you must do:
        >>
        >> <div id="module" style="display: none;">
        >> <div class="hd"></div>
        >> <div class="bd">This is a module. By default
        >> modules have no
        >> style; they are just blocks of content. <a href="#"
        >>
        >>
        > onClick="PHOCOA.runtime.getObject('module').hide();">Hide
        >> Module</a>
        >> </div>
        >> <div class="ft"></div>
        >> </div>
        >>
        >> And to accomplish the same for a panel, you must do:
        >>
        >> <div id="overlay" style="display: none; visibility:
        >> hidden;">
        >> <div class="hd"></div>
        >> <div class="bd">This is an overlay. By default
        >> overlays have no
        >> style; they are just absolutely positioned blocks of
        >> content. <a
        >> href="#"
        >>
        > onClick="PHOCOA.runtime.getObject('overlay').hide();">Hide
        >>
        >> Overlay</a>
        >> </div>
        >> <div class="ft"></div>
        >> </div>
        >>
        >> combined with:
        >>
        >> var module = new
        >> YAHOO.widget.Overlay("overlay");
        >> module.cfg.queueProperty('visible', false);
        >> module.cfg.queueProperty('monitorresize',
        >> true);
        >> module.render();
        >> YAHOO.util.Dom.setStyle('overlay', 'display',
        >> 'block'); // MAKE
        >> CONTENT VISIBLE
        >>
        >> So, is this expected behavior or does it need to be
        >> cleaned up?
        >>
        >> If you want to see it working in action, I have
        >> posted the fixes to
        >> my live samples page:
        >>
        >>
        > http://phocoa.com/webapp/examples/ajax/container/container
        >>
        >> Thanks,
        >> Alan
        >>
        >>
        >>
        >> On Jan 30, 2007, at 11:35 PM, Alan Pinstein wrote:
        >>
        >>> I am wrestling with a Module rendering issue. I am
        >> writing a PHP
        >>> framework that includes widgets for YUI controls,
        >> and I am working on
        >>> the Container classes.
        >>>
        >>> I am setting up the Module with existing markup:
        >>>
        >>> <div id="module" style="visibility: hidden;">
        >>> <div class="hd"></div>
        >>> <div class="bd">This is a module. By default
        >> modules have no
        >>> style; they are just blocks of content. <a
        >> href="#"
        >>>
        >>
        > onClick="PHOCOA.runtime.getObject('module').hide();">Hide
        >> Module</a></
        >>> div>
        >>> <div class="ft"></div>
        >>> </div>
        >>>
        >>> As per the YUI example for OverlayManager:
        >> http://developer.yahoo.com/
        >>> yui/examples/container/overlaymanager/1.html, I am
        >> setting the
        >>> visibility to hidden to prevent content from
        >> "flashing" on screen
        >>> before YUI has a chance to "hide" it.
        >>>
        >>> As you can see from the live code:
        >>>
        >>>
        >>
        > http://phocoa.com/webapp/examples/ajax/container/container
        >>>
        >>> When the "Module" is shown, the AREA for the
        >> module is set up, but
        >>> the content is still not visible.
        >>>
        >>> The Overlay and Panel subclasses use the exact
        >> same code/setup, but
        >>> they do appear correctly.
        >>>
        >>> If I simply remove the:
        >>>
        >>> style="visibility: hidden;"
        >>>
        >>> from the content setup, it shows up correctly, but
        >> of course it also
        >>> "flashes" briefly as the document loads. I have
        >> tried using
        >>> cfg.setProperty('visibility', true) and get the
        >> same behavior.
        >>>
        >>> Is this a bug or am I doing something wrong?
        >>>
        >>> Thanks,
        >>> Alan
        >>>
        >>>
        >>
        >>
        >
        >
        >
      • Charles
        Hello, Just confirming, if I want to create a custom widget I start with a Module? Is there a Module tutorial anywhere? I ll use the docs, of course, but they
        Message 3 of 6 , Feb 2, 2007
        • 0 Attachment
          Hello,

          Just confirming, if I want to create a custom widget I start with a Module?

          Is there a Module tutorial anywhere? I'll use the docs, of course, but they
          seemed a bit cryptic on first read.

          Thanks,

          -- Charles
        • Eric Miraglia
          Charles, There s no need to start with the Module Control for a custom widget unless it seems to suit your needs. It might make sense to read through the code
          Message 4 of 6 , Feb 3, 2007
          • 0 Attachment
            Charles,

            There's no need to start with the Module Control for a custom widget unless it seems to suit your needs.  It might make sense to read through the code from one of our most recent controls, TabView, to get a sense of how we see YUI's future UI controls being constructed.

            Regards,
            Eric


            ______________________________________________
            Eric Miraglia
            Yahoo! User Interface Library



            On Feb 2, 2007, at 1:49 PM, Charles wrote:

            Hello,

            Just confirming, if I want to create a custom widget I start with a Module?

            Is there a Module tutorial anywhere? I'll use the docs, of course, but they
            seemed a bit cryptic on first read.

            Thanks,

            -- Charles



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