SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2005
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    gray out site - how to do?

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Just goes to show how much better IE is than other browsers!

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    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.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm just kidding. I loathe IE.

    Although that greyscale thing is quite cool.

  6. #6
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    I'm just kidding. I loathe IE.
    Quote Originally Posted by Raffles View Post
    Although that greyscale thing is quite cool.
    I agree, if it worked in all browsers I might give it a shot.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote 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>

  8. #8
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by Paul O'B View Post
    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>

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2005
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys,
    IE filters rock!!!!! (only joking)

  10. #10
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gBay View Post
    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.

  11. #11
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another technique is to use make a display:none set to position:absolute; top:0px; left:0px; width:100&#37;; 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?

  12. #12
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow View Post
    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 .

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was waiting for you to say that, deathshadow .

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •