CODEWITHSUNDEEP
javascriptjquery
ѺȐeallү
ѺȐeallү

Reputation: 3027

jQuery functions never getting executed on .ready()

I'm a little new to jQuery and I am having some issue wiring up my click events. If I put an alert(''); I can see that menu.js is referenced properly but when I alert from inside the .ready() function the alert is never triggered...

JSFiddle: Click Here

Could someone be kind enough to point out my issue? Thanks!

HTML

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Menu Demo</title>
    <link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
    <link href="Content/MenuDemo.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar">
        <img id="navbar-logo" src="Content/images/ingr_logo.png" class="ui-button-icon-primary">
        <img id="navbar-logo" src="Content/images/smaller.png" class="image-right">
    </div>
    <div id="menu1" class="floating-menu ui-menu">
        <div class="floating-menu-header">
            <div class="floating-menu-header-text">Example Menu</div>
            <div class="grip"></div>
            <div><img id="expand1" src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
            <div><img id="drag1" src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
            <div><img id="close1" src="Content/images/Close.png" class="floating-menu-header-icons"></div>
        </div>
        <div class="floating-menu-body"></div>
    </div>
    <div id="menu2" class="floating-menu ui-menu">
        <div class="floating-menu-header">
            <div class="floating-menu-header-text">Example Menu</div>
            <div class="grip"></div>
            <div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
            <div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
            <div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
        </div>
        <div class="floating-menu-body"></div>
    </div>
    <div id="menu3" class="floating-menu ui-menu">
        <div class="floating-menu-header">
            <div class="floating-menu-header-text">Example Menu</div>
            <div class="grip"></div>
            <div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
            <div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
            <div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
        </div>
        <div class="floating-menu-body"></div>
    </div>
    <div id="menu4" class="floating-menu ui-menu">
        <div class="floating-menu-header">
            <div class="floating-menu-header-text">Example Menu</div>
            <div class="grip"></div>
            <div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
            <div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
            <div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
        </div>
        <div class="floating-menu-body"></div>
    </div>
    <!-- Scripts-->
    <script src="Scripts/libs/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="Scripts/libs/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
    <script src="Scripts/site/menu.js" type="text/javascript"></script>
</body>
</html>

menu.js

/// <reference path="../jquery-2.1.1.js" />
/// <reference path="../jquery-ui-1.10.4.js" />

// Make Menus Draggable
function makeMenusDragHandler() {
    $('.locked').click(function () {
        $('.floating-menu').draggable();

    });
}

// Collapse/Expand Height of Navbar 
function smallBigNavbarHandler() {
    $('.image-right').click(function () {
        var navbar = $('.navbar');
        navbar.height(navbar.height() === 51 ? 30 : 15);
    });
}

$(document).ready(function ($) {
    // add handlers
    smallBigNavbarHandler();
    makeMenusDragHandler();
    // setters
});

proj struct

Upvotes: 0

Views: 94

Answers (1)

Amit Joki
Amit Joki

Reputation: 59292

You have two issues:

  • You don't have jQuery included
  • See below

This line:

navbar.height = navbar.height() === 51 ? 30 : 15;

should be:

navbar.height(navbar.height() === 51 ? 30 : 15);

The setter is:

.height(value)

and not 

.height = value

Upvotes: 1

Related Questions