The Chrome and Internet Explorer consoles say 'top' is 'undefined', but Safari and Firefox have no error

Question

I am stuck with this error. Why does Internet Explorer 9 and Chrome version 45 show this error?

Top is undefined

Am I missing something? And some of my HTML layout is also affected in Internet Explorer 9. And also, I don't know if either the font family or width of div in percentage is getting this error. Is there anything to solve this problem?

var bodyScroll = 0;
$(document).ready(function() {

  bodyScroll = $(window).scrollTop();
  currentP = 0;
  currentP1 = 0;
  currentP2 = 0;
  $(window).scroll(function() {

    scrTop = $(window).scrollTop();
    bodyScroll < scrTop ? currentP = currentP - .8 : currentP = currentP + .8;
    $(".mainContainer, .mobileBanner").css('background-position', "0
 " + currentP + "px");
    if (scrTop > $("#core-services .core-banner").position().top - 400) {
      bodyScroll < scrTop ? currentP1 = currentP1 - .8 : currentP1 = currentP1 + .8;
      $("#core-services .core-banner").css('background-position',
 "0 " + currentP1 + "px");

    }
    if (scrTop > $(".core-contact").position().top - 400) {
      bodyScroll < scrTop ? currentP2 = currentP2 - .8 : currentP2 = currentP2 + .8;
      $(".core-contact").css('background-position', "0 " + currentP2 + "px");

    }
    bodyScroll = scrTop;
  });
});

I think you're going to have to post a jsfiddle or some code with html — AwokeKnowing, Jul 21 '15 at 05:49
More generally for the Firefox web console and "undefined": *[Chrome/Firefox console.log always appends a line saying 'undefined'](https://stackoverflow.com/questions/14633968)* — Peter Mortensen, Oct 20 '20 at 18:07

score 0 · Accepted Answer · edited Oct 20 '20 at 18:04

The following works for me without error in Chrome 43 (I'm about to test with Internet Explorer 9)

EDIT: It's working on Internet Explorer 9. So I suspect the error is not in the code you posted. You need to build a minimal example to reproduce the error by taking everything else out of your page except for the relevant code, then post a JSFiddle or the Stack Overflow native code thingy (like this post), then people can try in Internet Explorer 9 and confirm the problem. It's just normal debugging. you'll get it. the position().top should be supported in Internet Explorer 9 and Chrome.

EDIT: as an example of what can go wrong in Internet Explorer, check if you have any global variable with the same name as the id of an HTML element. If you do it can trigger "compatibility mode" which will bump Internet Explorer down to Internet Explorer 8 mode, which did not support the "article" html5 elements, so those wouldn't have a "top" for example.

var bodyScroll = 0;
$(document).ready(function() {

  bodyScroll = $(window).scrollTop();
  currentP = 0;
  currentP1 = 0;
  currentP2 = 0;
  $(window).scroll(function() {

    scrTop = $(window).scrollTop();
    bodyScroll < scrTop ? currentP = currentP - .8 : currentP = currentP + .8;
    $(".mainContainer, .mobileBanner").css('background-position', "0 " + currentP + "px");
    if (scrTop > $("#core-services .core-banner").position().top - 400) {
      bodyScroll < scrTop ? currentP1 = currentP1 - .8 : currentP1 = currentP1 + .8;
      $("#core-services .core-banner").css('background-position', "0 " + currentP1 + "px");

    }
    if (scrTop > $(".core-contact").position().top - 400) {
      bodyScroll < scrTop ? currentP2 = currentP2 - .8 : currentP2 = currentP2 + .8;
      $(".core-contact").css('background-position', "0 " + currentP2 + "px");

    }
    bodyScroll = scrTop;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<section id="core-services">
  <div class="core-banner">
    <img src="images/core-services.jpg" class="img-responsive"/>
  </div>
</section>

@confuseelement you're welcome, hope you got it figured out. — AwokeKnowing, Jul 22 '15 at 05:53

The Chrome and Internet Explorer consoles say 'top' is 'undefined', but Safari and Firefox have no error

1 Answers1