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

Re: Dialog on pages causes "ugly" load

Expand Messages
  • Frank Apap
    I was using visibility, then I switched to display:none, but then the popup never showed even after clicking. What did seem to work (and please let me know if
    Message 1 of 8 , Jul 3, 2007
    • 0 Attachment
      I was using visibility, then I switched to display:none, but then
      the popup never showed even after clicking. What did seem to work
      (and please let me know if there is a better way), is I set
      display:none; and then AFTER the JS .render() call I do:

      document.getElementById("HI1")style.display ="";

      Make sense?

      <scottanderson42@...> wrote:
      >
      > Frank,
      >
      > Are you using display:none or visibility: hidden to hide your
      dialogs?
      > Visibility: hidden does not affect page layout; the element will be
      > invisible but still take up the same amount of space. Display:
      none actually
      > "removes" it from the page.
      >
    • Scott Anderson
      module.show() only changes the visible property, not display; I m not sure why this is (someone who understands the functionality would be a better person to
      Message 2 of 8 , Jul 3, 2007
      • 0 Attachment
        module.show() only changes the visible property, not display; I'm not sure why this is (someone who understands the functionality would be a better person to answer). What you're doing now will certainly work, however.

        Regards,
        -scott

        On 7/3/07, Frank Apap <fsa3@...> wrote:

        I was using visibility, then I switched to display:none, but then
        the popup never showed even after clicking. What did seem to work
        (and please let me know if there is a better way), is I set
        display:none; and then AFTER the JS .render() call I do:

        document.getElementById("HI1")style.display ="";

        Make sense?

        <scottanderson42@...> wrote:
        >
        > Frank,
        >
        > Are you using display:none or visibility: hidden to hide your
        dialogs?
        > Visibility: hidden does not affect page layout; the element will be
        > invisible but still take up the same amount of space. Display:
        none actually
        > "removes" it from the page.
        >


      • safmah
        Actually, Scott, I ve peeked inside container.js and it is not true. Module has its configVisible defined as to switch between display:block and display: none
        Message 3 of 8 , Jul 17, 2007
        • 0 Attachment
          Actually, Scott, I've peeked inside container.js and it is not true.
          Module has its configVisible defined as to switch between
          display:block and display: none with show and hide.

          Franks initial problem however, is not the Module widget, but the
          Dialog widget, which inherits its configVisible from the Overlay
          widget. The Overlay widget doesn't have the same behaviour as the
          Module widget for its show and hide. It switches the visibility:
          hidden and visibility: inherit for its show and hide. I have the
          exactly same problem as Frank. My dialogs are on page load visible for
          a split second, and then hidden. This is very annoying and something I
          consider a bug.

          It would be great if some of the YUI developers could answer as to
          what might be causing this behaviour.


          --- In ydn-javascript@yahoogroups.com, "Scott Anderson"
          <scottanderson42@...> wrote:
          >
          > module.show() only changes the visible property, not display; I'm
          not sure
          > why this is (someone who understands the functionality would be a better
          > person to answer). What you're doing now will certainly work, however.
          >
          > Regards,
          > -scott
          >
          > On 7/3/07, Frank Apap <fsa3@...> wrote:
          > >
          > > I was using visibility, then I switched to display:none, but then
          > > the popup never showed even after clicking. What did seem to work
          > > (and please let me know if there is a better way), is I set
          > > display:none; and then AFTER the JS .render() call I do:
          > >
          > > document.getElementById("HI1")style.display ="";
          > >
          > > Make sense?
          > >
          > > <scottanderson42@> wrote:
          > > >
          > > > Frank,
          > > >
          > > > Are you using display:none or visibility: hidden to hide your
          > > dialogs?
          > > > Visibility: hidden does not affect page layout; the element will be
          > > > invisible but still take up the same amount of space. Display:
          > > none actually
          > > > "removes" it from the page.
          > > >
          > >
          > >
          > >
          >
        • Satyen Desai
          Hi Safmah, Frank Your visible for a split second / empty white space before redraw problem could probably be resolved by initializing the Dialog earlier in
          Message 4 of 8 , Jul 20, 2007
          • 0 Attachment
            Hi Safmah, Frank

            Your "visible for a split second"/"empty white space before redraw"
            problem could probably be resolved by initializing the Dialog
            earlier in the page lifecycle.

            Seems you maybe waiting on window load to initialize the Dialog. If
            so, doing it onDOMReady or onContentReady (or possibly onAvailable)
            should help.

            See http://developer.yahoo.com/yui/event/#onavailable for a
            description of these page lifecycle events.

            If not, please post back and we can look into alternate solutions.

            Regards,
            Satyen

            --- In ydn-javascript@yahoogroups.com, "safmah" <safmah@...> wrote:
            >
            > Actually, Scott, I've peeked inside container.js and it is not
            true.
            > Module has its configVisible defined as to switch between
            > display:block and display: none with show and hide.
            >
            > Franks initial problem however, is not the Module widget, but the
            > Dialog widget, which inherits its configVisible from the Overlay
            > widget. The Overlay widget doesn't have the same behaviour as the
            > Module widget for its show and hide. It switches the visibility:
            > hidden and visibility: inherit for its show and hide. I have the
            > exactly same problem as Frank. My dialogs are on page load visible
            for
            > a split second, and then hidden. This is very annoying and
            something I
            > consider a bug.
            >
            > It would be great if some of the YUI developers could answer as to
            > what might be causing this behaviour.
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "Scott Anderson"
            > <scottanderson42@> wrote:
            > >
            > > module.show() only changes the visible property, not display; I'm
            > not sure
            > > why this is (someone who understands the functionality would be
            a better
            > > person to answer). What you're doing now will certainly work,
            however.
            > >
            > > Regards,
            > > -scott
            > >
            > > On 7/3/07, Frank Apap <fsa3@> wrote:
            > > >
            > > > I was using visibility, then I switched to display:none, but
            then
            > > > the popup never showed even after clicking. What did seem to
            work
            > > > (and please let me know if there is a better way), is I set
            > > > display:none; and then AFTER the JS .render() call I do:
            > > >
            > > > document.getElementById("HI1")style.display ="";
            > > >
            > > > Make sense?
            > > >
            > > > <scottanderson42@> wrote:
            > > > >
            > > > > Frank,
            > > > >
            > > > > Are you using display:none or visibility: hidden to hide your
            > > > dialogs?
            > > > > Visibility: hidden does not affect page layout; the element
            will be
            > > > > invisible but still take up the same amount of space.
            Display:
            > > > none actually
            > > > > "removes" it from the page.
            > > > >
            > > >
            > > >
            > > >
            > >
            >
          • safmah
            I actually thought of the same thing. But it doesn t seem as the ondom, available etc methods really make any difference. If I alter the behaviour of the
            Message 5 of 8 , Jul 26, 2007
            • 0 Attachment
              I actually thought of the same thing. But it doesn't seem as
              the ondom, available etc methods really make any difference.

              If I "alter" the behaviour of the dialog (actually the configVisible
              overlay property, about line 1742 in container.js) so that it uses
              display: block/display: none instead
              of visibility, I get stable results. The dialogs are hidden until told
              otherwise. But the problem with this approach is that I haven't
              figured out a way to get the effects working - they only seem to be
              working with the visibility property

              Regards,
              Saf


              --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdezzi@...> wrote:
              >
              > Hi Safmah, Frank
              >
              > Your "visible for a split second"/"empty white space before redraw"
              > problem could probably be resolved by initializing the Dialog
              > earlier in the page lifecycle.
              >
              > Seems you maybe waiting on window load to initialize the Dialog. If
              > so, doing it onDOMReady or onContentReady (or possibly onAvailable)
              > should help.
              >
              > See http://developer.yahoo.com/yui/event/#onavailable for a
              > description of these page lifecycle events.
              >
              > If not, please post back and we can look into alternate solutions.
              >
              > Regards,
              > Satyen
              >
              > --- In ydn-javascript@yahoogroups.com, "safmah" <safmah@> wrote:
              > >
              > > Actually, Scott, I've peeked inside container.js and it is not
              > true.
              > > Module has its configVisible defined as to switch between
              > > display:block and display: none with show and hide.
              > >
              > > Franks initial problem however, is not the Module widget, but the
              > > Dialog widget, which inherits its configVisible from the Overlay
              > > widget. The Overlay widget doesn't have the same behaviour as the
              > > Module widget for its show and hide. It switches the visibility:
              > > hidden and visibility: inherit for its show and hide. I have the
              > > exactly same problem as Frank. My dialogs are on page load visible
              > for
              > > a split second, and then hidden. This is very annoying and
              > something I
              > > consider a bug.
              > >
              > > It would be great if some of the YUI developers could answer as to
              > > what might be causing this behaviour.
              > >
              > >
              > > --- In ydn-javascript@yahoogroups.com, "Scott Anderson"
              > > <scottanderson42@> wrote:
              > > >
              > > > module.show() only changes the visible property, not display; I'm
              > > not sure
              > > > why this is (someone who understands the functionality would be
              > a better
              > > > person to answer). What you're doing now will certainly work,
              > however.
              > > >
              > > > Regards,
              > > > -scott
              > > >
              > > > On 7/3/07, Frank Apap <fsa3@> wrote:
              > > > >
              > > > > I was using visibility, then I switched to display:none, but
              > then
              > > > > the popup never showed even after clicking. What did seem to
              > work
              > > > > (and please let me know if there is a better way), is I set
              > > > > display:none; and then AFTER the JS .render() call I do:
              > > > >
              > > > > document.getElementById("HI1")style.display ="";
              > > > >
              > > > > Make sense?
              > > > >
              > > > > <scottanderson42@> wrote:
              > > > > >
              > > > > > Frank,
              > > > > >
              > > > > > Are you using display:none or visibility: hidden to hide your
              > > > > dialogs?
              > > > > > Visibility: hidden does not affect page layout; the element
              > will be
              > > > > > invisible but still take up the same amount of space.
              > Display:
              > > > > none actually
              > > > > > "removes" it from the page.
              > > > > >
              > > > >
              > > > >
              > > > >
              > > >
              > >
              >
            • Satyen Desai
              Hi Saf, Which member of the container family are you seeing this on? I believe you mentioned Dialog, but I cannot seem to replicate the problem using it. Which
              Message 6 of 8 , Aug 1 10:32 AM
              • 0 Attachment
                Hi Saf,

                Which member of the container family are you seeing this on? I believe you mentioned Dialog, but I cannot seem to replicate the problem using it. Which version of YUI? Any particular browser?

                Using YUI 2.2.2, I do see the problem using Overlay with the following code. Overlay is displayed initially and fades out when the page is loads - I believe the "visible for a split second" you refer to. The rest of the container family seems to be fine (I did not test Tooltip).

                        <div id="c">
                            <div class="hd">Container Header</div>
                            <div class="bd">Container Body</div>
                            <div class="ft">Container Footer</div>
                        </div>

                        <script type="text/javascript">
                            YAHOO.util.Event.onDOMReady(function() {
                                // Or Module, Panel, Dialog, SimpleDialog
                                var c = new YAHOO.widget.Overlay("c", {
                                    visible:false,
                                    // Set the fade duration high, just to easily see the problem
                                    effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:3.00}
                                });
                                c.render();
                            });
                        </script>

                This problem in Overlay has been fixed in 2.3.0, and can be worked around in 2.2.2 by changing the code to this:

                        <div id="c">
                            <div class="hd">Container Header</div>
                            <div class="bd">Container Body</div>
                            <div class="ft">Container Footer</div>
                        </div>

                        <script type="text/javascript">
                            YAHOO.util.Event.onDOMReady(function() {
                                var c = new YAHOO.widget.Overlay("c", {
                                    visible:false,
                                });
                                c.render();
                                c.cfg.setProperty("effect",{effect:YAHOO.widget.ContainerEffect.FADE,duration:3.00});
                         });
                        </script>

                Can you post some of your code, if you continue to have problems with this?

                Hope this helps,
                Satyen

                PS: Animation is not supported on non-numerical attributes (like display) hence you don't see the effect applied when you changed "visibility" to "display" in the patch you posted.
              Your message has been successfully submitted and would be delivered to recipients shortly.