Click here to Skip to main content
15,890,946 members
Please Sign up or sign in to vote.
1.00/5 (4 votes)
See more:
Dear Friends,

How to create a login on Mouse over.

I need login same as CODE PROJECT. Please help.When i keep mouse on sign in it should display login.

Thanks in ADVANCE.
Posted
Updated 10-May-17 5:08am
v2
Comments
Rickin Kane 25-Sep-12 6:21am    
use Jquery , go and find on google , tons of example avaiable
Ubaid ur Rahman IT 25-Sep-12 6:22am    
Please help me boss. am fresher.

thanks

1 solution

SQL
Hi,

Create CodeProject like login is very difficult. But i will provide some information to create login.

Put following classes to your css file


CSS
.tooltip {
float: left;
width: 24px;
height: 24px;
margin: 0 5px 30px 5px;
border: none;
}

.member-signin.tooltip > span {
color: #005782;
font-size: 14px;
border: 1px solid transparent;
padding: 2px 21px 4px 2px;
background: url(http://s.codeproject.com/images/circle-right.png) 100% 50% no-repeat scroll padding-box transparent;
}

.member-signin.tooltip .tooltip-flyout {
margin: 17px 0 0 -140px;
z-index: 502!important;
border: solid;
border-bottom: 5px solid #F90;
padding: 10px;

.tight {
margin: 0!important;
padding: 0!important;
}

.member-signin.tooltip .tooltip-flyout .divider-dark {
display: inline;
padding: 10px 3px 4px 0;
margin: 20px 0px 13px;
}

.member-signin.tooltip .tooltip-flyout .oauth {
background-color: #F90;
color: white;
padding: 10px 3px 4px 0px;
}


Now put following code to your aspx page

HTML
<div class="float-right">
<a name="SignUp"></a>
<span class="member-signin tooltip">
<span>Sign in</span>
<div class="tooltip-flyout">
&lt;form name="subForm" id="subForm" action="check for valid user " method="post" class="tight">
&lt;input id="FormName" name="FormName" value="MenuBarForm" type="hidden">
<div>Email</div>
<div>&lt;input class="small-text" type="text" name="Email" id="Email"></div>
<div>Password</div>
<div>&lt;input class="small-text" type="password" name="Password" id="Password"></div>
<div class="action">
&lt;input type="submit" value="Sign in" class="signin" onclick="return doSubmit(false);">
</div>
<div class="container">
</div>
&lt;/form>
</div>
</span></div>


This is not enough, you have to customize your div as per your need and put some code to provide better login popup to your website.

Hope this helps...

Enjoy Coding...
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900