Why won't this script work on Safari or Chrome?

Question

It works flawlessly on Firefox. For both Chrome and Safari, it seems that my "calc" variable doesnt work. ( http://pmoore17.altervista.org/TWADrama/index.php )

Any type of help is appreciated!

    var hidetop = $("#hidetop");
    var range = $("#hidetop").height();
    var body = $("#wrappercover");

    $(document).on('scroll', function() {

      var scrollTop = $(this).scrollTop();
      var offset = hidetop.offset().top;
      var height = hidetop.outerHeight();
      offset = offset + height;
      var calcA = 1 - (scrollTop - offset + range) / range;

      hidetop.css({
        'opacity': calcA
      });

      if (calcA > '1') {
        hidetop.css({
          'opacity': 1
        });
      } else if (calcA < '0') {
        hidetop.css({
          'opacity': 0
        });
      }
    });

Answer 1

I can see you are having a number in your variable but you are comparing with a string value:

if (calcA > '1') {
//----------^^^--------is not a number
else if (calcA < '0') {
//---------------^^^--------is not a number

 console.log('1 === "1"', 1 === "1"); console.log('1 === "0"', 1 === "0"); console.log('1 === 1', 1 === 1); console.log('0 === "0"', 0 === "0"); 

Answer 2

Maybe you should put the <script></script> tag before the </html> tag. My javascript didn't work but it did after I did this.

Answer 3

I guess $("#hidetop") will not work well if the div with id "hidetop" has not completed loaded.

so you can try this:

$(function() {
var hidetop = $("#hidetop");
    var range = $("#hidetop").height();
    var body = $("#wrappercover");

    $(document).on('scroll', function() {

      var scrollTop = $(this).scrollTop();
      var offset = hidetop.offset().top;
      var height = hidetop.outerHeight();
      offset = offset + height;
      var calcA = 1 - (scrollTop - offset + range) / range;

      hidetop.css({
        'opacity': calcA
      });

      if (calcA > '1') {
        hidetop.css({
          'opacity': 1
        });
      } else if (calcA < '0') {
        hidetop.css({
          'opacity': 0
        });
      }
    });
})