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

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

Expand Messages
  • 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 1 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 2 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 3 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 4 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 5 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.