CSS/JavaScript Use Div to grey out section of page

Question

Does anybody know a way with JavaScript or CSS to basically grey out a certain part of a form/div in HTML?

I have a 'User Profile' form where I want to disable part of it for a 'Non-Premium' member, but want the user to see what is behind the form and place a 'Call to Action' on top of it.

Does anybody know an easy way to do this either via CSS or JavaScript?

Edit: I will make sure that the form 'doesn't work' on server side so CSS or JavaScript will suffice.

Answer 1

You can overlay an opaque div using CSS, placing your call to action in that div.

There's a good article that walks you through the steps required here on bitsamppixels.com (their example is creating an opaque overlay one a column, but it's a similar idea to what you're trying to achieve), and a demo of it in action here.

Answer 2

Add this to your HTML:

<div id="darkLayer" class="darkClass" 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 finally this to turn it off and on with JavaScript:

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

Change the dimensions of the darkClass to suite your purposes.

Answer 3

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

The code to use it is as simple as:

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

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

Answer 4

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

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