div hover effect

movieprodw
movieprodw used Ask the Experts™
on
Hello,

I have a div and it has a form in it, it is on the home page so I want it to show but if they are not logged in then I want to have it so that when they hover over the div it is grayed out and says [!] Please log in or create an account.

Any ideas of how to do that? I know to make it check to see if they are logged in but how do you make a div have an affect on hover like that.

Logged in
<div id="contentForm"><form>...</form></div>

NOT logged in
<div id="contentForm" class="login"><form>...</form></div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hello Leakim,

I am not looking for a greybox but I simply want the div holding the form to be grey with some words on it saying that they have to log in.

Matt
Carlos LlanosIT Manager
Commented:
I would add JavaScript zone as this will probably require some to accomplish this.
OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

Commented:
If it is just html, then you need to use javascript to achieve that.

You can change the classname of div in javascript, after loading the page. For this you should have some variable to figure out, if logged in or not.

If you are using any server side programming like ASP/JSP, you should be able to generate the div with out without class at serverside itself..
nishant joshiTechnology Development Consultant
Commented:
make a field like


<input type="hidden" id="login">true</input>

in your script you have to check

 if($("#login").attr("value")=="true")
{
...
}
else
{
}
Sandeep KothariProject Lead
Commented:
below is a sample code... might help ..
<div id='main' onmouseover="showAlert()" onmouseout="hideAlert()" style="height:400px;width:500px";>
<div id='login' class="frm">
<form>
<input></input>
<input></input>
<input></input>
<input></input>
</form>
</div>
<div id='alertid' class='loggedin'>Please Login to create an account!</div>
</div>

<script>
function showAlert(){
document.getElementById('alertid').className='notloggedin';
}

function hideAlert(){
document.getElementById('alertid').className='loggedin';
}
</script>
<style>
.frm{
margin-top:200px;margin-left:400px;float:left;width:300px;height:400px;
}
.notloggedin{
margin-left:370px;margin-top:230px;width:330px;position:absolute;height:400px;
}
.loggedin{
margin-left:400px;margin-top:200px;width:300px;position:absolute;display:none;height:400px;
}
</style>

Open in new window

Author

Commented:
Thanks for the help

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial