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

Module content is not visible?

Expand Messages
  • Alan Pinstein
    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
    Message 1 of 6 , Jan 30, 2007
    • 0 Attachment
      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
      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
      Message 2 of 6 , Jan 31, 2007
      • 0 Attachment
        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:


        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


      • 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 3 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 4 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 5 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 6 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.