Now I have used the debugger, and this seems to be the only error it catches. And I realize that I could go through each line of what I wrote and figure out what line triggered this portion of jQuery. However in the interest of making jQuery better, I want to understand this error and fix it in the jQuery file.
There is no error in FF, Chrome or Safari. Below is my code:
$(document).ready(
function(){
BarrGallery();
});
function BarrGallery(){
//setting how much the thumbnails peakout when in the hidden position
var thumbNailPeaking = 5;
//thumbarea slide animation
var thumbBarWidth = widther($('ul#gallery li'));
thumbBarWidth *= -1;
thumbBarWidth += thumbNailPeaking;
$('ul#gallery').animate({left: thumbBarWidth }, 1000);
$('#thumbarea').mouseenter(function(){$('ul#gallery').animate({left: '0px'}, 500, 'swing');})
$('#thumbarea').mouseleave(function(){$('ul#gallery').animate({left: thumbBarWidth}, 500, 'swing');})
//enable scrolling on thumbnails
enable();
//fade in first image
var theImage = $('.thumb:first').attr('name');
$('#content').append('<img id="theImage" src="' + theImage + '">');
$('#theImage').hide();
$('#theImage').bind('load', function(){ $('#theImage').fadeIn(500); })
//thumb handler
$('.thumb').each(function(){
//fade in thumbs as they load
$(this).hide();
$(this).bind('load', function(){
$(this).fadeIn(2000);
});
//AJAX in content
$(this).bind("click", function(){
theImage = $(this).attr('name');
$('#theImage').fadeOut(500,function(){
$('#theImage').remove();
//alert (theImage);
$('#content').append('<img id="theImage" src="' + theImage + '" >');
$('#theImage').hide();
$('#theImage').bind('load', function(){
$('#theImage').fadeIn(500);
});
});
});
});
}
//thumb scroller
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 300;
// Cache for performance
var wrapperWidth = $('#thumbarea').width();
var wrapperHeight = $('#thumbarea').height();
// Using outer height to include padding too
var scrollableHeight = $('#thumbareaint').outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();
//When user move mouse over menu
$('#thumbarea').mousemove(function(e){
var wrapperOffset = $('#thumbarea').offset();
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
$('#thumbarea').scrollTop(top);
});
}
//thumbbar width finder
function widther(theDiv){
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width
return totalWidth;
}