Trying to remove a section of javascript, getting a syntax error.

Melody Scott
Melody Scott used Ask the Experts™
on
Hi, Please see http://dev.magickitchen.com/weight-loss-meal-delivery/  - I don't think you'll need to log in.

I have an earlier question, https://www.experts-exchange.com/questions/29132073/White-space-on-scroll.html  in which I got a lot of help, but now I have a javascript related question that sparing from that.

Scott said to remove the headroom plugin after fixing the code errors. I made the change on the last line, and now the errors are gone (thanks, Scott!).

But now when I try to remove the headroom section, I get a syntax error. I am trying to remove this exact code:
      function Headroom (elem, options) {
        options = extend(options, Headroom.options);

        this.lastKnownScrollY = 0;
        this.elem             = elem;
        this.tolerance        = normalizeTolerance(options.tolerance);
        this.classes          = options.classes;
        this.offset           = options.offset;
        this.scroller         = options.scroller;
        this.initialised      = false;
        this.onPin            = options.onPin;
        this.onUnpin          = options.onUnpin;
        this.onTop            = options.onTop;
        this.onNotTop         = options.onNotTop;
        this.onBottom         = options.onBottom;
        this.onNotBottom      = options.onNotBottom;
      }
      Headroom.prototype = {
        constructor : Headroom,

        /**
         * Initialises the widget
         */
        init : function() {
          if(!Headroom.cutsTheMustard) {
            return;
          }

          this.debouncer = new Debouncer(this.update.bind(this));
          this.elem.classList.add(this.classes.initial);

          // defer event registration to handle browser
          // potentially restoring previous scroll position
          setTimeout(this.attachEvent.bind(this), 100);

          return this;
        },

        /**
         * Unattaches events and removes any classes that were added
         */
        destroy : function() {
          var classes = this.classes;

          this.initialised = false;
          this.elem.classList.remove(classes.unpinned, classes.pinned, classes.top, classes.notTop, classes.initial);
          this.scroller.removeEventListener('scroll', this.debouncer, false);
        },

        /**
         * Attaches the scroll event
         * @private
         */
        attachEvent : function() {
          if(!this.initialised){
            this.lastKnownScrollY = this.getScrollY();
            this.initialised = true;
            this.scroller.addEventListener('scroll', this.debouncer, false);

            this.debouncer.handleEvent();
          }
        },

        /**
         * Unpins the header if it's currently pinned
         */
        unpin : function() {
          var classList = this.elem.classList,
            classes = this.classes;

          if(classList.contains(classes.pinned) || !classList.contains(classes.unpinned)) {
            classList.add(classes.unpinned);
            classList.remove(classes.pinned);
            this.onUnpin && this.onUnpin.call(this);
          }
        },

        /**
         * Pins the header if it's currently unpinned
         */
        pin : function() {
          var classList = this.elem.classList,
            classes = this.classes;

          if(classList.contains(classes.unpinned)) {
            classList.remove(classes.unpinned);
            classList.add(classes.pinned);
            this.onPin && this.onPin.call(this);
          }
        },

        /**
         * Handles the top states
         */
        top : function() {
          var classList = this.elem.classList,
            classes = this.classes;

          if(!classList.contains(classes.top)) {
            classList.add(classes.top);
            classList.remove(classes.notTop);
            this.onTop && this.onTop.call(this);
          }
        },

        /**
         * Handles the not top state
         */
        notTop : function() {
          var classList = this.elem.classList,
            classes = this.classes;

          if(!classList.contains(classes.notTop)) {
            classList.add(classes.notTop);
            classList.remove(classes.top);
            this.onNotTop && this.onNotTop.call(this);
          }
        },

        bottom : function() {
          var classList = this.elem.classList,
            classes = this.classes;

          if(!classList.contains(classes.bottom)) {
            classList.add(classes.bottom);
            classList.remove(classes.notBottom);
            this.onBottom && this.onBottom.call(this);
          }
        },

        /**
         * Handles the not top state
         */
        notBottom : function() {
          var classList = this.elem.classList,
            classes = this.classes;

          if(!classList.contains(classes.notBottom)) {
            classList.add(classes.notBottom);
            classList.remove(classes.bottom);
            this.onNotBottom && this.onNotBottom.call(this);
          }
        },

        /**
         * Gets the Y scroll position
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
         * @return {Number} pixels the page has scrolled along the Y-axis
         */
        getScrollY : function() {
          return (this.scroller.pageYOffset !== undefined)
            ? this.scroller.pageYOffset
            : (this.scroller.scrollTop !== undefined)
              ? this.scroller.scrollTop
              : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        },

        /**
         * Gets the height of the viewport
         * @see http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
         * @return {int} the height of the viewport in pixels
         */
        getViewportHeight : function () {
          return window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
        },

        /**
         * Gets the physical height of the DOM element
         * @param  {Object}  elm the element to calculate the physical height of which
         * @return {int}     the physical height of the element in pixels
         */
        getElementPhysicalHeight : function (elm) {
          return Math.max(
            elm.offsetHeight,
            elm.clientHeight
          );
        },

        /**
         * Gets the physical height of the scroller element
         * @return {int} the physical height of the scroller element in pixels
         */
        getScrollerPhysicalHeight : function () {
          return (this.scroller === window || this.scroller === document.body)
            ? this.getViewportHeight()
            : this.getElementPhysicalHeight(this.scroller);
        },

        /**
         * Gets the height of the document
         * @see http://james.padolsey.com/javascript/get-document-height-cross-browser/
         * @return {int} the height of the document in pixels
         */
        getDocumentHeight : function () {
          var body = document.body,
            documentElement = document.documentElement;

          return Math.max(
            body.scrollHeight, documentElement.scrollHeight,
            body.offsetHeight, documentElement.offsetHeight,
            body.clientHeight, documentElement.clientHeight
          );
        },

        /**
         * Gets the height of the DOM element
         * @param  {Object}  elm the element to calculate the height of which
         * @return {int}     the height of the element in pixels
         */
        getElementHeight : function (elm) {
          return Math.max(
            elm.scrollHeight,
            elm.offsetHeight,
            elm.clientHeight
          );
        },

        /**
         * Gets the height of the scroller element
         * @return {int} the height of the scroller element in pixels
         */
        getScrollerHeight : function () {
          return (this.scroller === window || this.scroller === document.body)
            ? this.getDocumentHeight()
            : this.getElementHeight(this.scroller);
        },

        /**
         * determines if the scroll position is outside of document boundaries
         * @param  {int}  currentScrollY the current y scroll position
         * @return {bool} true if out of bounds, false otherwise
         */
        isOutOfBounds : function (currentScrollY) {
          var pastTop  = currentScrollY < 0,
            pastBottom = currentScrollY + this.getScrollerPhysicalHeight() > this.getScrollerHeight();

          return pastTop || pastBottom;
        },

        /**
         * determines if the tolerance has been exceeded
         * @param  {int} currentScrollY the current scroll y position
         * @return {bool} true if tolerance exceeded, false otherwise
         */
        toleranceExceeded : function (currentScrollY, direction) {
          return Math.abs(currentScrollY-this.lastKnownScrollY) >= this.tolerance[direction];
        },

        /**
         * determine if it is appropriate to unpin
         * @param  {int} currentScrollY the current y scroll position
         * @param  {bool} toleranceExceeded has the tolerance been exceeded?
         * @return {bool} true if should unpin, false otherwise
         */
        shouldUnpin : function (currentScrollY, toleranceExceeded) {
          var scrollingDown = currentScrollY > this.lastKnownScrollY,
            pastOffset = currentScrollY >= this.offset;

          return scrollingDown && pastOffset && toleranceExceeded;
        },

        /**
         * determine if it is appropriate to pin
         * @param  {int} currentScrollY the current y scroll position
         * @param  {bool} toleranceExceeded has the tolerance been exceeded?
         * @return {bool} true if should pin, false otherwise
         */
        shouldPin : function (currentScrollY, toleranceExceeded) {
          var scrollingUp  = currentScrollY < this.lastKnownScrollY,
            pastOffset = currentScrollY <= this.offset;

          return (scrollingUp && toleranceExceeded) || pastOffset;
        },

        /**
         * Handles updating the state of the widget
         */
        update : function() {
          var currentScrollY  = this.getScrollY(),
            scrollDirection = currentScrollY > this.lastKnownScrollY ? 'down' : 'up',
            toleranceExceeded = this.toleranceExceeded(currentScrollY, scrollDirection);

          if(this.isOutOfBounds(currentScrollY)) { // Ignore bouncy scrolling in OSX
            return;
          }

          if (currentScrollY <= this.offset ) {
            this.top();
          } else {
            this.notTop();
          }

          if(currentScrollY + this.getViewportHeight() >= this.getScrollerHeight()) {
            this.bottom();
          }
          else {
            this.notBottom();
          }

          if(this.shouldUnpin(currentScrollY, toleranceExceeded)) {
            this.unpin();
          }
          else if(this.shouldPin(currentScrollY, toleranceExceeded)) {
            this.pin();
          }

          this.lastKnownScrollY = currentScrollY;
        }
      };
      /**
       * Default options
       * @type {Object}
       */
      Headroom.options = {
        tolerance : {
          up : 0,
          down : 0
        },
        offset : 0,
        scroller: window,
        classes : {
          pinned : 'headroom--pinned',
          unpinned : 'headroom--unpinned',
          top : 'headroom--top',
          notTop : 'headroom--not-top',
          bottom : 'headroom--bottom',
          notBottom : 'headroom--not-bottom',
          initial : 'headroom'
        }
      };
      Headroom.cutsTheMustard = typeof features !== 'undefined' && features.rAF && features.bind && features.classList;

      return Headroom;
    })

Open in new window


And when I do, Dreamweaver says there is a syntax error, and gives the last line of the file as the error line.

I'm also uploading the plugin file itself. Probaby I a just missing a semi-colon or a closing bracket, but as a neophyte I'm stumped. Thanks
plugins.js.txt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
What is the error?

Author

Commented:
It's in dreamweaver, it just says there is a syntax error.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Usually it will say a line number and give additional information.
I am guessing when you removed the code you removed something you shouldn't have or left something behind (like a bracket or parenthesis).

Do you get the same error in the browser?
Do you have a link that shows the syntax error?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi- Ok, you can see the js at: http://dev.magickitchen.com/js/plugins.js

I can't minify it, I get:
// Error : Unexpected token punc «;», expected punc «)»
// Line  : 4148
// Col   : 4

What I can do is point the page to the unminified version if you like.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Your plugins file is in a bit of a mess.

You are missing some closing }() but it is unclear where they should go - this is why it won't minify and probably also why it is not working.

You need to rebuild that plugins file and ensure that everything you put in there is properly formatted and syntactically correct.

Author

Commented:
ok, thanks... I'll go back to the original and see if anything has changed.

Author

Commented:
Hi- we got the original from the team who built the website, and the original file is identical to the one we have now. I'm uploading it, can you tell me why you say it's a mess? I'm not getting any syntax errors until I try to remove the headroom section. Thanks.
plugins.js.txt
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
The problem was that in your plugins.js file you posted the opening { at the top of the file did not have a matching closing } at the bottom of the file.

This created a problem in that it was not clear where the closing } should go - obviously in removing headroom you took out more lines than you should have.

By comparing the original file (the last one you submitted) to your plugins.js I found that this was just before the
// ISOTOPE comment
You had this (around line 142)
      function normalizeTolerance (t) {
        return t === Object(t) ? t : { down : t, up : t };
      }

	
// ISOTOPE

Open in new window

And you should have had this
      function normalizeTolerance (t) {
        return t === Object(t) ? t : { down : t, up : t };
      }
    })); // <<==== you removed this

	
// ISOTOPE

Open in new window

Adding those back in the file is now correct and minifies.

I have attached fixed file and min version
plugins.fixed.js
plugins.fixed.min.js

Author

Commented:
Thanks so much, Julian!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial