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

Re: [ydn-javascript] invisible overlay with effect first shown and then hidden

Expand Messages
  • Raphael Bauduin
    ... Hi eric, Thanks for your fast and informative answer! I ll go for the javascript solution you describe below. Cheers Raph *What s happening:* ... -- Web
    Message 1 of 3 , Dec 16, 2006
    • 0 Attachment
      On 12/16/06, Eric Miraglia <miraglia@...> wrote:
      Raph,

      You bring up an interesting issue, and it's one we probably ought to look at on our end to see if there's a better way to implement this.  But here's what's happening and how to get the effect you're looking for.

      Hi eric,

      Thanks for your fast and informative answer! I'll go for the javascript solution you describe below.

      Cheers

      Raph
       

      What's happening:
      When you render your Overlay with visibility:hidden, Overlay goes through its full hide logic.  Even the first time you render it that way, for example, your  beforeHideEvent and  hideEvent are firing.  Because you've applied a transition effect to the hide process, the transition gets incorporated into that workflow.  Your Overlay shows and then fades out, just as you want it to do when it's going from visible to hidden.  In this case, though, you're setting its initial state, and you don't want to see that transition.

      How to get the effect you're looking for:
      The strategy I like best is to render your Overlay with visibility:hidden but without the container effect.  Then, once your Overlay is rendered and hidden, add the container effect.

      <script>
      (function(){
      var init = function(){
      var o = new YAHOO.widget.Overlay("overlay2", { xy:[8,8],visible:false, width:"100px", height:"100px" } );
      o.setBody('<b style="background:#ff5555">--</b>');
      o.render (document.body);
      o.cfg.setProperty("effect",  {effect:YAHOO.widget.ContainerEffect.FADE, duration:1});
      o.render();
      }
      YAHOO.util.Event.on(window, 'load', init);
      })();
      </script>

      Another strategy that should work as well is to simply set the initial visibility state to hidden for overlay2 in your css:

      <style>
      #overlay2 {visibility:hidden;};
      </style>

      I prefer the JavaScript solution because it means the browser doesn't have to calculate and execute the fade transition on the initial render of the Overlay.  Opacity can be compute-intensive if the overlay is large, so depending on the size of the actual Overlay it seems worth saving those extra cycles.

      Regards.
      Eric


      ______________________________________________
      Eric Miraglia
      Yahoo! Presentation Platform Engineering



      On Dec 16, 2006, at 6:43 AM, Raphael Bauduin wrote:

      Hi,

      I have a problem with an overlay I configure as invisible. When I
      render it, it appears and is hidden with the chosen effect. I however
      don't want it to appear as I haven't called show() at that time.

      I've put a page showing the problem at http://www.raphinou.com/yui/ 20061216/
      and here's the code:

      o = new YAHOO.widget. Overlay("overlay2", { xy:[8,8],
      visible:false, width:"100px", height:"100px" , effect:
      [{effect:YAHOO.widget.ContainerEffect.FADE, duration:1.0} ] } );
      o.setBody('<b style="background:#ff5555"> --</b>');
      o.render(document.body);

      How comes it is shown visible when I call the render method?

      Thanks

      raph
      --
      Web database: http://www.myowndb.com
      Free Software Developers Meeting: http://www.fosdem.org





      --
      Web database: http://www.myowndb.com
      Free Software Developers Meeting: http://www.fosdem.org
    Your message has been successfully submitted and would be delivered to recipients shortly.