[ACCEPTED]-CSS/JavaScript Use Div to grey out section of page-css

Accepted answer
Score: 71

Add this to your HTML:

<div id="darkLayer" class="darkClass" style="display:none"></div>

And this to your CSS:

.darkClass
{
    background-color: white;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    top: 0px;
    left: 0px;
}

And 3 finally this to turn it off and on with 2 JavaScript:

function dimOff()
{
    document.getElementById("darkLayer").style.display = "none";
}
function dimOn()
{
    document.getElementById("darkLayer").style.display = "";
}

Change the dimensions of the 1 darkClass to suite your purposes.

Score: 41

You might try the jQuery BlockUI plugin. It's 10 quite flexible and is very easy to use, if 9 you don't mind the dependency on jQuery. It 8 supports element-level blocking as well an overlay message, which 7 seems to be what you need.

The code to use 6 it is as simple as:

$('div.profileform').block({
    message: '<h1>Premium Users only</h1>',
});

You should also keep 5 in mind that you may still need some sort 4 of server-side protection to make sure that 3 Non-Premium users can't use your form, since 2 it'll be easy for people to access the form 1 elements if they use something like Firebug.

Score: 2

If you rely on CSS or JavaScript to prevent 7 a user from editing part of a form then 6 this can easily by circumvented by disabling 5 CSS or JavaScript.

A better solution might 4 be to present the non-editable information 3 outside of the form for non-premium members, but 2 include the relevant form fields for premium 1 members.

Score: 2
With opacity


//function to grey out the screen
$(function() {
// Create overlay and append to body:
$('<div id="ajax-busy"/>').css({
    opacity: 0.5, 
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: $(window).height() + 'px',
    background: 'white url(../images/loading.gif) no-repeat center'
    }).hide().appendTo('body');
});


$.ajax({
    type: "POST",
    url: "Page",
    data: JSON.stringify({ parameters: XXXXXXXX }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    beforeSend: function() {
        $('#ajax-busy').show();
    },
    success: function(msg) {
        $('#ajax-busy').hide();

    },
    error: function() {
        $(document).ajaxError(function(xhr, ajaxOptions, thrownError) {
            alert('status: ' + ajaxOptions.status + '-' + ajaxOptions.statusText + ' \n' + 'error:\n' + ajaxOptions.responseText);
        });
    }
});

0

More Related questions