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

Overlay that displays for a few seconds on page load

Expand Messages
  • james.vantslot
    Hi all, Looking for some hints on how to get an overlay to load on page load and then disappear after a few seconds. I have figured out how to get the Overlay
    Message 1 of 2 , Jul 1, 2008
    • 0 Attachment
      Hi all,

      Looking for some hints on how to get an overlay to load on page load and then disappear after a few seconds.

      I have figured out how to get the Overlay to display the way I want it.  I want it to display as a block in a specific location and not floating over the page using the beforeShowEvent and HideEvent events to set the div's display values.
      And I can test the display and hide using click events in a couple of the form fields:

      YAHOO.namespace("ores.container");
           
          YAHOO.util.Event.onDOMReady(function () {
              YAHOO.ores.container.module1 = new YAHOO.widget.Overlay("requiredInfo",
                                                      {visible:false,
                                                      effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration: .9}
                                                      }
                                                  );
              YAHOO.ores.container.module1.render();
             
              YAHOO.ores.container.module1.showDiv = function() {
                  YAHOO.util.Dom.setStyle('requiredInfo', 'display', 'block');
              }
             
              YAHOO.ores.container.module1.hideDiv = function() {
                  YAHOO.util.Dom.setStyle('requiredInfo', 'display', 'none');
              }
            
                 
              YAHOO.ores.container.module1.beforeShowEvent.subscribe(YAHOO.ores.container.module1.showDiv);
              YAHOO.ores.container.module1.hideEvent.subscribe(YAHOO.ores.container.module1.hideDiv);
             
              YAHOO.util.Event.addListener("fname", "click", YAHOO.ores.container.module1.show, YAHOO.ores.container.module1, true);
              YAHOO.util.Event.addListener("lname", "click", YAHOO.ores.container.module1.hide, YAHOO.ores.container.module1, true);

          });
         
      This works well to "fade" the div into view.  But I don't want to trigger the view and hide off of the click events of fields.  I want to have the div display for a few seconds when the page loads and then disappear

      Any ideas?

      Thanks!

      james
    • bretlevy
      Hi James: My suggestion would be to use a setTimeout() javascript call in your init code that triggers after a few seconds. The code triggered would hide
      Message 2 of 2 , Jul 2, 2008
      • 0 Attachment
        Hi James:

        My suggestion would be to use a setTimeout() javascript call in your
        init code that triggers after a few seconds. The code triggered
        would "hide" the loading panel.

        As an alternative, I have coded a loading display on a screen that I
        know will take a while to load into the "basic" html (ie, no YUI
        involved), thus it is shown immediatley. All the YUI-decorated
        panels start off hidden so as not to get any
        intermediate "ugliness". Once YUI is loaded and my init code gets
        called, I hide the loading text (replace the div contents with
        nothing) and all the YUI stuff shows up.

        ~~bret


        --- In ydn-javascript@yahoogroups.com, "james.vantslot" <james@...>
        wrote:
        >
        > Hi all,
        >
        > Looking for some hints on how to get an overlay to load on page
        load and
        > then disappear after a few seconds.
        >
        > I have figured out how to get the Overlay to display the way I want
        it.
        > I want it to display as a block in a specific location and not
        floating
        > over the page using the beforeShowEvent and HideEvent events to set
        the
        > div's display values.
        > And I can test the display and hide using click events in a couple
        of
        > the form fields:
        >
        > YAHOO.namespace("ores.container");
        >
        > YAHOO.util.Event.onDOMReady(function () {
        > YAHOO.ores.container.module1 = new
        > YAHOO.widget.Overlay("requiredInfo",
        > {visible:false,
        >
        > effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration: .9}
        > }
        > );
        > YAHOO.ores.container.module1.render();
        >
        > YAHOO.ores.container.module1.showDiv = function() {
        > YAHOO.util.Dom.setStyle
        ('requiredInfo', 'display', 'block');
        > }
        >
        > YAHOO.ores.container.module1.hideDiv = function() {
        > YAHOO.util.Dom.setStyle
        ('requiredInfo', 'display', 'none');
        > }
        >
        >
        >
        > YAHOO.ores.container.module1.beforeShowEvent.subscribe
        (YAHOO.ores.contai\
        > ner.module1.showDiv);
        >
        > YAHOO.ores.container.module1.hideEvent.subscribe
        (YAHOO.ores.container.mo\
        > dule1.hideDiv);
        >
        > YAHOO.util.Event.addListener("fname", "click",
        > YAHOO.ores.container.module1.show, YAHOO.ores.container.module1,
        true);
        > YAHOO.util.Event.addListener("lname", "click",
        > YAHOO.ores.container.module1.hide, YAHOO.ores.container.module1,
        true);
        >
        > });
        >
        > This works well to "fade" the div into view. But I don't want to
        > trigger the view and hide off of the click events of fields. I
        want to
        > have the div display for a few seconds when the page loads and then
        > disappear
        >
        > Any ideas?
        >
        > Thanks!
        >
        > james
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.