开发者

jQuery: "A is undefined" error being thrown and JSLint says "jQuery(...) called incorrectly" what is wrong here?

开发者 https://www.devze.com 2023-02-19 20:24 出处:网络
I normally don\'t post this kind of thing but I am completely out of ideas and after hours of trying to fix this thing I simply don\'t know where to look for the error or what this error even means.

I normally don't post this kind of thing but I am completely out of ideas and after hours of trying to fix this thing I simply don't know where to look for the error or what this error even means.

The page that breaks is available here: http://staging.mathewhawley.com/

I have build a little columnizer jQuery plugin which seems to cause this error but to me it looks like everything I've written in the plugin is perfectly valid.

Turning on the Firebug console and JSLint the following is being logged:

jQuery(...) called incorrectly
jquery.lint.js (line 96)
More info:
jquery.lint.js (line 111)
jQuery(...) called incorrectly
jquery.lint.js (line 96)
More info:
jquery.lint.js (line 111)
a is undefined
[Break On This Error] (function(a,b){function cg(a){return d...a:a+"px")}}),a.jQuery=a.$=d})(window);
jquery.min.js (line 16)

Clicking on the "more info" link I get the following:

Location:
jquery.lint.js (line 111)

You passed: ["#projects", undefined, jQuery(Document index.php)]

Available signatures include:
jQuery(selector, [context])
jQuery(el开发者_如何学JAVAement)
jQuery(elementArray)
jQuery(jQuery object)
jQuery()
jQuery(html, [ownerDocument])
jQuery(html, props)
jQuery(callback)

I'm using the latest jQuery version via the Google CDN (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>).

Also just for those that don't like looking at an external page, here is my columnizer script that seems to break things:

script.js // this file invokes all javascript.
jQuery(document).ready(function($) {

    // helper
    function scrollable() {
        if ( $.browser.webkit ) { 
            return $('body'); 
        } else {
            return $('html');
        }
    }

    // =========================
    // = Stuff on the homepage =
    // =========================
    if ( $('#projects').length ) { 

        $('#projects').children().hide();

        // Create column layout
        $(window).load(function() {

            $('#projects').columnize();

            function _reveal( el ) {
                if ( el !== undefined ) { 
                    el.fadeIn( 100 , function() { _reveal($(this).next()); });
                }
            }
            _reveal( $('#projects').children().first() );
        });

    }

    // =============================
    // = Stuff on the project page =
    // =============================
    // Add sticky project info
    if ( $('#project').length ) { 

        $('article','#project').sticky();
        // Back to Top link
        $('nav a[href=#tothetop]').click(function(e) {
            e.preventDefault();
            scrollable().animate({'scrollTop':0}, 400);
        });

    }

});

.

 jquery.columnizer.js // the columnizer helper script
(function($){
    $.fn.extend({ 
        columnize: function(options) {

            var defaults = {
                columns : 3,
                gutter  : 20
            },
                options = $.extend(defaults, options),
                o = options,
                internal = {},
                _i = internal;

            _i.container        = $(this); // container
            _i.containerHeight  = 0; // container
            _i.items            = _i.container.children(); // elements inside container
            _i.w                = _i.items.first().width();
            _i.columns          = {};
            _i.colHeight        = {};

            // Setup the container and its children's position
            _i.container.css({
                'position': 'relative'
            }).children().css({
                'position': 'absolute'
            });

            // cycle through all items and place them into arrays by column
            _i.items.each(function(i) {

                var itemPlace = i%o.columns; // get the column
                var col = itemPlace + 1; // start index at 1

                if ( _i.columns[col] === undefined ) {
                    _i.columns[col] = [$(this)]; // if the column doesn't already exist create it
                } else {
                    _i.columns[col].push($(this)); // otherwise add the current element to the correct column
                }

                var left = itemPlace * (_i.w + o.gutter); // calculate the left offset for the columns

                $(this).css({
                    'left': left + 'px', // apply the offset
                    'margin-left': 0     // and make sure no margin-left is on the container
                });

            });

            // Cycle through the existing columns
            for (var x=1; x <= o.columns; x++) {

                if ( _i.colHeight[x] === undefined ) { // create variables for storing the top offset to be applied to elements of this column
                     _i.colHeight[x] = 0; // start at creating it and setting it to 0
                }

                $.each(_i.columns[x], function(z, el) { // within each column cycle through its items

                    $el = $(el);
                    $el.css('top', _i.colHeight[x]+'px'); // set the top offset
                    _i.colHeight[x] += $el.outerHeight(true); // then add this elements height to the same variable

                });

            };
            // go through the columns
            $.each(_i.colHeight, function(key, val) {
                if ( _i.containerHeight < val ) { 
                     _i.containerHeight = val; // if this column's height is greater than the currently stored height, replace the height with this one
                }
            });
            _i.container.css({
                'height': _i.containerHeight+'px', // set the outer container to the tallest column's height
                'overflow':'hidden'
            });
            // done.
        }
    });
})(jQuery);

Any help would be very much appreciated.

Thanks for reading this far,

Jannis


Your columnizer defaults to three columns (columns is 3 in its defaults object.) When you call it on "#projects", there are only two articles. Your plugin (on line 50, jquery.columnize.js) is looping from x = 1 to 3 on an object with only two columns. That's then passing a null object to jQuery's each() function, which is what is causing the error.

0

精彩评论

暂无评论...
验证码 换一张
取 消