SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery dropdownbox won't work!

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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot! I really appreciate it!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You're welcome


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •