6

I got a pretty annoying javascript error. The world famous:

uncaught TypeError: Cannot read property "top" of null

Here is the code:

$(function() { var setTitle = function(title, href) { title = 'Derp: ' + title; href = href || ''; history.pushState({id: href}, title, href.replace('#', '/')); document.title = title; }, scroll = function(url, speed) { var href = typeof url == 'string' ? url : $(this).attr('href'), target = $(href), offset = target.offset(), title = target.find('h1').text(); if(typeof url == 'number') { target = [{id:''}]; offset = {top: url}; } // And move the element if(offset.top) { // Set the new URL and title setTitle(title, href); // Make sure we're not moving the contact panel if(target[0].id != 'contact') { $('html, body').animate({scrollTop: offset.top}, speed); } } return false; }; // Handle existing URL fragments on load if(location.pathname.length > 1) { scroll(location.pathname.replace('/', '#'), 0); } $('a#logo').click(function() { $('html,body').animate({scrollTop: 0}); return false; }); // Handle internal link clicks $('a[href^=#]:not(#logo)').click(scroll); // Close the "Get In Touch" box var box = $('#contact'), moveBox = function() { var closing = $(this).attr('class') == 'close', amount = closing ? -(box.height() + 20) : 0, cb = closing ? '' : function() { box.animate({marginTop: -10}, 150); }; box.animate({marginTop: amount}, cb); }; box.css('margin-top', -(box.height() + 20)); $('#contact a.close, #get-in-touch').click(moveBox); // Nasty little fix for vertical centering $('.vertical').each(function() { $(this).css('margin-top', -($(this).height() / 2)); }); // Work panels var parent = $('#work'), panels = parent.children('div'); panels.each(function() { $(this).css('width', 100 / panels.length + '%'); }) parent.css('width', (panels.length * 100) + '%'); // Bind the keyboards $(document).keyup(function(e) { var actions = { // Left 37: function() { var prev = panels.filter('.active').prev().not('small'); if(prev.length > 0) { prev.siblings().removeClass('active'); setTitle(prev.find('h1').text(), prev[0].id); setTimeout(function() { prev.addClass('active'); }, 250); parent.animate({left: '+=100%'}).css('background-color', '#' + prev.attr('data-background')); } }, // Right 39: function() { var next = panels.filter('.active').next(); if(next.length > 0) { next.siblings().removeClass('active'); setTitle(next.find('h1').text(), next[0].id); setTimeout(function() { next.addClass('active'); }, 250); parent.animate({left: '-=100%'}).css('background-color', '#' + next.attr('data-background')); } }, // Down 40: function() { var w = $(window), height = w.height() * panels.children('div').length, h = w.height() + w.scrollTop(); if(h < height) { scroll(h); } }, // Up 38: function() { var w = $(window); $('html,body').animate({scrollTop: w.scrollTop() - w.height()}); } }; // Call a function based on keycode if(actions[e.which]) { actions[e.which](); } e.preventDefault(); return false; }); // Fix crazy resize bugs $(window).resize(function() { var m = $(this), h = m.height(), s = m.scrollTop(); if((h - s) < (h / 2)) { m.scrollTop(h); } //$('html,body').animate({scrollTop: s}); }); // slideshow var woof = function() { var slides = $('#molly li'), active = slides.filter('.active'); if(!active.length) { active = slides.last(); } active.addClass('active'); var next = active.next().length ? active.next() : slides.first(); next.css('opacity', 0).addClass('active').animate({opacity: 1}, function() { active.removeClass('active last-active'); }); }; setInterval(woof, 3000); // easing $.easing.swing = function(v,i,s,u,a,l) { if((i /= a / 2) < 1) { return u / 2 * (Math.pow(i, 3)) + s; } return u / 2 * ((i -= 2) * i * i + 2) + s; }; // Change the default .animate() time: http://forr.st/~PG0 $.fx.speeds._default = 600; }); try{Typekit.load()}catch(e){}

Sorry for this long monster but I thought it could be useful for you to see the whole thing. The Error warning shows up in this part:

// And move the element if(offset.top) {

Uncaught TypeError: Cannot read property 'top' of null

It's line 23 in the code.

That's it. Could you give me a hint on how to solve this problem? Thank you!

Improve this question
6
  • 1
    So, offset = target.offset() returns null - I believe only you can track down the actual cause using your full JS code. Commented Apr 11, 2012 at 8:34
  • thats the full JS. except the jquery mini.js -> code.jquery.com/jquery-1.7.2.min.js Commented Apr 11, 2012 at 8:43
  • This code definitely needs some embedding HTML against which it is run. Have you tried debugging it, e.g. using Chrome Developer Tools? Commented Apr 11, 2012 at 9:03
  • yes. used CDT but cant figure it out :/. URL is: pixelpizza.de/hire4/hire maybe you could be so kind and have a look over it? :) handler.js is the broken script Commented Apr 11, 2012 at 9:44
  • 2
    OK, so you are trying to find an HTML element using the selector "#hire4/hire/" (which is actually a URL) and grab its offset in the page. Looks smelly... Commented Apr 11, 2012 at 11:35

2 Answers 2

Reset to default
2 
var href = typeof url == 'string' ? url : $(this).attr('href'), target = $(href), //line 2 offset = target.offset(), //line 3

I believe this must have something to do with line 2, target should be null when error occurs

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

According to jQuery source, jQuery.fn.offset only returns null if:

  1. the first element in the set doesn't exist (empty set) or
  2. its ownerDocument is falsy (I don't know when that would happen, sorry).

The first option seems more likely, so you should check if target.length > 0 before calling target.offset() and handle the alternative.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.