0

I'm working through the Single Page Web Applications book and the first example in it isn't working properly in Chrome, but does work in Firefox. The essential code is the following:

.spa-slider {
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 300px;
  height: 16px;
  cursor: pointer;
  border-radius: 8px 0 0 0;
  background-color: #f00;
}

The JavaScript code is the following:

var spa = (function($) {
  var configMap = {
    extended_height: 434,
    extended_title: 'Click to retract',
    retracted_height: 16,
    retracted_title: 'Click to extend',
    template_html: '<div class="spa-slider"></div>'
  },
      $chatSlider, toggleSlider, onClickSlider, initModule;

  toggleSlider = function() {
    var slider_height = $chatSlider.height();

    console.log("slide_height: " + slider_height);

    if (slider_height == configMap.retracted_height) {
      $chatSlider.animate({height: configMap.extended_height})
          .attr('title', configMap.extended_title);
      return true;
    }
    if (slider_height == configMap.extended_height) {
      $chatSlider.animate({height: configMap.retracted_height})
          .attr('title', configMap.retracted_title);
      return true;
    }
    return false;
  };

  onClickSlider = function(event) {
    toggleSlider();
    return false;
  };

  initModule = function($container) {
    $container.html(configMap.template_html);
    $chatSlider = $container.find('.spa-slider');
    $chatSlider.attr('title', configMap.retracted_title)
        .click(onClickSlider);
    return true;
  };

  return {initModule: initModule};
}(jQuery));

jQuery(document).ready(function() {
  spa.initModule(jQuery('#spa'));
});

My question is essentially the following. The slider doesn't seem to work on Chrome, because console.log("slide_height: " + slider_height); prints 17, so it matches neither of the if guards. On Firefox it prints 16, so the height() property gets the correct value. Can anyone explain why this happens and what is a portable way to write the code?

UPDATE: I use 90% zoom on Chrome and changing it to 100% seems to make the code work correctly. However, the code should clearly work on all zoom levels, so how can this be accomplished? I'm surprised that the book uses code that is so brittle.

eof
  • 309
  • 4
  • 9
  • May be due to how these browsers implement heights. I dont know for sure. However read this for a simpler solution i.e recognize on which browser webpage is opened and apply js accordingly. http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser – san A Mar 27 '17 at 15:48
  • I have a hard time believing that something this simple needs a browser specific solution,which would add significant code bloat. This is actually my first time dabbling with JS, since I volunteered to build a simple demo and I'm using it as an excuse to learn some JS that's been on my todo list for some years. I've always been warned that front-end engineering is a mess... I've been strictly working on low-level back-end stuff for the past 15 years... – eof Mar 27 '17 at 15:59
  • Welcome to front-end! However it is much easier these days to code front-end compared to what it used to be! For your question, declare `var slider_height;` outside of all functions(make it global). Then set value using `slider_height = $chatSlider.height();` within the code that checks for the browser and make adjustments there only. – san A Mar 27 '17 at 16:06

0 Answers0