I have tried to make a dropdownbox, but it wont work! I have tried a lot of things and used hours on trying to find the bug(s), but just can’t…
Here is my code:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Social Network</title>
<meta charset="utf-8" />
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="center">
<strong><a href="#" class="icon-login" id="signIn">Sign In</a></strong>
<div id="login_box">
<div id="login_box_content">
<form id="login_form">
<input type="text" placeholder="Username" id="user" />
<input type="password" placeholder="Password" id="pass" /><br />
<div class="remember-me-container">
<label for="remember-me">Remember me</label>
<input type="checkbox" class="remember-me" name="remember-me" /><br />
</div>
<input type="submit" value="Sign In" class="btnGrey" />
</form>
</div>
</div>
</div>
</body>
</html>
Css:
html,body,div,span,p {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue",helvetica,arial,sans-serif;
color: #333;
}
.btnGrey {
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
-ms-transition: 0.7s;
transition: 0.7s;
-webkit-box-shadow: 0px 1px 0px 0px #ffffff;
box-shadow: 0px 1px 0px 0px #ffffff;
background-color: #ededed;
border-radius: 3px;
border: 1px solid #dcdcdc;
display: inline-block;
color: #777777;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
padding: 9px 20px;
width: 88px;
text-decoration: none;
text-shadow: 1px 1px 10px #ffffff;
}
.btnGrey:hover {
background-color: #dfdfdf;
}
#login_box {
display: none;
width: 236px;
margin: 0 auto;
}
#login_box_content {
position: relative;
width: 230px;
height: 170px;
padding: 5px;
top: 22px;
background: #FFFFFF;
border: #a6a6a6 solid 1px;
border-radius: 5px;
}
#login_box_content:before {
content: "";
position: absolute;
top: -16px;
left: 100px;
border-style: solid;
border-width: 0 15px 15px;
border-color: #7a7a7a transparent;
display: block;
width: 0;
z-index: 0;
}
#login_box_content:after {
content: "";
position: absolute;
top: -15px;
left: 100px;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
#login_form {
margin: 9px 0 0 9px;
}
input[type="text"],input[type="password"] {
font-family: sans-serif;
font-size: 16px;
background: #FEFEFE;
border: 1px solid #b3b3b3;
margin-bottom: 10px;
padding-left: 7px;
height: 30px;
width: 200px;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
-ms-transition: 0.7s;
transition: 0.7s;
border-radius: 3px;
-webkit-box-shadow: 0px 3px 10px rgba(20, 20, 20, 0.1);
box-shadow: 0px 3px 10px rgba(20, 20, 20, 0.1);
}
input[type="text"]:focus,input[type="password"]:focus {
outline: none;
border-color: rgb(158,202,237);
-webkit-box-shadow: 0 0 10px rgb(158,202,237);
box-shadow: 0 0 10px rgb(158,202,237);
}
::-webkit-input-placeholder {
color: #555;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
-ms-transition: 0.7s;
transition: 0.7s;
}
:-moz-placeholder {
color: #555;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
-ms-transition: 0.7s;
transition: 0.7s;
}
/*For differient versions of Firefox*/
::-moz-placeholder {
color: #555;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
-ms-transition: 0.7s;
transition: 0.7s;
}
:-ms-input-placeholder {
color: #555;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
-ms-transition: 0.7s;
transition: 0.7s;
}
:focus::-webkit-input-placeholder {
color: #bbb;
}
:focus:-moz-placeholder {
color: #bbb;
}
/*For differient versions of Firefox*/
:focus::-moz-placeholder {
color: #bbb;
}
:focus:-ms-input-placeholder {
color: #bbb;
}
.center {
margin: 20px auto;
text-align: center;
}
a#signIn:link {
color: #333;
text-decoration: none;
}
a#signIn:visited {
color: #333;
text-decoration: none;
}
a#signIn:hover {
color: #333;
text-decoration: none;
}
a#signIn:active {
color: #333;
text-decoration: none;
}
.remember-me-container {
margin-bottom: 10px;
font-size: 18px;
color: #333;
}
/* Font stuff */
@charset "UTF-8";
@font-face {
font-family: 'login';
src: url('../font/login.eot?51900489');
src: url('../font/login.eot?51900489#iefix') format('embedded-opentype'),
url('../font/login.woff?51900489') format('woff'),
url('../font/login.ttf?51900489') format('truetype'),
url('../font/login.svg?51900489#login') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'login';
src: url('../font/login.svg?51900489#login') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "login";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-erase:before { content: '\\232b'; } /* '⌫' */
.icon-login:before { content: '\\e740'; } /* '' */
.icon-logout:before { content: '\\e741'; } /* '' */
.icon-user:before { content: ''; } /* '\\1f464' */
.icon-key:before { content: ''; } /* '\\1f511' */
JavaScript/jQuery:
var mouseIsInside = false;
$(document).ready(function() {
$("#signIn").click(function() {
var loginBox = $("#login_box");
if (loginBox.is(":visible"))
loginBox.fadeOut(500);)
else
loginBox.fadeIn(500);
return false;
});
$("#login_box").hover(function(){
mouseIsInside=true;
}, function(){
mouseIsInside=false;
});
$("body").click(function(){
if(! mouseIsInside) $("#login_box").fadeOut("fast");
});
});
