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 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.