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

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
Melody ScottAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
What is the error?
Melody ScottAuthor Commented:
It's in dreamweaver, it just says there is a syntax error.
Julian HansenCommented:
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?
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Melody ScottAuthor 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.
Julian HansenCommented:
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.
Melody ScottAuthor Commented:
ok, thanks... I'll go back to the original and see if anything has changed.
Melody ScottAuthor 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
Julian HansenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
Thanks so much, Julian!
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.