Web 2.0: Gray out the screen

This snippet grays out the screen and allows you to create a modal environment. A gray out is useful for creating a DHTML dialog box, or showing off a picture or video. While a gray out is active, most interactive elements on the page (links, etc.) are inactive – you’ve probably seen this on the new My Yahoo! page.

function grayOut(vis, options) {
  // Pass true to gray out screen, false to ungray
  // options are optional.  This is a JSON object with the following (optional) properties
  // opacity:0-100         // Lower number = less grayout higher = more of a blackout
  // zindex: #             // HTML elements with a higher zindex appear on top of the gray out
  // bgcolor: (#xxxxxx)    // Standard RGB Hex color code
  // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
  // Because options is JSON opacity/zindex/bgcolor are all optional and can appear
  // in any order.  Pass only the properties you need to set.
  var options = options || {};
  var zindex = options.zindex || 50;
  var opacity = options.opacity || 70;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#000000';
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');           // Create the layer.
        tnode.style.position='absolute';                 // Position absolutely
        tnode.style.top='0px';                           // In the top
        tnode.style.left='0px';                          // Left corner of the page
        tnode.style.overflow='hidden';                   // Try to avoid making scroll bars
        tnode.style.display='none';                      // Start out Hidden
        tnode.id='darkenScreenObject';                   // Name it so we can find it later
    tbody.appendChild(tnode);                            // Add it to the web page
    dark=document.getElementById('darkenScreenObject');  // Get the object.
  if (vis) {
    // Calculate the page width and height
    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
        var pageWidth = document.body.scrollWidth+'px';
        var pageHeight = document.body.scrollHeight+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    //set the shader to cover the entire page and make it visible.
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
  } else {

Thanks to Peter Hunlock for sharing this.

iGoogle vs. My Yahoo!

I’ve had my Yahoo! screen name since the mid 90s and my Google screen name since its beta days. Both of of them allow you to customize your own, personalized home page Web 2.0 style. That is AJAX technologies and support for gadgets/widgets is available and extensively used for a more superior, less lag time user experience.

Of the two, I favor iGoogle more mainly because it is ad-less. This means no ads appear on your “home page,” unlike My Yahoo!’s where huge banner ads appear on the top of the page. It’s understandable that ads result in a steady cash flow, but they’re just plain eye sores.

I particularly like iGoogle’s “You might also like…” widget option, as it helps me choose the coolest or most useful gadget (this is subjective of course) out of the gazillion gadgets; mighty handy.

Additionally, the themes available are better looking and more streamlined than My Yahoo!’s; for example, a nice feature is the theme’s top banner changing color and activity based on the current time. I’m currently using the “Tea House” theme. It’s nothing spectacular but quite interesting and fun, which makes me want to go to “my home page” more frequently. =0)

One thing I’d like to see on iGoogle, however, is My Yahoo!’s AJAX/JavaScript feature where onmouseover the details of that text is shown in a modal-type window (not available on everything, though). Yeah, iGoogle’s page has the ‘+’ ellipses to do that but My Yahoo!’s is way easier to use.

To make things easier, I’ll list and compare these two giants’ personal home page services/features [of what I can remember or notice] side-by-side:

Feature iGoogle My Yahoo!
Web 2.0 enabled Yes Yes
Ad-Free Yes No
RSS Subscriptions Yes Yes
Theme Support Yes Yes
Tab Support Yes Yes
E-mail Integration Yes Yes
Calendar Integration Yes Yes
Web History Yes No
Bookmarks Yes Yes
Page Column Support Yes Yes
Documents Yes No
Pageload Speed Excellent Excellent

Interestingly, I read this article stating that men use Google, while women use Yahoo!. So is it just because I’m a man that I prefer Google over My Yahoo!? No, I don’t think so; from my day to day use/experience, I find myself more productive and in-tune with iGoogle.