gray out site - how to do?

**gBay** · Dec 18, 2006 05:28

hi,
ive just noticed that when i click the 'Log Out' button top right on this website, the whole page is 'grayed out'. ive noticed this on a few website, how can i do the same on my site?
thanks.

**Paul O'B** · Dec 18, 2006 07:00

Hi,

Just look through the source and you will find

For ie only its done something like this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
html{background:#fffcc}
div{background:blue;width:300px;height:300px;color:#fff;}
</style>
<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>
<p><a onclick="log_out();return false;" href="#">Cick</a></p>
<div><p>testing</p></div>
</body>
</html>

You set the proprietary IE grayscale filter on the html through javascript when logout is clicked.

**Raffles** · Dec 18, 2006 08:48

Just goes to show how much better IE is than other browsers!

**RetroNetro** · Dec 18, 2006 09:06

Originally Posted by Raffles

Just goes to show how much better IE is than other browsers!

Errr, All browsers have proprietary code, that does not necessarily mean one is better than the other.

**Raffles** · Dec 18, 2006 09:19

I'm just kidding. I loathe IE.

Although that greyscale thing is quite cool.

**RetroNetro** · Dec 18, 2006 09:25

Originally Posted by Raffles

I'm just kidding. I loathe IE.

Originally Posted by Raffles

Although that greyscale thing is quite cool.

I agree, if it worked in all browsers I might give it a shot.

**Paul O'B** · Dec 18, 2006 09:35

Originally Posted by johnny

I agree, if it worked in all browsers I might give it a shot.

Well you could do a similar thing for other browsers using opacity instead.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
html{background:#fffcc;}
div{background:blue;width:300px;height:300px;color:#fff;}
</style>
<script type="text/javascript">
<!--
function log_out()
{
    ht = document.getElementsByTagName("html");
    bdy = document.getElementsByTagName("body");
    ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
    bdy[0].style.opacity = 0.4;
    if (confirm('Are you sure you want to log out?'))
    {
        return true;
    }
    else
    {
        ht[0].style.filter = "";
        bdy[0].style.opacity = "";
        return false;
    }
}
//-->
</script>
</head>

<body>
<p><a onclick="log_out();return false;" href="#">Cick</a></p>
<div><p>testing</p></div>
</body>
</html>

**RetroNetro** · Dec 18, 2006 09:38

I knew someone was going to say that. To be honest, I really do not want to do it.

Well maybe someday, thanks Paul, now I know how.

Originally Posted by Paul O'B

Well you could do a similar thing for other browsers using opacity instead.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
html{background:#fffcc;}
div{background:blue;width:300px;height:300px;color:#fff;}
</style>
<script type="text/javascript">
<!--
function log_out()
{
    ht = document.getElementsByTagName("html");
    bdy = document.getElementsByTagName("body");
    ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
    bdy[0].style.opacity = 0.4;
    if (confirm('Are you sure you want to log out?'))
    {
        return true;
    }
    else
    {
        ht[0].style.filter = "";
        bdy[0].style.opacity = "";
        return false;
    }
}
//-->
</script>
</head>

<body>
<p><a onclick="log_out();return false;" href="#">Cick</a></p>
<div><p>testing</p></div>
</body>
</html>

**gBay** · Dec 18, 2006 09:46

thanks guys,
IE filters rock!!!!! (only joking)

**brandaggio** · Dec 18, 2006 13:25

Originally Posted by gBay

hi,
ive just noticed that when i click the 'Log Out' button top right on this website, the whole page is 'grayed out'. ive noticed this on a few website, how can i do the same on my site?
thanks.

This is often done (cross browser) using the ThickBox JS.

**deathshadow** · Dec 18, 2006 22:19

another technique is to use make a display:none set to position:absolute; top:0px; left:0px; width:100%; z-index:10000; with a transparent .png as it's background - means you have to add a DX filter so IE will render the png transparancy, but it works. Just change it to display:block and set the height to the current document height in javascript, and yer good to go.

Oh, and what is with this lightbox/thickbox nonsense anyhow? Just chewing bandwidth 'because' or something? 12k (thickbox) to 18k (lightbox) of javascript just to have a loading screen atop something that should only take MAYBE 1k of javascript and ten lines of CSS without it seems... I dunno... wasteful at best? Agonizingly slow at worst?

**brandaggio** · Dec 18, 2006 22:33

Originally Posted by deathshadow

Oh, and what is with this lightbox/thickbox nonsense anyhow? Just chewing bandwidth 'because' or something? 12k (thickbox) to 18k (lightbox) of javascript just to have a loading screen atop something that should only take MAYBE 1k of javascript and ten lines of CSS without it seems... I dunno... wasteful at best? Agonizingly slow at worst?

I am sorry you are not a fan - a lot of people have found it useful. It is configurable and flexible.

I am glad you have a solution you prefer

.

**Dan Schulz** · Dec 18, 2006 23:16

I was waiting for you to say that, deathshadow

.

**Raffles** · Dec 18, 2006 23:34

Originally Posted by deathshadow

Oh, and what is with this lightbox/thickbox nonsense anyhow? Just chewing bandwidth 'because' or something? 12k (thickbox) to 18k (lightbox) of javascript just to have a loading screen atop something that should only take MAYBE 1k of javascript and ten lines of CSS without it seems... I dunno... wasteful at best? Agonizingly slow at worst?

I mimicked it and I used about 10 lines of javascript plus 30 or so of CSS and it works in pretty much the same way (though it's not as slick and pretty). The thing that makes lightbox so big (sic) is the fading, sliding effects and there are over 100 lines devoted to creating HTML elements. But I can see why people use it. You just chuck it in a directory, give your links a rel="lightbox" and that's it - couldn't be easier.

User Tag List

Thread: gray out site - how to do?

Thread Tools

Display

gray out site - how to do?

Bookmarks

Bookmarks

Posting Permissions