Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="baron baron__clipper">
  <div class="baron__scroller">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem fugiat dolores voluptate, eum cumque? Odio, quos, placeat. Iusto accusantium maxime, suscipit nisi molestias, iste magnam natus. Modi, repellat officiis!</p>
    <div class="baron__track">    <div class="baron__bar">
      </div>
      </div>
    </div>
      </div>
              
            
!

CSS

              
                html, baron {
  overflow: hidden;
  height: 100%; }

/* line 13, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/_styles.scss */
body, .baron__scroller {
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch; }

/* line 19, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/_styles.scss */
a:focus, button:focus {
  outline: 3px solid #5491e2; }

/* line 23, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/_styles.scss */
[data-whatinput="keyboard"] input:focus {
  outline: 3px solid #5491e2 !important; }

.baron {
  height: 100%; }

/* line 5, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron__clipper {
  position: relative;
  overflow: hidden; }

/* line 10, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron__scroller {
  overflow-y: scroll;
  -ms-overflow-style: none;
  box-sizing: border-box;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* remove line to customize scrollbar in iOs */ }
  /* line 18, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
  .baron__scroller::-webkit-scrollbar {
    width: 0;
    height: 0; }

/* line 24, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron__track {
  opacity: 1;
  position: absolute;
  z-index: 3;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 10px;
  background: rgba(77, 77, 77, 0.3); }

/* line 35, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron._scrollbar .baron__track {
  display: block; }

/* line 39, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron__free {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0; }

/* line 46, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron__bar {
  position: absolute;
  right: 0;
  z-index: 3;
  width: 10px;
  background: #262626;
  opacity: .75;
  transition: 0.25s opacity ease; }
  /* line 54, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
  .baron__bar:hover {
    opacity: .9; }
    /* line 56, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
    .baron__bar:hover:active {
      opacity: .9; }

/* line 63, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron._scrollbar .baron__bar {
  display: block;
  visibility: visible;
  pointer-events: auto; }

/* line 68, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron.fs-navigation-lock .baron__bar {
  opacity: 0;
  pointer-events: none; }

/* line 74, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/baron.scss */
.baron__control {
  display: none; }

/* line 1, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/_helpers.scss */
noscript {
  position: relative;
  width: 100%;
  display: block;
  color: #fff;
  background: #CA2E2E;
  z-index: 10000;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 1.25rem;
  padding: 1.875rem; }

/* line 16, /Users/alanroy/Documents/Projects/design-7/src/assets/scss/components/_helpers.scss */
.scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px; }

/* line 24, /Users/alanroy/Documents/Projects/design-




              
            
!

JS

              
                (function(scopedWindow, undefined) {
    'use strict';

    var onClient = typeof window != 'undefined';
    var $ = scopedWindow.$;
    var _baron = baron; // Stored baron value for noConflict usage
    var pos = ['left', 'top', 'right', 'bottom', 'width', 'height'];
    // Global store for all baron instances (to be able to dispose them on html-nodes)
    var instances = [];
    var origin = {
        v: { // Vertical
            x: 'Y', pos: pos[1], oppos: pos[3], crossPos: pos[0], crossOpPos: pos[2],
            size: pos[5],
            crossSize: pos[4], crossMinSize: 'min-' + pos[4], crossMaxSize: 'max-' + pos[4],
            client: 'clientHeight', crossClient: 'clientWidth',
            scrollEdge: 'scrollLeft',
            offset: 'offsetHeight', crossOffset: 'offsetWidth', offsetPos: 'offsetTop',
            scroll: 'scrollTop', scrollSize: 'scrollHeight'
        },
        h: { // Horizontal
            x: 'X', pos: pos[0], oppos: pos[2], crossPos: pos[1], crossOpPos: pos[3],
            size: pos[4],
            crossSize: pos[5], crossMinSize: 'min-' + pos[5], crossMaxSize: 'max-' + pos[5],
            client: 'clientWidth', crossClient: 'clientHeight',
            scrollEdge: 'scrollTop',
            offset: 'offsetWidth', crossOffset: 'offsetHeight', offsetPos: 'offsetLeft',
            scroll: 'scrollLeft', scrollSize: 'scrollWidth'
        }
    };

    // Some ugly vars
    var opera12maxScrollbarSize = 17;
    // I hate you https://github.com/Diokuz/baron/issues/110
    var macmsxffScrollbarSize = 15;
    var macosxffRe = /[\s\S]*Macintosh[\s\S]*\) Gecko[\s\S]*/;
    var isMacFF = macosxffRe.test(scopedWindow.navigator && scopedWindow.navigator.userAgent);

    // removeIf(production)
    var log = function() {
        baron.fn.log.apply(this, arguments);
    };
    var liveBarons = 0;
    var shownErrors = {
        liveTooMany: false,
        allTooMany: false
    };
    // endRemoveIf(production)

    // window.baron and jQuery.fn.baron points to this function
    function baron(params) {
        var jQueryMode;
        var roots;
        var withParams = !!params;
        var defaultParams = {
            $: scopedWindow.jQuery,
            direction: 'v',
            barOnCls: '_scrollbar',
            resizeDebounce: 0,
            event: function(elem, event, func, mode) {
                params.$(elem)[mode || 'on'](event, func);
            },
            cssGuru: false,
            impact: 'scroller',
            position: 'static'
        };

        params = params || {};

        // Extending default params by user-defined params
        for (var key in defaultParams) {
            if (params[key] === undefined) {
                params[key] = defaultParams[key];
            }
        };

        // removeIf(production)
        if (!params.$) {
            log('error', [
                'no jQuery nor params.$ detected',
                'https://github.com/Diokuz/baron/blob/master/docs/logs/no-jquery-detected.md'
            ].join(', '), params);
        }
        if (params.position == 'absolute' && params.impact == 'clipper') {
            log('error', [
                'Simultaneous use of `absolute` position and `clipper` impact values detected.',
                'Those values cannot be used together.',
                'See more https://github.com/Diokuz/baron/issues/138'
            ].join(' '), params);
        }
        // endRemoveIf(production)

        // this - something or jQuery instance
        jQueryMode = params.$ && this instanceof params.$;

        if (params._chain) {
            roots = params.root;
        } else if (jQueryMode) {
            params.root = roots = this;
        } else if (params.$) {
            roots = params.$(params.root || params.scroller);
        } else {
            roots = []; // noop mode, like jQuery when no matched html-nodes found
        }

        var instance = new baron.fn.constructor(roots, params, withParams);

        if (instance.autoUpdate) {
            instance.autoUpdate();
        }

        return instance;
    }

    function arrayEach(obj, iterator) {
        var i = 0;

        if (obj.length === undefined || obj === scopedWindow) obj = [obj];

        while (obj[i]) {
            iterator.call(this, obj[i], i);
            i++;
        }
    }

    // shortcut for getTime
    function getTime() {
        return new Date().getTime();
    }

    // removeIf(production)
    baron._instances = instances;
    // endRemoveIf(production)

    baron.fn = {
        constructor: function(roots, totalParams, withParams) {
            var params = clone(totalParams);

            // Intrinsic params.event is not the same as totalParams.event
            params.event = function(elems, e, func, mode) {
                arrayEach(elems, function(elem) {
                    totalParams.event(elem, e, func, mode);
                });
            };

            this.length = 0;

            arrayEach.call(this, roots, function(root, i) {
                var attr = manageAttr(root, params.direction);
                var id = +attr; // Could be NaN

                // baron() can return existing instances,
                // @TODO update params on-the-fly
                // https://github.com/Diokuz/baron/issues/124
                if (id == id && attr !== null && instances[id]) {
                    // removeIf(production)
                    if (withParams) {
                        log('error', [
                            'repeated initialization for html-node detected',
                            'https://github.com/Diokuz/baron/blob/master/docs/logs/repeated.md'
                        ].join(', '), totalParams.root);
                    }
                    // endRemoveIf(production)

                    this[i] = instances[id];
                } else {
                    var perInstanceParams = clone(params);

                    // root and scroller can be different nodes
                    if (params.root && params.scroller) {
                        perInstanceParams.scroller = params.$(params.scroller, root);
                        if (!perInstanceParams.scroller.length) {
                            // removeIf(production)
                            console.log('Scroller not found!', root, params.scroller);
                            // endRemoveIf(production)
                            return;
                        }
                    } else {
                        perInstanceParams.scroller = root;
                    }

                    perInstanceParams.root = root;
                    this[i] = init(perInstanceParams);
                }

                this.length = i + 1;
            });

            this.params = params;
        },

        dispose: function() {
            var params = this.params;

            arrayEach(this, function(instance, index) {
                instance.dispose(params);
                instances[index] = null;
            });

            this.params = null;
        },

        update: function() {
            var args = arguments;

            arrayEach(this, function(instance, index) {
                // instance cannot be null, because it is stored by user
                instance.update.apply(instance, args);
            });
        },

        // Restriction: only the same scroller can be used
        baron: function(params) {
            params.root = [];
            if (this.params.root) {
                params.scroller = this.params.scroller;
            }

            arrayEach.call(this, this, function(elem) {
                params.root.push(elem.root);
            });
            params.direction = (this.params.direction == 'v') ? 'h' : 'v';
            params._chain = true;

            return baron(params);
        }
    };

    function manageEvents(item, eventManager, mode) {
        // Creating new functions for one baron item only one time
        item._eventHandlers = item._eventHandlers || [
            {
                // onScroll:
                element: item.scroller,

                handler: function(e) {
                    item.scroll(e);
                },

                type: 'scroll'
            }, {
                // css transitions & animations
                element: item.root,

                handler: function() {
                    item.update();
                },

                type: 'transitionend animationend'
            }, {
                // onKeyup (textarea):
                element: item.scroller,

                handler: function() {
                    item.update();
                },

                type: 'keyup'
            }, {
                // onMouseDown:
                element: item.bar,

                handler: function(e) {
                    e.preventDefault(); // Text selection disabling in Opera
                    item.selection(); // Disable text selection in ie8
                    item.drag.now = 1; // Save private byte
                    if (item.draggingCls) {
                        $(item.root).addClass(item.draggingCls);
                    }
                },

                type: 'touchstart mousedown'
            }, {
                // onMouseUp:
                element: document,

                handler: function() {
                    item.selection(1); // Enable text selection
                    item.drag.now = 0;
                    if (item.draggingCls) {
                        $(item.root).removeClass(item.draggingCls);
                    }
                },

                type: 'mouseup blur touchend'
            }, {
                // onCoordinateReset:
                element: document,

                handler: function(e) {
                    if (e.button != 2) { // Not RM
                        item._pos0(e);
                    }
                },

                type: 'touchstart mousedown'
            }, {
                // onMouseMove:
                element: document,

                handler: function(e) {
                    if (item.drag.now) {
                        item.drag(e);
                    }
                },

                type: 'mousemove touchmove'
            }, {
                // @TODO make one global listener
                // onResize:
                element: scopedWindow,

                handler: function() {
                    item.update();
                },

                type: 'resize'
            }, {
                // @todo remove
                // sizeChange:
                element: item.root,

                handler: function() {
                    item.update();
                },

                type: 'sizeChange'
            }, {
                // Clipper onScroll bug https://github.com/Diokuz/baron/issues/116
                element: item.clipper,

                handler: function() {
                    item.clipperOnScroll();
                },

                type: 'scroll'
            }
        ];

        arrayEach(item._eventHandlers, function(event) {
            if (event.element) {
                eventManager(event.element, event.type, event.handler, mode);
            }
        });

        // if (item.scroller) {
        //     event(item.scroller, 'scroll', item._eventHandlers.onScroll, mode);
        // }
        // if (item.bar) {
        //     event(item.bar, 'touchstart mousedown', item._eventHandlers.onMouseDown, mode);
        // }
        // event(document, 'mouseup blur touchend', item._eventHandlers.onMouseUp, mode);
        // event(document, 'touchstart mousedown', item._eventHandlers.onCoordinateReset, mode);
        // event(document, 'mousemove touchmove', item._eventHandlers.onMouseMove, mode);
        // event(window, 'resize', item._eventHandlers.onResize, mode);
        // if (item.root) {
        //     event(item.root, 'sizeChange', item._eventHandlers.onResize, mode);
        //     // Custon event for alternate baron update mechanism
        // }
    }

    // set, remove or read baron-specific id-attribute
    // @returns {String|null} - id node value, or null, if there is no attr
    function manageAttr(node, direction, mode, id) {
        var attrName = 'data-baron-' + direction + '-id';

        if (mode == 'on') {
            node.setAttribute(attrName, id);
        } else if (mode == 'off') {
            node.removeAttribute(attrName);
        } else {
            return node.getAttribute(attrName);
        }
    }

    function init(params) {
        // __proto__ of returning object is baron.prototype
        var out = new item.prototype.constructor(params);

        manageEvents(out, params.event, 'on');

        manageAttr(out.root, params.direction, 'on', instances.length);
        instances.push(out);

        // removeIf(production)
        liveBarons++;
        if (liveBarons > 100 && !shownErrors.liveTooMany) {
            log('warn', [
                'You have too many live baron instances on page (' + liveBarons + ')!',
                'Are you forget to dispose some of them?',
                'All baron instances can be found in baron._instances:'
            ].join(' '), instances);
            shownErrors.liveTooMany = true;
        }
        if (instances.length > 1000 && !shownErrors.allTooMany) {
            log('warn', [
                'You have too many inited baron instances on page (' + instances.length + ')!',
                'Some of them are disposed, and thats good news.',
                'but baron.init was call too many times, and thats is bad news.',
                'All baron instances can be found in baron._instances:'
            ].join(' '), instances);
            shownErrors.allTooMany = true;
        }
        // endRemoveIf(production)

        out.update();

        return out;
    }

    function clone(input) {
        var output = {};

        input = input || {};

        for (var key in input) {
            if (input.hasOwnProperty(key)) {
                output[key] = input[key];
            }
        }

        return output;
    }

    function validate(input) {
        var output = clone(input);

        output.event = function(elems, e, func, mode) {
            arrayEach(elems, function(elem) {
                input.event(elem, e, func, mode);
            });
        };

        return output;
    }

    function fire(eventName) {
        /* jshint validthis:true */
        if (this.events && this.events[eventName]) {
            for (var i = 0 ; i < this.events[eventName].length ; i++) {
                var args = Array.prototype.slice.call( arguments, 1 );

                this.events[eventName][i].apply(this, args);
            }
        }
    }

    var item = {};

    item.prototype = {
        // underscore.js realization
        // used in autoUpdate plugin
        _debounce: function(func, wait) {
            var self = this,
                timeout,
                // args, // right now there is no need for arguments
                // context, // and for context
                timestamp;
                // result; // and for result

            var later = function() {
                if (self._disposed) {
                    clearTimeout(timeout);
                    timeout = self = null;
                    return;
                }

                var last = getTime() - timestamp;

                if (last < wait && last >= 0) {
                    timeout = setTimeout(later, wait - last);
                } else {
                    timeout = null;
                    // result = func.apply(context, args);
                    func();
                    // context = args = null;
                }
            };

            return function() {
                // context = this;
                // args = arguments;
                timestamp = getTime();

                if (!timeout) {
                    timeout = setTimeout(later, wait);
                }

                // return result;
            };
        },

        constructor: function(params) {
            var $,
                barPos,
                scrollerPos0,
                track,
                resizePauseTimer,
                scrollingTimer,
                scrollLastFire,
                resizeLastFire,
                oldBarSize;

            resizeLastFire = scrollLastFire = getTime();

            $ = this.$ = params.$;
            this.event = params.event;
            this.events = {};

            function getNode(sel, context) {
                return $(sel, context)[0]; // Can be undefined
            }

            // DOM elements
            this.root = params.root; // Always html node, not just selector
            this.scroller = getNode(params.scroller);
            this.bar = getNode(params.bar, this.root);
            track = this.track = getNode(params.track, this.root);
            if (!this.track && this.bar) {
                track = this.bar.parentNode;
            }
            this.clipper = this.scroller.parentNode;

            // Parameters
            this.direction = params.direction;
            this.rtl = params.rtl;
            this.origin = origin[this.direction];
            this.barOnCls = params.barOnCls;
            this.scrollingCls = params.scrollingCls;
            this.draggingCls = params.draggingCls;
            this.impact = params.impact;
            this.position = params.position;
            this.rtl = params.rtl;
            this.barTopLimit = 0;
            this.resizeDebounce = params.resizeDebounce;

            // Updating height or width of bar
            function setBarSize(size) {
                /* jshint validthis:true */
                var barMinSize = this.barMinSize || 20;

                if (size > 0 && size < barMinSize) {
                    size = barMinSize;
                }

                if (this.bar) {
                    $(this.bar).css(this.origin.size, parseInt(size, 10) + 'px');
                }
            }

            // Updating top or left bar position
            function posBar(pos) {
                /* jshint validthis:true */
                if (this.bar) {
                    var was = $(this.bar).css(this.origin.pos),
                        will = +pos + 'px';

                    if (will && will != was) {
                        $(this.bar).css(this.origin.pos, will);
                    }
                }
            }

            // Free path for bar
            function k() {
                /* jshint validthis:true */
                return track[this.origin.client] - this.barTopLimit - this.bar[this.origin.offset];
            }

            // Relative content top position to bar top position
            function relToPos(r) {
                /* jshint validthis:true */
                return r * k.call(this) + this.barTopLimit;
            }

            // Bar position to relative content position
            function posToRel(t) {
                /* jshint validthis:true */
                return (t - this.barTopLimit) / k.call(this);
            }

            // Cursor position in main direction in px // Now with iOs support
            this.cursor = function(e) {
                return e['client' + this.origin.x] ||
                    (((e.originalEvent || e).touches || {})[0] || {})['page' + this.origin.x];
            };

            // Text selection pos preventing
            function dontPosSelect() {
                return false;
            }

            this.pos = function(x) { // Absolute scroller position in px
                var ie = 'page' + this.origin.x + 'Offset',
                    key = (this.scroller[ie]) ? ie : this.origin.scroll;

                if (x !== undefined) this.scroller[key] = x;

                return this.scroller[key];
            };

            this.rpos = function(r) { // Relative scroller position (0..1)
                var free = this.scroller[this.origin.scrollSize] - this.scroller[this.origin.client],
                    x;

                if (r) {
                    x = this.pos(r * free);
                } else {
                    x = this.pos();
                }

                return x / (free || 1);
            };

            // Switch on the bar by adding user-defined CSS classname to scroller
            this.barOn = function(dispose) {
                if (this.barOnCls) {
                    if (dispose ||
                        this.scroller[this.origin.client] >= this.scroller[this.origin.scrollSize])
                    {
                        if ($(this.root).hasClass(this.barOnCls)) {
                            $(this.root).removeClass(this.barOnCls);
                        }
                    } else {
                        if (!$(this.root).hasClass(this.barOnCls)) {
                            $(this.root).addClass(this.barOnCls);
                        }
                    }
                }
            };

            this._pos0 = function(e) {
                scrollerPos0 = this.cursor(e) - barPos;
            };

            this.drag = function(e) {
                var rel = posToRel.call(this, this.cursor(e) - scrollerPos0);
                var k = (this.scroller[this.origin.scrollSize] - this.scroller[this.origin.client]);
                this.scroller[this.origin.scroll] = rel * k;
            };

            // Text selection preventing on drag
            this.selection = function(enable) {
                this.event(document, 'selectpos selectstart', dontPosSelect, enable ? 'off' : 'on');
            };

            // onResize & DOM modified handler
            // also fires on init
            // Note: max/min-size didnt sets if size did not really changed (for example, on init in Chrome)
            this.resize = function() {
                var self = this;
                var minPeriod = (self.resizeDebounce === undefined) ? 300 : self.resizeDebounce;
                var delay = 0;

                if (getTime() - resizeLastFire < minPeriod) {
                    clearTimeout(resizePauseTimer);
                    delay = minPeriod;
                }

                function upd() {
                    var offset = self.scroller[self.origin.crossOffset];
                    var client = self.scroller[self.origin.crossClient];
                    var padding = 0;

                    // https://github.com/Diokuz/baron/issues/110
                    if (isMacFF) {
                        padding = macmsxffScrollbarSize;

                    // Opera 12 bug https://github.com/Diokuz/baron/issues/105
                    } else if (client > 0 && offset === 0) {
                        // Only Opera 12 in some rare nested flexbox cases goes here
                        // Sorry guys for magic,
                        // but I dont want to create temporary html-nodes set
                        // just for measuring scrollbar size in Opera 12.
                        // 17px for Windows XP-8.1, 15px for Mac (really rare).
                        offset = client + opera12maxScrollbarSize;
                    }

                    if (offset) { // if there is no size, css should not be set
                        self.barOn();

                        if (self.impact == 'scroller') { // scroller
                            var delta = offset - client + padding;

                            // `static` position works only for `scroller` impact
                            if (self.position == 'static') { // static
                                var was = self.$(self.scroller).css(self.origin.crossSize);
                                var will = self.clipper[self.origin.crossClient] + delta + 'px';

                                if (was != will) {
                                    self._setCrossSizes(self.scroller, will);
                                }
                            } else { // absolute
                                var css = {};
                                var key = self.rtl ? 'Left' : 'Right';

                                if (self.direction == 'h') {
                                    key = 'Bottom';
                                }

                                css['padding' + key] = delta + 'px';
                                self.$(self.scroller).css(css);
                            }
                        } else { // clipper
                            var was = $(self.clipper).css(self.origin.crossSize);
                            var will = client + 'px';

                            if (was != will) {
                                self._setCrossSizes(self.clipper, will);
                            }
                        }
                    } else {
                        // do nothing (display: none, or something)
                    }

                    Array.prototype.unshift.call(arguments, 'resize');
                    fire.apply(self, arguments);

                    resizeLastFire = getTime();
                }

                if (delay) {
                    resizePauseTimer = setTimeout(upd, delay);
                } else {
                    upd();
                }
            };

            this.updatePositions = function() {
                var newBarSize,
                    self = this;

                if (self.bar) {
                    newBarSize = (track[self.origin.client] - self.barTopLimit) *
                        self.scroller[self.origin.client] / self.scroller[self.origin.scrollSize];

                    // Positioning bar
                    if (parseInt(oldBarSize, 10) != parseInt(newBarSize, 10)) {
                        setBarSize.call(self, newBarSize);
                        oldBarSize = newBarSize;
                    }

                    barPos = relToPos.call(self, self.rpos());

                    posBar.call(self, barPos);
                }

                Array.prototype.unshift.call( arguments, 'scroll' );
                fire.apply(self, arguments);

                scrollLastFire = getTime();
            };

            // onScroll handler
            this.scroll = function() {
                var self = this;

                self.updatePositions();

                if (self.scrollingCls) {
                    if (!scrollingTimer) {
                        self.$(self.root).addClass(self.scrollingCls);
                    }
                    clearTimeout(scrollingTimer);
                    scrollingTimer = setTimeout(function() {
                        self.$(self.root).removeClass(self.scrollingCls);
                        scrollingTimer = undefined;
                    }, 300);
                }
            };

            // https://github.com/Diokuz/baron/issues/116
            this.clipperOnScroll = function() {
                // WTF is this line? https://github.com/Diokuz/baron/issues/134
                // if (this.direction == 'h') return;

                // assign `initial scroll position` to `clipper.scrollLeft` (0 for ltr, ~20 for rtl)
                if (!this.rtl) {
                    this.clipper[this.origin.scrollEdge] = 0;
                } else {
                    this.clipper[this.origin.scrollEdge] = this.clipper[this.origin.scrollSize];
                }
            };

            // Flexbox `align-items: stretch` (default) requires to set min-width for vertical
            // and max-height for horizontal scroll. Just set them all.
            // http://www.w3.org/TR/css-flexbox-1/#valdef-align-items-stretch
            this._setCrossSizes = function(node, size) {
                var css = {};

                css[this.origin.crossSize] = size;
                css[this.origin.crossMinSize] = size;
                css[this.origin.crossMaxSize] = size;

                this.$(node).css(css);
            };

            // Set common css rules
            this._dumbCss = function(on) {
                if (params.cssGuru) return;

                var overflow = on ? 'hidden' : null;
                var msOverflowStyle = on ? 'none' : null;

                this.$(this.clipper).css({
                    overflow: overflow,
                    msOverflowStyle: msOverflowStyle,
                    position: this.position == 'static' ? '' : 'relative'
                });

                var scroll = on ? 'scroll' : null;
                var axis = this.direction == 'v' ? 'y' : 'x';
                var scrollerCss = {};

                scrollerCss['overflow-' + axis] = scroll;
                scrollerCss['box-sizing'] = 'border-box';
                scrollerCss.margin = '0';
                scrollerCss.border = '0';

                if (this.position == 'absolute') {
                    scrollerCss.position = 'absolute';
                    scrollerCss.top = '0';

                    if (this.direction == 'h') {
                        scrollerCss.left = scrollerCss.right = '0';
                    } else {
                        scrollerCss.bottom = '0';
                        scrollerCss.right = this.rtl ? '0' : '';
                        scrollerCss.left = this.rtl ? '' : '0';
                    }
                }

                this.$(this.scroller).css(scrollerCss);
            };

            // onInit actions
            this._dumbCss(true);

            if (isMacFF) {
                var padding = 'paddingRight';
                var css = {};
                // getComputedStyle is ie9+, but we here only in f ff
                var paddingWas = scopedWindow.getComputedStyle(this.scroller)[[padding]];
                var delta = this.scroller[this.origin.crossOffset] -
                            this.scroller[this.origin.crossClient];

                if (params.direction == 'h') {
                    padding = 'paddingBottom';
                } else if (params.rtl) {
                    padding = 'paddingLeft';
                }

                var numWas = parseInt(paddingWas, 10);
                if (numWas != numWas) numWas = 0;
                css[padding] = (macmsxffScrollbarSize + numWas) + 'px';
                $(this.scroller).css(css);
            }

            return this;
        },

        // fires on any update and on init
        update: function(params) {
            // removeIf(production)
            if (this._disposed) {
                log('error', [
                    'Update on disposed baron instance detected.',
                    'You should clear your stored baron value for this instance:',
                    this
                ].join(' '), params);
            }
            // endRemoveIf(production)
            fire.call(this, 'upd', params); // Update all plugins' params

            this.resize(1);
            this.updatePositions();

            return this;
        },

        // One instance
        dispose: function(params) {
            // removeIf(production)
            if (this._disposed) {
                log('error', [
                    'Already disposed:',
                    this
                ].join(' '), params);
            }
            // endRemoveIf(production)

            manageEvents(this, this.event, 'off');
            manageAttr(this.root, params.direction, 'off');
            if (params.direction == 'v') {
                this._setCrossSizes(this.scroller, '');
            } else {
                this._setCrossSizes(this.clipper, '');
            }
            this._dumbCss(false);
            this.barOn(true);
            fire.call(this, 'dispose');
            this._disposed = true;
        },

        on: function(eventName, func, arg) {
            var names = eventName.split(' ');

            for (var i = 0 ; i < names.length ; i++) {
                if (names[i] == 'init') {
                    func.call(this, arg);
                } else {
                    this.events[names[i]] = this.events[names[i]] || [];

                    this.events[names[i]].push(function(userArg) {
                        func.call(this, userArg || arg);
                    });
                }
            }
        }
    };

    baron.fn.constructor.prototype = baron.fn;
    item.prototype.constructor.prototype = item.prototype;

    // Use when you need "baron" global var for another purposes
    baron.noConflict = function() {
        scopedWindow.baron = _baron; // Restoring original value of "baron" global var

        return baron;
    };

    baron.version = '2.2.3';

    // No AMD support, need it? Notify me.
    if (typeof module != 'undefined') {
        module.exports = baron;
        // @todo webpack
        require('./fix');
        require('./pull');
        require('./controls');
        require('./autoUpdate');
    } else {
        window.baron = baron;

        if ($ && $.fn) { // Adding baron to jQuery as plugin
            $.fn.baron = baron;
        }
    }
})(this);

/* Fixable elements plugin for baron 0.6+ */
(function(scopedWindow, undefined) {
    var scopedBaron;

    if (typeof module != 'undefined') {
        scopedBaron = require('./core.js');
    } else {
        scopedBaron = scopedWindow.baron;
    }

    // removeIf(production)
    var log = function() {
        scopedBaron.fn.log.apply(this, arguments);
    };
    // endRemoveIf(production)

    var fix = function(userParams) {
        var elements, viewPortSize,
            params = { // Default params
                outside: '',
                inside: '',
                before: '',
                after: '',
                past: '',
                future: '',
                radius: 0,
                minView: 0
            },
            topFixHeights = [], // inline style for element
            topRealHeights = [], // ? something related to negative margins for fixable elements
            headerTops = [], // offset positions when not fixed
            scroller = this.scroller,
            eventManager = this.event,
            $ = this.$,
            self = this;

        // removeIf(production)
        if (this.position != 'static') {
            log('error', [
                'Fix plugin cannot work properly in non-static baron position.',
                'See more https://github.com/Diokuz/baron/issues/135'
            ].join(' '), this.params);
        }
        // endRemoveIf(production)

        // i - number of fixing element, pos - fix-position in px, flag - 1: top, 2: bottom
        // Invocation only in case when fix-state changed
        function fixElement(i, pos, flag) {
            var ori = flag == 1 ? 'pos' : 'oppos';

            if (viewPortSize < (params.minView || 0)) { // No headers fixing when no enought space for viewport
                pos = undefined;
            }

            // Removing all fixing stuff - we can do this because fixElement triggers only when fixState really changed
            this.$(elements[i]).css(this.origin.pos, '').css(this.origin.oppos, '').removeClass(params.outside);

            // Fixing if needed
            if (pos !== undefined) {
                pos += 'px';
                this.$(elements[i]).css(this.origin[ori], pos).addClass(params.outside);
            }
        }

        function bubbleWheel(e) {
            try {
                i = document.createEvent('WheelEvent'); // i - for extra byte
                // evt.initWebKitWheelEvent(deltaX, deltaY, window, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey);
                i.initWebKitWheelEvent(e.originalEvent.wheelDeltaX, e.originalEvent.wheelDeltaY);
                scroller.dispatchEvent(i);
                e.preventDefault();
            } catch (e) {}
        }

        function init(_params) {
            var pos;

            for (var key in _params) {
                params[key] = _params[key];
            }

            elements = this.$(params.elements, this.scroller);

            if (elements) {
                viewPortSize = this.scroller[this.origin.client];
                for (var i = 0 ; i < elements.length ; i++) {
                    // Variable header heights
                    pos = {};
                    pos[this.origin.size] = elements[i][this.origin.offset];
                    if (elements[i].parentNode !== this.scroller) {
                        this.$(elements[i].parentNode).css(pos);
                    }
                    pos = {};
                    pos[this.origin.crossSize] = elements[i].parentNode[this.origin.crossClient];
                    this.$(elements[i]).css(pos);

                    // Between fixed headers
                    viewPortSize -= elements[i][this.origin.offset];

                    headerTops[i] = elements[i].parentNode[this.origin.offsetPos]; // No paddings for parentNode

                    // Summary elements height above current
                    topFixHeights[i] = (topFixHeights[i - 1] || 0); // Not zero because of negative margins
                    topRealHeights[i] = (topRealHeights[i - 1] || Math.min(headerTops[i], 0));

                    if (elements[i - 1]) {
                        topFixHeights[i] += elements[i - 1][this.origin.offset];
                        topRealHeights[i] += elements[i - 1][this.origin.offset];
                    }

                    if ( !(i == 0 && headerTops[i] == 0)/* && force */) {
                        this.event(elements[i], 'mousewheel', bubbleWheel, 'off');
                        this.event(elements[i], 'mousewheel', bubbleWheel);
                    }
                }

                if (params.limiter && elements[0]) { // Bottom edge of first header as top limit for track
                    if (this.track && this.track != this.scroller) {
                        pos = {};
                        pos[this.origin.pos] = elements[0].parentNode[this.origin.offset];
                        this.$(this.track).css(pos);
                    } else {
                        this.barTopLimit = elements[0].parentNode[this.origin.offset];
                    }
                    // this.barTopLimit = elements[0].parentNode[this.origin.offset];
                    this.scroll();
                }

                if (params.limiter === false) { // undefined (in second fix instance) should have no influence on bar limit
                    this.barTopLimit = 0;
                }
            }

            var event = {
                element: elements,

                handler: function() {
                    var parent = $(this)[0].parentNode,
                        top = parent.offsetTop,
                        num;

                    // finding num -> elements[num] === this
                    for (var i = 0 ; i < elements.length ; i++ ) {
                        if (elements[i] === this) num = i;
                    }

                    var pos = top - topFixHeights[num];

                    if (params.scroll) { // User defined callback
                        params.scroll({
                            x1: self.scroller.scrollTop,
                            x2: pos
                        });
                    } else {
                        self.scroller.scrollTop = pos;
                    }
                },

                type: 'click'
            };

            if (params.clickable) {
                this._eventHandlers.push(event); // For auto-dispose
                // eventManager(event.element, event.type, event.handler, 'off');
                eventManager(event.element, event.type, event.handler, 'on');
            }
        }

        this.on('init', init, userParams);

        var fixFlag = [], // 1 - past, 2 - future, 3 - current (not fixed)
            gradFlag = [];
        this.on('init scroll', function() {
            var fixState, hTop, gradState;

            if (elements) {
                var change;

                // fixFlag update
                for (var i = 0 ; i < elements.length ; i++) {
                    fixState = 0;
                    if (headerTops[i] - this.pos() < topRealHeights[i] + params.radius) {
                        // Header trying to go up
                        fixState = 1;
                        hTop = topFixHeights[i];
                    } else if (headerTops[i] - this.pos() > topRealHeights[i] + viewPortSize - params.radius) {
                        // Header trying to go down
                        fixState = 2;
                        // console.log('topFixHeights[i] + viewPortSize + topRealHeights[i]', topFixHeights[i], this.scroller[this.origin.client], topRealHeights[i]);
                        hTop = this.scroller[this.origin.client] - elements[i][this.origin.offset] - topFixHeights[i] - viewPortSize;
                        // console.log('hTop', hTop, viewPortSize, elements[this.origin.offset], topFixHeights[i]);
                        //(topFixHeights[i] + viewPortSize + elements[this.origin.offset]) - this.scroller[this.origin.client];
                    } else {
                        // Header in viewport
                        fixState = 3;
                        hTop = undefined;
                    }

                    gradState = false;
                    if (headerTops[i] - this.pos() < topRealHeights[i] || headerTops[i] - this.pos() > topRealHeights[i] + viewPortSize) {
                        gradState = true;
                    }

                    if (fixState != fixFlag[i] || gradState != gradFlag[i]) {
                        fixElement.call(this, i, hTop, fixState);
                        fixFlag[i] = fixState;
                        gradFlag[i] = gradState;
                        change = true;
                    }
                }

                // Adding positioning classes (on last top and first bottom header)
                if (change) { // At leats one change in elements flag structure occured
                    for (i = 0 ; i < elements.length ; i++) {
                        if (fixFlag[i] == 1 && params.past) {
                            this.$(elements[i]).addClass(params.past).removeClass(params.future);
                        }

                        if (fixFlag[i] == 2 && params.future) {
                            this.$(elements[i]).addClass(params.future).removeClass(params.past);
                        }

                        if (fixFlag[i] == 3) {
                            if (params.future || params.past) this.$(elements[i]).removeClass(params.past).removeClass(params.future);
                            if (params.inside) this.$(elements[i]).addClass(params.inside);
                        } else if (params.inside) {
                            this.$(elements[i]).removeClass(params.inside);
                        }

                        if (fixFlag[i] != fixFlag[i + 1] && fixFlag[i] == 1 && params.before) {
                            this.$(elements[i]).addClass(params.before).removeClass(params.after); // Last top fixed header
                        } else if (fixFlag[i] != fixFlag[i - 1] && fixFlag[i] == 2 && params.after) {
                            this.$(elements[i]).addClass(params.after).removeClass(params.before); // First bottom fixed header
                        } else {
                            this.$(elements[i]).removeClass(params.before).removeClass(params.after);
                        }

                        if (params.grad) {
                            if (gradFlag[i]) {
                                this.$(elements[i]).addClass(params.grad);
                            } else {
                                this.$(elements[i]).removeClass(params.grad);
                            }
                        }
                    }
                }
            }
        });

        this.on('resize upd', function(updParams) {
            init.call(this, updParams && updParams.fix);
        });
    };

    scopedBaron.fn.fix = function(params) {
        var i = 0;

        while (this[i]) {
            fix.call(this[i], params);
            i++;
        }

        return this;
    };
})(this);
/* Autoupdate plugin for baron 0.6+ */
(function(scopedWindow) {
    if (typeof module != 'undefined') {
        scopedBaron = require('./core');
    } else {
        scopedBaron = scopedWindow.baron;
    }

    var MutationObserver = scopedWindow.MutationObserver || scopedWindow.WebKitMutationObserver || scopedWindow.MozMutationObserver || null;

    var autoUpdate = function() {
        var self = this;
        var watcher;

        if (this._au) {
            return;
        }

        function actualizeWatcher() {
            if (!self.root[self.origin.offset]) {
                startWatch();
            } else {
                stopWatch();
            }
        }

        // Set interval timeout for watching when root node will be visible
        function startWatch() {
            if (watcher) return;

            watcher = setInterval(function() {
                if (self.root[self.origin.offset]) {
                    stopWatch();
                    self.update();
                }
            }, 300); // is it good enought for you?)
        }

        function stopWatch() {
            clearInterval(watcher);
            watcher = null;
        }

        var debouncedUpdater = self._debounce(function() {
            self.update();
        }, 300);

        this._observer = new MutationObserver(function() {
            actualizeWatcher();
            self.update();
            debouncedUpdater();
        });

        this.on('init', function() {
            self._observer.observe(self.root, {
                childList: true,
                subtree: true,
                characterData: true
                // attributes: true
                // No reasons to set attributes to true
                // The case when root/child node with already properly inited baron toggled to hidden and then back to visible,
                // and the size of parent was changed during that hidden state, is very rare
                // Other cases are covered by watcher, and you still can do .update by yourself
            });

            actualizeWatcher();
        });

        this.on('dispose', function() {
            self._observer.disconnect();
            stopWatch();
            delete self._observer;
        });

        this._au = true;
    };

    scopedBaron.fn.autoUpdate = function(params) {
        if (!MutationObserver) return this;

        var i = 0;

        while (this[i]) {
            autoUpdate.call(this[i], params);
            i++;
        }

        return this;
    };
})(this);

/* Controls plugin for baron 0.6+ */
(function(scopedWindow, undefined) {
    var scopedBaron;

    if (typeof module != 'undefined') {
        scopedBaron = require('./core');
    } else {
        scopedBaron = scopedWindow.baron;
    }

    var controls = function(params) {
        var forward, backward, track, screen,
            self = this, // AAAAAA!!!!!11
            event;

        screen = params.screen || 0.9;

        if (params.forward) {
            forward = this.$(params.forward, this.clipper);

            event = {
                element: forward,

                handler: function() {
                    var y = self.pos() + (params.delta || 30);

                    self.pos(y);
                },

                type: 'click'
            };

            this._eventHandlers.push(event); // For auto-dispose
            this.event(event.element, event.type, event.handler, 'on');
        }

        if (params.backward) {
            backward = this.$(params.backward, this.clipper);

            event = {
                element: backward,

                handler: function() {
                    var y = self.pos() - (params.delta || 30);

                    self.pos(y);
                },

                type: 'click'
            };

            this._eventHandlers.push(event); // For auto-dispose
            this.event(event.element, event.type, event.handler, 'on');
        }

        if (params.track) {
            if (params.track === true) {
                track = this.track;
            } else {
                track = this.$(params.track, this.clipper)[0];
            }

            if (track) {
                event = {
                    element: track,

                    handler: function(e) {
                        // https://github.com/Diokuz/baron/issues/121
                        if (e.target != track) return;

                        var x = e['offset' + self.origin.x],
                            xBar = self.bar[self.origin.offsetPos],
                            sign = 0;

                        if (x < xBar) {
                            sign = -1;
                        } else if (x > xBar + self.bar[self.origin.offset]) {
                            sign = 1;
                        }

                        var y = self.pos() + sign * screen * self.scroller[self.origin.client];
                        self.pos(y);
                    },

                    type: 'mousedown'
                };

                this._eventHandlers.push(event); // For auto-dispose
                this.event(event.element, event.type, event.handler, 'on');
            }
        }
    };

    scopedBaron.fn.controls = function(params) {
        var i = 0;

        while (this[i]) {
            controls.call(this[i], params);
            i++;
        }

        return this;
    };
})(this);

// removeIf(production)
baron.fn.log = function(level, msg, nodes) {
    var time = new Date().toString();
    var func = console[level] || console.log;
    var args = [
        'Baron [ ' + time.substr(16, 8) + ' ]: ' + msg,
        nodes
    ];

    Function.prototype.apply.call(func, console, args);
};
// endRemoveIf(production)

// #= include '../bower_components/formstone/dist/js/core.js'
// #= include '../bower_components/formstone/dist/js/mediaquery.js'
// #= include '../bower_components/formstone/dist/js/swap.js'
// #= include '../bower_components/formstone/dist/js/navigation.js'
// #= include '../bower_components/slick-carousel/slick/slick.js'
// #= include '../bower_components/filament-tablesaw/dist/tablesaw.js'
// #= include '../bower_components/gsap/src/minified/TweenMax.min.js'
// #= include '../bower_components/gsap/src/minified/jquery.gsap.min.js'
// #= include '../bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'
// // #= include '../bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'
// #= include '../bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'
// #= include '../bower_components/lodash/dist/lodash.js'
// #= include '../bower_components/js-cookie/src/js.cookie.js'
// // Disable until we see if we can get it working properly in IE and FF. Guessing that it is a flex issue.
// // #= include '../bower_components/flying-focus/standalone/flying-focus.js'
// #= include '../bower_components/magnific-popup/dist/jquery.magnific-popup.js'


// // Local javascript components and scripts
// #= include 'scripts/browser-update.js'
// #= include 'scripts/accordion.js'

$(document).ready(function() { // Handler for .ready() called.

	//------------------------------------------------------------------
	// Initializes Foundation ------------------------------------------
	// $(document).foundation();


	//------------------------------------------------------------------
	// Initializes SVG4Everyone ----------------------------------------
	// svg4everybody({
	// 	polyfill: true
	// });

 //    //demo theme switcher
 //    $("#theme-switch a").click(function() { 
 //    $('link[rel="stylesheet"]').first().attr("href",$(this).attr('rel'));
 //    return false;
 //  });

	// //------------------------------------------------------------------
	// // Initialize Smart Menu navigation --------------------------------
	// # = include 'scripts/smart-menus-init.js'



	// //------------------------------------------------------------------
	// // Initialize masthead determine text Overflow --------------------------
	// # = include 'scripts/masthead-determine-overflow-init.js'



	// //------------------------------------------------------------------
	// // Initialize template tweaks and overrides ------------------------
	// # = include 'scripts/layout-init.js'


	// //------------------------------------------------------------------
	// // Initialize Flexbox-masonry --------------------------------------
	// # = include 'scripts/scrollbar-width-fix-init.js'


	// //------------------------------------------------------------------
	// // Initialize Flexbox-masonry --------------------------------------
	// # = include 'scripts/flexbox-masonry-init.js'


	//------------------------------------------------------------------
	// Initialize Custom scrollbar if needed Carousel ---------------------------------------
	function scrollBarWidthFix() {
		var scrollDiv = document.createElement("div");
		scrollDiv.className = "scrollbar-measure";
		document.body.appendChild(scrollDiv);
	
		// Get the scrollbar width
		var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
		// if (scrollbarWidth > 0) {
			// $('html').addClass('baron baron__root baron__clipper');
			// $('body').addClass('baron__scroller');
	
// 			var scrollHtml = $("<div class='baron__track'>")
// 								.append($("<div class='baron__free'>"))
// 									.append($("<div class='baron__bar'>"));
	
// 			$('body').append(scrollHtml);
	
			setTimeout(function(){ 
				 baron({
			cssGuru:true,
	        root: '.baron',
	        scroller: '.baron__scroller',
	        bar: '.baron__bar',
	        scrollingCls: '_scrolling',
	        draggingCls: '_dragging'
	            });
			}, 0);
					// }
			// Delete the DIV 
			// document.body.removeChild(scrollDiv);
		}
	
	
		scrollBarWidthFix();


	// //------------------------------------------------------------------
	// // Initialize Slick Carousel ---------------------------------------
	// # = include 'scripts/slick-init.js'


	// //------------------------------------------------------------------
	// // Set up on-click fn to scroll to anchor tags.---------------------
	// # = include 'scripts/in-page-nav-init.js'

	// //------------------------------------------------------------------
	// // initialize Tables comonents  ------------------------------------
	// # = include 'scripts/tables-init.js'

	// //------------------------------------------------------------------
	// // initialize Accordion comonents  ------------------------------------
	// # = include 'scripts/accordion-init.js'

 //    //------------------------------------------------------------------
	// // Initialize Magnific Popups --------------------------------------
	// # = include 'scripts/magnific-popup-init.js'





			function resizeEvent() {
			// Any windows resize events here.

			 setTimeout(function() {
				//closes hamburger icon if window resized up
				if (Foundation.MediaQuery.current == "medium" || Foundation.MediaQuery.current == "large" || Foundation.MediaQuery.current == "xlarge" || Foundation.MediaQuery.current == "xxlarge") {
					$(".nav-handle").removeClass("hamburger-open");
				}

				

				//Makes modifications to template based off visible content
				rearrangeLayout();

				//shrinks menu items with excess width
				shrinkMenu();

				//If nav overflows browser width, wrap it
				menuWrapRow();

				//Conditionally alters z-index if nav dropdown switches direction and goes above masthead
				swapZindex();

				// Determines if site title overflows and rearranges masthead accordingly to make room
				mastheadDetermineOverflow();


				//Calculates masonry heights for all flexbox masonry components
				flexboxMasonryManager.calculatePageMasonry(flexboxMasonryManagerSettings);
	}, 0);
}


if(typeof window.orientation !== 'undefined') { // this is more smart to detect mobile devices because desktop doesn't support this property
  var query = window.matchMedia("(orientation:landscape)"); //this is is important to verify if we put 
  var changeHeight = function(query) {                      //mobile device in landscape mode
    if (query.matches) {                                    // if yes we set again height to occupy 100%
     // resizeEvent(); // landscape mode
    } else {                                                //if we go back to portrait we set again
      // resizeEvent(); // portrait mode
    }
  }
  query.addListener(changeHeight);                          //add a listner too this event
} 
else { //desktop mode                                       //this last part is only for non mobile
  $(window).bind('resize', function(e) {
		window.resizeEvt;
		$(window).resize(function() {
			clearTimeout(window.resizeEvt);
			window.resizeEvt = setTimeout(function() {
				// resizeEvent();
						}, 100);
		});
	});
};




	//document.ready ends
});

              
            
!
999px

Console