Tuesday, May 31, 2011

Disable all contents of the page using jQuery

Here is the code to disable all contents of the page. By "disable" i mean that everything on the page will neither be clickable nor any text will be selectable nor right click will work. Here is a simple solution to solve the problem using jQuery

var newDiv = $("<div></div>")
    $(newDiv).css({width: '100%',
                   height: $(document).height()+'px',
                   position: 'absolute',
                   top: '0px',
                   left: '0px',
                   backgroundColor: '#000000',
                   opacity:'0.5'});
    $("body").first().append(newDiv);
    $(document).bind("contextmenu",function(e){
            return false;
    });

}

You can also make a css class for the css attributes mentioned above, the only check is for the "height" , because setting height = 100% won't work. Since, if the page has a scroll bar, then setting height = 100% will only disable the part of the page which is currently in the context and if you scroll down, the rest of the page won't be disabled. If you simply set opacity to 0.0, this will show the page as a normal page but everything on it will be disabled