jQuery dropdownbox won't work!

**Weibel** · May 9, 2013 00:35

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:

Code HTML4Strict:

<!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:

Code 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:

Code JavaScript:

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");
    });
});

**Pullo** · May 9, 2013 01:48

Hi there,

Welcome to the forums

You have a typo in your JS code:

Code:

if (loginBox.is(":visible"))
  loginBox.fadeOut(500);)

On the last line you have one bracket too many (marked in red).
Things should start to work if you remove that.

**Weibel** · May 9, 2013 04:46

Thanks a lot! I really appreciate it!

**Pullo** · May 9, 2013 04:47

You're welcome

User Tag List

Thread: jQuery dropdownbox won't work!

Thread Tools

Display

jQuery dropdownbox won't work!

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions