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

Dialog on pages causes "ugly" load

Expand Messages
  • Frank Apap
    Hi, I m noticing that on pages where I have dialogs (where the dialog itself is defined directly in the html) I can see the page initially render with the
    Message 1 of 8 , Jul 2 5:17 PM
    • 0 Attachment
      Hi,

      I'm noticing that on pages where I have dialogs (where the dialog
      itself is defined directly in the html) I can see the page initially
      render with the space for the dialog (although I don't see the dialog
      due to the css and THEN the page redraws itself correctly. Is there
      any way to avoid this?

      Thanks,
      Frank
    • Scott Anderson
      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
      Message 2 of 8 , Jul 3 7:03 AM
      • 0 Attachment
        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.

        Regards,
        -scott

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

        Hi,

        I'm noticing that on pages where I have dialogs (where the dialog
        itself is defined directly in the html) I can see the page initially
        render with the space for the dialog (although I don't see the dialog
        due to the css and THEN the page redraws itself correctly. Is there
        any way to avoid this?

        Thanks,
        Frank


      • 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 3 of 8 , Jul 3 7:39 AM
        • 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 4 of 8 , Jul 3 8:54 AM
          • 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 5 of 8 , Jul 17 4:23 AM
            • 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 6 of 8 , Jul 20 12:02 PM
              • 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 7 of 8 , Jul 26 6:57 AM
                • 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 8 of 8 , Aug 1, 2007
                  • 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.