Cannot read property 'top' of undefined - jQuery

Question

I'm getting the following error in Chrome dev console.

Uncaught TypeError: Cannot read property 'top' of undefined jquery.tools.min.js:19
c                                                           jquery.tools.min.js:19
a.extend.show                                               jquery.tools.min.js:19
(anonymous function)                                        jquery.tools.min.js:19
b.event.special.(anonymous function).handle                 jquery.min.js:4
b.event.dispatch                                            jquery.min.js:3
v.handle

If the site is left idle on a page the amount of the errors keeps increasing even with no input from the user. What is causing this?

tab jQuery:

$(document).ready(function () {
  $(this).scrollTop(0);                                                     //send user to top of page

/***********************************************************************************************************

LOAD TAB CONTENT

***********************************************************************************************************/
  $("#tabContent1").load("external/content.html", function () {                                 
    $("#offLogo").css({                                                     //apply CSS to offLogo
      width: "600px",
      margin: "auto",
      padding: "0px 0px 10px 0px"
    });
  });
  $("#tabContent2, #tabContent3, #tabContent4, #tabContent5, #tabContent6, #tabContent7").hide();       //hide tab content

  $("a").hover(function () {
    $(this).toggleClass('hover');                                           //toggle the hover class when user hovers over tab
  });

  $('a[name="#tabContent1"]').click(function () {                           //when user clicks the tab with the name tabContent1 do the following
    $("#tab2, #tab3, #tab4, #tab5, #tab6, #tab7").removeClass('activeTab');               //removes the activeTab class from all other tabs
    $(this).addClass('activeTab');                                          //adds activeTab class to the tab that was clicked
    $("#tabContent1").load("external/content.html", function () {           //loads external html file into content pane of the tab
      $("#offLogo").css({
        width: "600px",
        margin: "auto",
        padding: "0px 0px 10px 0px"
      });
    });
    $("#tabContent1").show();                                               //shows the content of the tab
    $("#tabContent2, #tabContent3, #tabContent4, #tabContent5, #tabContent6, #tabContent7").hide();
  });

  $('a[name="#tabContent2"]').click(function () {
    $("#tab1, #tab3, #tab4, #tab5, #tab6, #tab7").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent2").show();
    $("#tabContent1, #tabContent3, #tabContent4, #tabContent5, #tabContent6, #tabContent7").hide();
  });

  $('a[name="#tabContent3"]').click(function () {
    $("#tab1, #tab2, #tab4, #tab5, #tab6, #tab7").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent3").show();
    $("#tabContent1, #tabContent2, #tabContent4, #tabContent5, #tabContent6, #tabContent7").hide();
  });

  $('a[name="#tabContent4"]').click(function () {
    $("#tab1, #tab2, #tab3, #tab5, #tab6, #tab7").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent4").show();
    $("#tabContent1, #tabContent2, #tabContent3, #tabContent5, #tabContent6, #tabContent7").hide();
  });

  $('a[name="#tabContent5"]').click(function () {
    $("#tab1, #tab2, #tab3, #tab4, #tab6, #tab7").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent5").show();
    $("#tabContent1, #tabContent2, #tabContent3, #tabContent4, #tabContent6, #tabContent7").hide();
  });

  $('a[name="#tabContent6"]').click(function () {
    $("#tab1, #tab2, #tab3, #tab4, #tab5, #tab7").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent6").show();
    $("#tabContent1, #tabContent2, #tabContent3, #tabContent4, #tabContent5, #tabContent7").hide();
  });

  $('a[name="#tabContent7"]').click(function () {
    $("#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent7").show();
    $("#tabContent1, #tabContent2, #tabContent3, #tabContent4, #tabContent5, #tabContent6").hide();
  });

Tooptip:

  $(function () {
    $(document).tooltip();  //shows title attribute as a tooltip
  });

When you mouse out of the window (say onto the Chrome address bar) and then mouse on to the tab you get the error but if the mouse stays withen the page and mouses over the tab the error does not occur. With some help this has been narrowed down to a problem with the tooptip function.

You can't expect people to follow some random link to a website they've never seen before in order to help you. Narrow the problem down to the minimum necessary to make it happen, and post that code **in the question itself**. E.g., create an [SSCCE](http://sscce.org), and post it. (And that's not the only reason for putting the code *in* the question: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question) — T.J. Crowder, Feb 27 '13 at 18:10
The error is originally being caused in your code somewhere. You need to use a JavaScript debugger to try and narrow it down. — Blazemonger, Feb 27 '13 at 18:11
I'm not sure where in the JavaScript it is comming from @T.J.Crowder would you like me post it all? — Colin747, Feb 27 '13 at 18:12
@Colin747: No. Again: *"Narrow the problem down to the minimum necessary to make it happen..."* (I'm not saying that won't take time and effort) *"...and post that code..."* — T.J. Crowder, Feb 27 '13 at 18:14
@T.J.Crowder can you give me some advice on how to narrow it down? — Colin747, Feb 27 '13 at 18:14
The error is being generated every time you hover over the top nav tabs, and the javascript is in the common.js file. — MattDiamant, Feb 27 '13 at 18:15
@Colin747: Use the debugger built into your browser. Set breakpoints. Single-step through code. Look for bits of code that are fired on timers, as you say time is part of the equation. Remove bits of the page until the problem stops happening, then add back bits until it starts happening again. Debugging, basically. — T.J. Crowder, Feb 27 '13 at 18:15
The problem isn't occurring without user input, it's not a problem with a timed function. It's a problem with the top nav. — MattDiamant, Feb 27 '13 at 18:16
@MattDiamant just to clarify when you mouse out of the window (say onto the Chrome address bar) and then mouse on to the tab you get the error but if the mouse stays withen the page and mouses over the tab the error does not occur? — Colin747, Feb 27 '13 at 18:17
Its a problem with your tooltip function. Try removing it to see if there is still an error. Once you do that, you may need un-compressed versions of the plugins to do some debugging. — Ryan George, Feb 27 '13 at 18:18
@RyanGeorge the error does stop when I comment out the tooptip function. — Colin747, Feb 27 '13 at 18:19
@Colin747 Okay, now that you have narrowed it down, try to narrow the problem down to a very specific environment. Remove all extraneous scripts, perhaps make a test case on jsfiddle.net. Once you have done that the good people here will gladly help you fix the issue. — Ryan George, Feb 27 '13 at 18:23
May this be related to [this](http://stackoverflow.com/q/14923301/417685)? — Alexander, Feb 27 '13 at 18:24
@Alexander it seems to be, the error does not show when the tools link is removed. — Colin747, Feb 27 '13 at 18:27
@Alexander I downloaded a custom set of tools with out the tooltip feature and the error is now gone. — Colin747, Feb 27 '13 at 18:32

score 1 · Accepted Answer · answered Feb 27 '13 at 18:33

1

I have made a test case here:

http://jsfiddle.net/3MxL2/1/

$("a").tooltip();

It looks like there is just an issue with the jquery tools tooltip plugin, it doesn't let you bind to the document object. Try just using the generic "a" tag to bind to and it should work. There are still some styling errors, but it should fix the immediate problem.

answered Feb 27 '13 at 18:33

Ryan George

186
9

I'm afraid Alexander beat you to it, I've downloaded a customer set of tools without the tooltip functions (as I'm using the jQuery UI library for tooltips) and the error is now gone. – Colin747 Feb 27 '13 at 18:36
Splendid. Glad it is working. – Ryan George Feb 27 '13 at 18:38

Cannot read property 'top' of undefined - jQuery

1 Answers1