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.
精彩评论