Var not defined

[grimski]

I’m using a responsive nav plug-in (responsive-nav.com) and have done for many projects. I love it and it works perfectly. I’ve started using CodeKit which checks javascript before it’s saved and it’s throwing up an error even though the plug-in works on the page. I’m more design/html/css so I just wanted to check i there’s another way to write/call the plug-in. Currently I use this:

$(function(){
    var navigation = responsiveNav(".site-nav__list", {
        insert: "before",
        customToggle: ".site-nav__toggle"
    });
});

I think this is correct from the documentation but I get the following 2 alerts/errors;

‘navigation’ is defined but never used. — column 9
‘responsiveNav’ is not defined. — column 22

I (think I) understand what this means but wondered if there was another way of writing the code? I know a little JavaScript but I am a n00b and I don’t know how to adapt this so it doesn’t use a variable.

[Shikkediel]

As far as I can see, I’m surprised the plugin works. On the documentation page the variable is made global and I would expect it to only work that way.

<!-- Put this right before the </body> closing tag -->
    <script>
        var nav = responsiveNav(".nav-collapse");
    </script>

Now if you use a $(function(){ ... }); around it, the variable is no longer a global but restricted to that function scope.

Do you have a live link maybe?

[grimski]

@Shikkediel yeah it’s a bit strange, even for me who’s not that familiar with javascript.

Here’s an example page: http://moymadethis.com/flex/quote.html

Like I say, it actually works fine. I’d just like the call the script a different way if possible so it doesn’t give me warnings when I compile it.

[grimski]

I was hoping I could write something like this:

$(function(){
    $(".site-nav__list").responsiveNav({
        //insert: "before",
        customToggle: ".site-nav__toggle"
    });
})

I get no errors but unfortunately the plug-in doesn’t work then :/

[Shikkediel]

The script is too hard for me to read well, even when beautified. I can see enough that creating a variable is a necessity though. But since you’ve put your script at the bottom of the page, you don’t really need a $(function(){ .. }) wrapper. But I suspect it’s simply a flaw in CodeKit, works fine in itself.

[Mottie]

Did you try the example provided by the creator?

From looking at the source code, the responsiveNav should be accessible using window.responsiveNav. If it doesn’t exist, then maybe you’re also loading requireJS or commonJS? If so, then responsiveNav is being added as a module (ref).

[Shikkediel]

Good link, I beautified the minified script from the poster’s live page but that one’s definitely a bit more readable…

[grimski]

Like I say I’m a total JS novice but when I saw responsiveNav in the plug-in JS file I assumed I’d be able to target/call it this way.

I used HTML5 boilerplate as a base, the only JS files I’m calling at the foot of the page are:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/respond.min.js"></script>
<script src="js/responsive-nav.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

As well as modernizr-2.8.3.min.js in the head.

In additional to the responsive-nav JS, the only thing main.js includes is Flexslider:

/**
 * Flexslider
 */

$(function(){

    if($(".flexslider").length > 0) {
        $(".flexslider").addClass("loading");
        // Can also be used with $(document).ready()
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                slideshow: true,
                slideshowSpeed: 10000,
                animationSpeed: 400, 
                directionNav: false,
                controlNav: true,
                smoothHeight: true,
                start: function(){
                    $('.flexslider').removeClass('loading');
                }
            });
        });
    }
});

[amanda_]

In CodeKit, sometimes you have to tell it to ignore a variable or function that it thinks is undefined (using that come from another library or plugin). You go to SYNTAX CHECKERS – Custom Globals. And then put a comma separated list in there.

For example in this case you would put
responsiveNav, navigation
in the box. So you’ll stop getting that annoying warning. When there’s a real issue it won’t compile the code.

[grimski]

Thanks @amanda_ I may have to do that. I was hoping I could write it in a different way but it’s not working and it’s probably more hassle than it’s worth!

I’ve used the plug-in for a while now but maybe it’s a bit overkill. There’s probably a lot more simpler, lighter ways to write this code now and get the same results. I suppose the one big plus with the plug-in is it’s flexibility and customisability.

[amanda_]

CodeKit puts out variable not defined for all sorts of things. For example, if you are using greensock, it will tell you that “TweenMax is not defined”… and there’s no other way to use that library without using TweenMax. It’s just part of CodeKit, you tell it to ignore things.

[Author]

Posts