Dear Friends, I am working on a project. I wanted to put a grayscale effect when user will click on logout button or link. This function is used most of the new version of vbulletin (In Sitepoint Forum)when user clicks on Logout button the whole page gets the grayscale filter. My code is here. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> html, body { margin:0; padding:0; } </style> <meta http-equiv="Content-Language" content="en-us"> <title>' Homepage - Greenarrow</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <link href="includes/blue.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> <!-- function log_out() { ht = document.getElementsByTagName("html"); ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; if (confirm('Are you sure you want to log out?')) { return true; } else { ht[0].style.filter = ""; return false; } } //--> </script> </head> <body> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td class="header2" colspan="5" align="center"> <img src = "images/11.gif"> </td> </tr> <tr> <td id="search_container" colspan="5"> <table> <tr> <td id ="search_panel"> <input id="f1" type="text" name="q" size="75" maxlength="250" accesskey="S" title=""> <input type="submit" class="button" value="Search Web"/> <img src="images/google.gif" width="90px" heigh="50px"/> </td> </tr> <tr> <td align="center"> <a href="search.php">Change Search Engine</a> </td> </tr> </table> </td> </tr> <tr> <td class="top_nav" colspan="4"> <span class="msg"><a href="#">Welcome </a></span> <a href="content.php">Customize the page</a> <a href="signout.php" onclick="return log_out()">Login as different User</a> <span class="msg">[Coming soon BIG thing in the web ]</span> <span class="theme"><a href="?theme=blue"><img src="blue.gif"/></a> <a href="?theme=white"><img src="white.gif"></a> <a href="?theme=green"><img src="green.gif"></a> <a href="?theme=orange"><img src="orange.gif"></a> <a href="?theme=red"><img src="red.gif"></a></span> </td> </tr> <tr valign="top"> <!-- -------------------------------------------------> <td align="center"><table width="100%" id="table1"> <tr> <td valign="top"> <table border="0" width="100%" id="table4" height="103" cellspacing="0"> <tr> <td class = "mod_head" bgcolor="#3366CC" height="23">Entertainment</td> </tr><td class = "mod_body" valign="top"><img src=e.jpg class='mod_image' /><ul><li><a href=http://us.rd.yahoo.com/dailynews/rss/politics/*http://news.yahoo.com/s/ap/20060925/ap_on_el_ho/the_winner_is target=_blank>Recounts, run-offs to mark races in 2006 (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/politics/*http://news.yahoo.com/s/ap/20060925/ap_on_el_se/clinton_campaign_strategy target=_blank>Clinton flays rival in N.Y. Senate race (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/politics/*http://news.yahoo.com/s/ap/20060925/ap_on_el_se/pennsylvania_senate target=_blank>Pa. judge to drop candidate from ballot (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/politics/*http://news.yahoo.com/s/ap/20060925/ap_on_el_gu/governor_kinky target=_blank>Friedman gets Ventura's help in Texas (AP) </a></li></ul> </td> </tr> </table> </td> </tr> <tr> <td valign="top"> <table border="0" width="100%" id="table4" height="103" cellspacing="0"> <tr> <td class = "mod_head" bgcolor="#3366CC" height="23">Community</td> </tr><td class = "mod_body" valign="top"><ul><li><a href=http://us.rd.yahoo.com/dailynews/rss/health/*http://news.yahoo.com/s/ap/20060925/ap_on_he_me/take_your_medicine target=_blank>Many Patients quit medicine too early (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/health/*http://news.yahoo.com/s/ap/20060925/ap_on_he_me/universal_health_coverage target=_blank>Panel recommends health care guarantee (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/health/*http://news.yahoo.com/s/ap/20060925/ap_on_bi_ge/tainted_spinach target=_blank>Firm recalls salad products with spinach (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/health/*http://news.yahoo.com/s/ap/20060925/ap_on_sc/weightless_surgery target=_blank>Surgeons to operate in zero-gravity (AP) </a></li></ul> </td> </tr> </table> </td> </tr> <tr> <td valign="top"> <table border="0" width="100%" id="table4" height="103" cellspacing="0"> <tr> <td class = "mod_head" bgcolor="#3366CC" height="23">My Sports</td> </tr><td class = "mod_body" valign="top"><img src=g.jpg class='mod_image' /><ul><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_fo_ne/fbn_saints_saviors target=_blank>'Saint Reggie' latest savior for Saints (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_fo_ne/fbn_bucs_simms target=_blank>Buccaneers' Simms has spleen removed (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_go_ne/glf_on_golf__no_easy_ryder target=_blank>Flop at Ryder Cup keeps U.S. searching (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_co_ne/fbc_rice_player_death target=_blank>Rice player dies day after collapsing (AP) </a></li></ul> </td> </tr> </table> </td> </tr></table></td><td align="center"><table border="0" width="100%" id="table1" height="162"> <tr> <td valign="top"> <table border="0" width="100%" id="table4" height="103" cellspacing="0"> <tr> <td class = "mod_head" bgcolor="#3366CC" height="23">Sports Standing</td> </tr><td class = "mod_body" valign="top"><ul><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_fo_ne/fbn_saints_saviors target=_blank>'Saint Reggie' latest savior for Saints (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_fo_ne/fbn_bucs_simms target=_blank>Buccaneers' Simms has spleen removed (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_go_ne/glf_on_golf__no_easy_ryder target=_blank>Flop at Ryder Cup keeps U.S. searching (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_co_ne/fbc_rice_player_death target=_blank>Rice player dies day after collapsing (AP) </a></li></ul> </td> </tr> </table> </td> </tr> <tr> <td valign="top"> <table border="0" width="100%" id="table4" height="103" cellspacing="0"> <tr> <td class = "mod_head" bgcolor="#3366CC" height="23">Features</td> </tr><td class = "mod_body" valign="top"><ul><li><a href=http://us.rd.yahoo.com/dailynews/rss/weather/Sunnyvale__CA/*http://xml.weather.yahoo.com/forecast/94089_f.html target=_blank>Conditions for Sunnyvale, CA at 12:56 pm PDT</a></li></ul> </td> </tr> </table> </td> </tr></table></td><td align="center"> <table border="0" width="100%" id="table1" height="162"> <tr> <td valign="top"> <table border="0" width="100%" id="table4" height="103" cellspacing="0"> <tr> <td class = "mod_head" bgcolor="#3366CC" height="23">Market Snapshot</td> </tr><td class = "mod_body" valign="top"><img src=m.jpg class='mod_image' /><ul><li><a href=http://us.rd.yahoo.com/dailynews/rss/business/*http://news.yahoo.com/s/nm/20060925/bs_nm/economy_homes_dc target=_blank>Home prices show first annual fall in 11 years (Reuters) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/business/*http://news.yahoo.com/s/nm/20060925/bs_nm/energy_gasoline_price_dc target=_blank>Gasoline falls for seventh week: government (Reuters) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/business/*http://news.yahoo.com/s/nm/markets_stocks_dc target=_blank>U.S. stocks spike; Nasdaq ends up more than 1 percent (Reuters) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/business/*http://news.yahoo.com/s/nm/20060925/bs_nm/arena_dc target=_blank>Arena says Merck ends atherosclerosis development (Reuters) </a></li></ul> </td> </tr> </table> </td> </tr> <tr> <td valign="top"> <table border="0" width="100%" id="table4" height="103" cellspacing="0"> <tr> <td class = "mod_head" bgcolor="#3366CC" height="23">My Bookmarks</td> </tr><td class = "mod_body" valign="top"><ul><li><a href=http://www.cmu.edu/oli/ target=_blank>Open Learning Initiative at Carnegie Mellon University</a></li><li><a href=http://www.kaspersky.com/virusscanner target=_blank>Free Online Virus Scanner and Spyware Scanner - Kaspersky Lab Antivirus Software</a></li><li><a href=http://www.lifehacker.com/software/education/technophilia-get-a-free-college-education-online-201979.php target=_blank>Technophilia: Get a free college education online - Lifehacker</a></li><li><a href=http://aimediaserver.com/studiodaily/videoplayer/?src=harvard/harvard.swf&width=640&height=520 target=_blank>Studio Daily Video Player</a></li></ul> </td> </tr> </table> </td> </tr> <tr> <td valign="top"> <table border="0" width="100%" id="table4" height="103" cellspacing="0"> <tr> <td class = "mod_head" bgcolor="#3366CC" height="23">Sports Calendar</td> </tr><td class = "mod_body" valign="top"><ul><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_fo_ne/fbn_saints_saviors target=_blank>'Saint Reggie' latest savior for Saints (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_fo_ne/fbn_bucs_simms target=_blank>Buccaneers' Simms has spleen removed (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_go_ne/glf_on_golf__no_easy_ryder target=_blank>Flop at Ryder Cup keeps U.S. searching (AP) </a></li><li><a href=http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20060925/ap_on_sp_co_ne/fbc_rice_player_death target=_blank>Rice player dies day after collapsing (AP) </a></li></ul> </td> </tr> </table> </td> </tr></table></td> <!------------ --------------------------------------------------> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="10" height="55"> <tr> <td align="center"> </td> </tr> </table> </body> </html> Code (markup): The javascript function log_out function log_out() { ht = document.getElementsByTagName("html"); ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; if (confirm('Are you sure you want to log out?')) { return true; } else { ht[0].style.filter = ""; return false; } } //--> </script> Code (markup): And I wish this line is not working. ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; Code (markup): The filter is browser specific property. I am testing on internet explorer 6 . as i can see the effect on sitepoint forum. So my environment can view this effect. I would have some problem in code. I wish some guru can help me. Thanks. Coolsaint
I suggest using a DOM solution not MS own functions: <html> <head> </head> <body> <h1>My page</h1> <p>My content ...</p> <input value=' Log Out ' type='submit' onClick='greyScreen()'> <div id='greylayer' name='greylayer' style='position: absolute; z-index: 100; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; display: none'> </div> <script type='text/javascript'> var UPDATE_INTERVAL = 50; var STOP_OPACITY = 50; var greyLayer = document.getElementById("greylayer"); var greyCount = 0; var greyInterval = null; function setOpacity() { if( greyCount == STOP_OPACITY ) clearInterval(greyInterval); greyLayer.style.opacity = greyCount / 100; greyLayer.style.filter = 'alpha(opacity=' + greyCount + ')'; greyCount++; } function greyScreen() { greyLayer.style.opacity = 0; greyLayer.style.filter = 'alpha(opacity=0)'; greyLayer.style.display = 'block'; greyInterval = setInterval('setOpacity()', UPDATE_INTERVAL); } </script> </body> </html> Code (markup): A lower UPDATE_INTERVAL will speed the fade process while STOP_OPACITY tells the script when to stop fading, takes values from 1 to 100.
Dear Evelto, Thanks for the solution. Actually i was not trying to have any diceamantal fade out effect. I wanted total grayscale of the body on click of logout button. No problem i will try to edit that. if it suits my need i will let you know. By the way thanks again for the help. Coolsaint