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
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
  •