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

Re: [ydn-javascript] Transparent, unobtrusive messages?

Expand Messages
  • Stian B. Lindhom
    On Wed, 27 Dec 2006 17:10:35 +0100, Steven Peterson ... You re right, it was very easy to do with overlay indeed! For what it s worth;
    Message 1 of 3 , Dec 27, 2006
    • 0 Attachment
      On Wed, 27 Dec 2006 17:10:35 +0100, Steven Peterson <y_stevenp@...>
      wrote:

      > This would be very easy to do using Overlay, which you can get more info
      > on at http://developer.yahoo.com/yui/container/overlay. All it would
      > involve is a little JS and some custom CSS to style the message in the
      > way you’re looking for. If you build an implementation of this, please
      > share it with the community. We’d love to see it!

      You're right, it was very easy to do with overlay indeed!
      For what it's worth; here's the relevant code I came up with:

      The Javascript:
      var fadeOver = new YAHOO.widget.Overlay("fadeOver", {
      width: "50%",
      height: "100px",
      visible: false,
      effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.5 }
      }
      );
      YAHOO.util.Event.addListener(document, "mousemove", fadeOver.hide,
      fadeOver, true);
      YAHOO.util.Event.addListener(document, "mousedown", fadeOver.hide,
      fadeOver, true);
      YAHOO.util.Event.addListener(document, "keypress", fadeOver.hide,
      fadeOver, true);
      fadeOver.render();

      (It would have been nice if one could pass addListener an array of events
      to listen for...)

      The markup is straight forward like a standard overlay, as documented at
      http://developer.yahoo.com/yui/container/overlay/index.html (I just make
      sure it's initialized as hidden, and that it gets in front in addition):

      <div id="fadeOver" style="visibility: hidden; z-index: 10;">
      <div class="hd"></div>
      <div class="bd"></div>
      <div class="ft"></div>
      </div>


      A little styling for the divs:

      .overlay#fadeOver {
      left: 25%;
      top: 15%;
      }

      .overlay#fadeOver div {
      text-align: center;
      color: #FFF;
      font-size: 350%;
      padding: .3em;
      background-color: #0000AA;
      opacity: .5;
      filter: alpha(opacity=50);
      }

      Could perhaps added rounded corners, but that's another chapter...
      So displaying a message becomes as easy as:

      fadeOver.setBody("Hello, I'm an 'unobtrusive' transparent message!");
      fadeOver.show();

      You can see the example in action at
      http://delfin.grm.hia.no/~sblind/yui/yui.html .
      YUI rocks! ^__^


      --
      Regards,
      Stian B.
    Your message has been successfully submitted and would be delivered to recipients shortly.