Link to home
Start Free TrialLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

What is the error?
Avatar of Melody Scott

ASKER

It's in dreamweaver, it just says there is a syntax error.
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?
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.
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.
ok, thanks... I'll go back to the original and see if anything has changed.
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
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks so much, Julian!
You are welcome.