CODEWITHSUNDEEP
javascriptjqueryhtmlcss
FarFar
FarFar

Reputation: 141

Javascript/jQuery event handler isn't loading

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.

Upvotes: 0

Views: 44

Answers (2)

guest271314
guest271314

Reputation: 1

, -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>

Upvotes: 1

chiragchavda.ks
chiragchavda.ks

Reputation: 530

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.

Upvotes: 0

Related Questions