We help IT Professionals succeed at work.

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

167 Views
Last Modified: 2019-01-18
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

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
What is the error?

Author

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

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?

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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Thanks so much, Julian!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions