twitter is a one of the good social networking site but the interface of this site is too good than other sites so all are interested to make a page like this this is also one of the attempt to create a login page .thanq our tut starts 1,2,3, lets go
1)first u must aware of ajax then u can understand otherwise i am providing files also
2)download below files
jquery.corner.js
jquery-1.3.2.min.js
save the below code with .html extension 1)first u must aware of ajax then u can understand otherwise i am providing files also
2)download below files
jquery.corner.js
jquery-1.3.2.min.js
<html>
<head>
</head>
<style>
body
{
background: #F9F7ED;
font-family: Sans-serif;
margin: 0;
}
#loginBox
{
margin-left: 150px;
background: #2088B2;
padding: 5px;
color: #fff;
width: 50px;
margin-top: 3px;
cursor: pointer;
}
#loginBoxContent
{
background: #4AC0F2;
padding: 5px;
display: none;
font-size: 12px;
width: 180px;}
p { padding-bottom: 1px;}
</style>
<body>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[id^='loginBox']").corner("5px");
$("#loginBox").click(function() {
if ($("#loginBoxContent").css('display') == 'block') {
$("#loginBoxContent").css('display', 'none');
$("#loginBox").css('background', '#2088B2').corner("5px");
}
else {
var offset = $(this).offset();
$("#loginBoxContent").css({
'left': offset.left-130, 'top': offset.top+25,
'position':'absolute', 'display': 'block'}).uncorner().corner("tl bl br");
$(this).css('background', '#4AC0F2').corner("tl tr");
}
});
});
</script>
<div id="loginBox">Login </div>
<div id="loginBoxContent">
<div>Username or e-mail:</div>
<div><input type="text" name="login" /></div>
<div>Password:</div>
<div><input type="password" name="password" /></div>
<div><input type="submit" value="Login"></div>
</div>
</body>
</html>
0 comments:
Post a Comment