SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to grey out the web page

    Is there any one can give me the idea how to grey out a web page ?
    When being greyed out, all the web elements will also be disabled.

    The point is I would like to have the main page deactivated while a certain dialog box (pop up window) is being run.

    thanks.

  2. #2
    SitePoint Addict
    Join Date
    Mar 2007
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by denisw View Post
    Is there any one can give me the idea how to grey out a web page ?
    When being greyed out, all the web elements will also be disabled.

    The point is I would like to have the main page deactivated while a certain dialog box (pop up window) is being run.

    thanks.
    Isn't that what thickbox does? Either use that or download it and see how they do it.
    http://www.glasys.co.uk
    Noli Illegitimi Carborundum

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, that's exactly what i mean.
    Anyhow, I would appreciate if any of you can share the general idea of the technique behind this.

    thx

  4. #4
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, This article has proved useful for me
    http://www.astral-consultancy.co.uk/...doco.cgi?11420
    Hope it helps

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go:

    Put this in an external Javascript file and link to it in your document:

    Code JavaScript:
    var documentOverlay = {
        show: function() {
            // ---------------------
            // STUFF YOU CAN CHANGE:
            var color = 'black'; // SET THE COLOR HERE (IT CAN BE A HEX COLOR e.g. #FF00FF)
            var opacity = 0.7; // SET AN OPACITY HERE - MUST BE BETWEEN 0 AND 1
            // ---------------------
            // DON'T TOUCH ANYTHING FROM HERE ONWARDS
            // ---------------------
            var o = document.getElementById('doc_overlay');
            if(!o) {
                var o = document.createElement('div');
                o.id = "doc_overlay";
                documentOverlay.style(o,{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: documentOverlay.getDocHeight()+'px',
                    background: color,
                    zIndex: 1000,
                    opacity: opacity,
                    filter: 'alpha(opacity='+opacity*100+')'
                });
                document.getElementsByTagName('body')[0].appendChild(o);
            } else {
                documentOverlay.style(o,{background:color||'#000',display:'block'});
            }
        },
        hide: function() {
            var o = document.getElementById('doc_overlay');
            o.style.display = 'none';
        },
        style: function(obj,s) {
            for ( var i in s ) {
                obj.style[i] = s[i];
            }
        },
        getDocHeight: function() {
            var Y,YT;
            if( self.innerHeight ) {Y = self.innerHeight;}
            else if (document.documentElement && document.documentElement.clientHeight) {Y = document.documentElement.clientHeight;} 
            if( document.body ) {YT = document.body.clientHeight;}
            if(YT>Y) {Y = YT;}
            return Y;
        }
    }

    When you need the overlay to appear initiate it like this:

    Code JavaScript:
    documentOverlay.show();

    And when you want it to hide:

    Code JavaScript:
    documentOverlay.hide();

    I hope that helps.
    Last edited by JimmyP; Sep 12, 2008 at 11:40. Reason: gRoberts correction :)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jimmy, your script worked great apart from the colour was always too light regardless of what I set the opacity to. The only way I could get it to work correctly was by changing

    Code javascript:
    'alpha(opacity='+opacity*10+')'
    to
    Code javascript:
    'alpha(opacity='+opacity*100+')'

    Was this a typo or is there something else causing this?


  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @gRoberts, it was a typo, or rather I forgot that IE needs opacity (alpha(opacity)) defined from 0 to 100 instead of from 0 to 1 or 0 to 10 ... Thanks for the correction - I've edited my last post accordingly.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All,

    Thanks a lot for sharing with me !
    They are great !


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
  •