Javascript/jQuery event handler isn't loading

Question

I have a problem using jQuery where the blocks of code inside $(document).ready() won't load. I have looked into it and haven't been able to find a solution. I looked at it with the chrome "inspect element" tool thing in the Event Listeners tab there is nothing for the object that has an event linked to it.

I'm using brackets and Jslint gives me the error: "$ was used before it was defined" for the first line of code. Here is my HTML code and Js/jQuery code:

HTML

<head>
    <script type="text/javascript" src="JS/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="JS/Java.js"></script>
    <style>
     #login{
        display:;
        font-size: 18;
        left: 80%;
        top: 28%;
    }

    #login:hover{
        opacity: 0.4;
        cursor: pointer;
    }

    #nav-icon{
        width: 20px;
        height: 15px;
        position: relative;
        top: 30%;
        left: 90%;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }

    #nav-icon span{
        display: block;
        position: relative;
        height: 1px;
        width: 100%;
        background: #ffffff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    #nav-icon span:nth-child(1) {
        top: 0px;
    }

    #nav-icon span:nth-child(2) {
        top: 6px;
    }

    #nav-icon span:nth-child(3) {
        top: 12px;
    }

    #nav-icon.open span:nth-child(1) {
      top: 4.5px;
      left: 100;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }

    #nav-icon.open span:nth-child(2) {
      opacity: 0;
      left: -60px;
    }

    #nav-icon.open span:nth-child(3) {
      top: 3px;
      left: 100;
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }

    #menubar{
        display:;
        position: absolute;
        top: 0;
        height: 100%;
        width: 15%;
        left: 50%;
        background-color: rgba(0, 0, 0, 0.85);
        z-index: 2;
        font-family: main;
        font-size: 20;
        color: fff;
        list-style: none;
        line-height: 2;   
    }
    </style>
</head>

<body>

    <div id="HeaderContainer">
        <div class=header id="login">
            <li>Login</li>
        </div>

        <div id="nav-icon">
          <span></span>
          <span></span>
          <span></span>
        </div>
    </div>


    <div id="menubar">
        <li>Login</li>
        <li>My Account</li>
        <li>My Wishlist</li>
        <li>My Orders</li> 
    </div>

</body>

Js/jQuery

$(document).ready(function () {
    $('#nav-icon').click(function () {
        $(this).toggleClass('open');
        $('#menubar').animate({left: 'toggle'}, -30%);
        $('#login').fadeToggle(fast);
    });
});

The HTML and JS are in separate files and I know that both JS files are correctly linked to the HTML file. alert() placed on the first line before any other code works.

What I want to happen: I want the hamburger menu (#nav-icon) to, when clicked, toggle the CSS class "open". When I click it right now nothing happens.

Thanks in advance for any help you can offer!

PS: I'm new here so sorry if I messed anything up.

Can you try including the external js file(s) at the end of the HTML <body> @FarasatAhmed — Varun
– Varun, Commented Jun 21, 2015 at 16:23
The only error I get is inside the editor I use. I use brackets and Jslint gives me the error: "$ was used before it was defined". — FarFar
– FarFar, Commented Jun 21, 2015 at 16:24

guest271314 · Accepted Answer · 2015-06-21 16:33:55Z

, -30% not appear to be valid duration at $('#menubar').animate({left: 'toggle'}, -30%); ?

$(document).ready(function () {
    $('#nav-icon').click(function () {
        $(this).toggleClass('open');
        $('#menubar').animate({left: 'toggle'}, 1000);
        $('#login').fadeToggle("fast");
    });
});

#login {
       display: ;
       font-size: 18;
       left: 80%;
       top: 28%;
     }
     #login:hover {
       opacity: 0.4;
       cursor: pointer;
     }
     #nav-icon {
       width: 20px;
       height: 15px;
       position: relative;
       top: 30%;
       left: 90%;
       -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       -webkit-transition: .5s ease-in-out;
       -moz-transition: .5s ease-in-out;
       -o-transition: .5s ease-in-out;
       transition: .5s ease-in-out;
       cursor: pointer;
     }
     #nav-icon span {
       display: block;
       position: relative;
       height: 1px;
       width: 100%;
       background: #ffffff;
       border-radius: 9px;
       opacity: 1;
       left: 0;
       -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       -webkit-transition: .25s ease-in-out;
       -moz-transition: .25s ease-in-out;
       -o-transition: .25s ease-in-out;
       transition: .25s ease-in-out;
     }
     #nav-icon span:nth-child(1) {
       top: 0px;
     }
     #nav-icon span:nth-child(2) {
       top: 6px;
     }
     #nav-icon span:nth-child(3) {
       top: 12px;
     }
     #nav-icon.open span:nth-child(1) {
       top: 4.5px;
       left: 100;
       -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
       -o-transform: rotate(135deg);
       transform: rotate(135deg);
     }
     #nav-icon.open span:nth-child(2) {
       opacity: 0;
       left: -60px;
     }
     #nav-icon.open span:nth-child(3) {
       top: 3px;
       left: 100;
       -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
       -o-transform: rotate(-135deg);
       transform: rotate(-135deg);
     }
     #menubar {
       display: ;
       position: absolute;
       top: 0;
       height: 100%;
       width: 15%;
       left: 50%;
       background-color: rgba(0, 0, 0, 0.85);
       z-index: 2;
       font-family: main;
       font-size: 20;
       color: fff;
       list-style: none;
       line-height: 2;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HeaderContainer">
        <div class=header id="login">
            <li>Login</li>
        </div>

        <div id="nav-icon">
          <span>a</span>
          <span>b</span>
          <span>c</span>
        </div>
    </div>


    <div id="menubar">
        <li>Login</li>
        <li>My Account</li>
        <li>My Wishlist</li>
        <li>My Orders</li> 
    </div>

Oh wow! Thanks! That did the job! I didn't know that one error could lead to all the code not working! Thanks!
@FarasatAhmed Note also fast not appear to be string "fast" as pointed out by @chiragchavda.ks

chiragchavda.ks · Accepted Answer · 2015-06-21 16:31:40Z

0

this line is wrong. $('#login').fadeToggle(fast);

there no such thing like fast in jQuery Correct way is something like this :

$('#login').fadeToggle('fast');

you have to use fast as string.

answered Jun 21, 2015 at 16:31

chiragchavda.ks

5307 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery event handler isn't loading

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related