Error in two versions of jQuery

Question

For the input type file, I have used java script for its styling. But it gives me the following error

Uncaught TypeError: Cannot read property 'width' of undefined

as it is using version 1.0.3. I have already included another jquery for slider and menu having version 1.11.2 and jquery.main.js, when I remove them, input type "file" styling successfully appears but slider and menu stopped working. What I have done uptill now is: Adding a noConflict() in head section:

 <script type="text/javascript"> 
 var $jq = jQuery.noConflict(); 
 </script> 

Then in my new script for styling of input type "file"

$jq(document).ready(function(){
//replace all jQuery with $jq in script for input type file
;(function (root, factory) {
if (typeof define === 'function' && define.amd) {
    define(['$jq'], factory);
} else if (typeof exports === 'object') {
    module.exports = factory(require('$jq'));
} else {
    root.jcf = factory($jq);
}
}(this, function ($jq) {
'use strict';

// private variables
var customInstances = [];

// default global options
var commonOptions = {
    optionsKey: 'jcf',
    dataKey: 'jcf-instance',
    rtlClass: 'jcf-rtl',
    focusClass: 'jcf-focus',
    pressedClass: 'jcf-pressed',
    disabledClass: 'jcf-disabled',
    hiddenClass: 'jcf-hidden',
    resetAppearanceClass: 'jcf-reset-appearance',
    unselectableClass: 'jcf-unselectable'
};

// detect device type
var isTouchDevice = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
    isWinPhoneDevice = /Windows Phone/.test(navigator.userAgent);
commonOptions.isMobileDevice = !!(isTouchDevice || isWinPhoneDevice);

// create global stylesheet if custom forms are used
var createStyleSheet = function() {
    var styleTag = $jq('<style>').appendTo('head'),
        styleSheet = styleTag.prop('sheet') || styleTag.prop('styleSheet');

    // crossbrowser style handling
    var addCSSRule = function(selector, rules, index) {
        if(styleSheet.insertRule) {
            styleSheet.insertRule(selector + '{' + rules + '}', index);
        } else {
            styleSheet.addRule(selector, rules, index);
        }
    };

    // add special rules
    addCSSRule('.' + commonOptions.hiddenClass, 'position:absolute !important;left:-9999px !important;height:1px !important;width:1px !important;margin:0 !important;border-width:0 !important;-webkit-appearance:none;-moz-appearance:none;appearance:none');
    addCSSRule('.' + commonOptions.rtlClass + '.' + commonOptions.hiddenClass, 'right:-9999px !important; left: auto !important');
    addCSSRule('.' + commonOptions.unselectableClass, '-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;');
    addCSSRule('.' + commonOptions.resetAppearanceClass, 'background: none; border: none; -webkit-appearance: none; appearance: none; opacity: 0; filter: alpha(opacity=0);');

    // detect rtl pages
    var html = $jq('html'), body = $jq('body');
    if(html.css('direction') === 'rtl' || body.css('direction') === 'rtl') {
        html.addClass(commonOptions.rtlClass);
    }

    // handle form reset event
    html.on('reset', function() {
        setTimeout(function(){
            api.refreshAll();
        }, 0);
    });

    // mark stylesheet as created
    commonOptions.styleSheetCreated = true;
};

// simplified pointer events handler
(function() {
    var pointerEventsSupported = navigator.pointerEnabled || navigator.msPointerEnabled,
        touchEventsSupported = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
        eventList, eventMap = {}, eventPrefix = 'jcf-';

    // detect events to attach
    if(pointerEventsSupported) {
        eventList = {
            pointerover: navigator.pointerEnabled ? 'pointerover' : 'MSPointerOver',
            pointerdown: navigator.pointerEnabled ? 'pointerdown' : 'MSPointerDown',
            pointermove: navigator.pointerEnabled ? 'pointermove' : 'MSPointerMove',
            pointerup: navigator.pointerEnabled ? 'pointerup' : 'MSPointerUp'
        };
    } else {
        eventList = {
            pointerover: 'mouseover',
            pointerdown: 'mousedown' + (touchEventsSupported ? ' touchstart' : ''),
            pointermove: 'mousemove' + (touchEventsSupported ? ' touchmove' : ''),
            pointerup: 'mouseup' + (touchEventsSupported ? ' touchend' : '')
        };
    }

    // create event map
    $jq.each(eventList, function(targetEventName, fakeEventList) {
        $jq.each(fakeEventList.split(' '), function(index, fakeEventName) {
            eventMap[fakeEventName] = targetEventName;
        });
    });

    // $jq event hooks
    $jq.each(eventList, function(eventName, eventHandlers) {
        eventHandlers = eventHandlers.split(' ');
        $jq.event.special[eventPrefix + eventName] = {
            setup: function() {
                var self = this;
                $jq.each(eventHandlers, function(index, fallbackEvent) {
                    if(self.addEventListener) self.addEventListener(fallbackEvent, fixEvent, false);
                    else self['on' + fallbackEvent] = fixEvent;
                });
            },
            teardown: function() {
                var self = this;
                $jq.each(eventHandlers, function(index, fallbackEvent) {
                    if(self.addEventListener) self.removeEventListener(fallbackEvent, fixEvent, false);
                    else self['on' + fallbackEvent] = null;
                });
            }
        };
    });

    // check that mouse event are not simulated by mobile browsers
    var lastTouch = null;
    var mouseEventSimulated = function(e) {
        var dx = Math.abs(e.pageX - lastTouch.x),
            dy = Math.abs(e.pageY - lastTouch.y),
            rangeDistance = 25;

        if (dx <= rangeDistance && dy <= rangeDistance) {
            return true;
        }
    };

    // normalize event
    var fixEvent = function(e) {
        var origEvent = e || window.event,
            touchEventData = null,
            targetEventName = eventMap[origEvent.type];

        e = $jq.event.fix(origEvent);
        e.type = eventPrefix + targetEventName;

        if(origEvent.pointerType) {
            switch(origEvent.pointerType) {
                case 2: e.pointerType = 'touch'; break;
                case 3: e.pointerType = 'pen'; break;
                case 4: e.pointerType = 'mouse'; break;
                default: e.pointerType = origEvent.pointerType;
            }
        } else {
            e.pointerType = origEvent.type.substr(0,5); // "mouse" or "touch" word length
        }

        if(!e.pageX && !e.pageY) {
            touchEventData = origEvent.changedTouches ? origEvent.changedTouches[0] : origEvent;
            e.pageX = touchEventData.pageX;
            e.pageY = touchEventData.pageY;
        }

        if(origEvent.type === 'touchend') {
            lastTouch = {x: e.pageX, y: e.pageY};
        }
        if(e.pointerType === 'mouse' && lastTouch && mouseEventSimulated(e)) {
            return;
        } else {
            return ($jq.event.dispatch || $jq.event.handle).call(this, e);
        }
    };
}());

// custom mousewheel/trackpad handler
(function() {
    var wheelEvents = ('onwheel' in document || document.documentMode >= 9 ? 'wheel' : 'mousewheel DOMMouseScroll').split(' '),
        shimEventName = 'jcf-mousewheel';

    $jq.event.special[shimEventName] = {
        setup: function() {
            var self = this;
            $jq.each(wheelEvents, function(index, fallbackEvent) {
                if(self.addEventListener) self.addEventListener(fallbackEvent, fixEvent, false);
                else self['on' + fallbackEvent] = fixEvent;
            });
        },
        teardown: function() {
            var self = this;
            $jq.each(wheelEvents, function(index, fallbackEvent) {
                if(self.addEventListener) self.removeEventListener(fallbackEvent, fixEvent, false);
                else self['on' + fallbackEvent] = null;
            });
        }
    };

    var fixEvent = function(e) {
        var origEvent = e || window.event;
        e = $jq.event.fix(origEvent);
        e.type = shimEventName;

        // old wheel events handler
        if('detail'      in origEvent) { e.deltaY = -origEvent.detail;      }
        if('wheelDelta'  in origEvent) { e.deltaY = -origEvent.wheelDelta;  }
        if('wheelDeltaY' in origEvent) { e.deltaY = -origEvent.wheelDeltaY; }
        if('wheelDeltaX' in origEvent) { e.deltaX = -origEvent.wheelDeltaX; }

        // modern wheel event handler
        if('deltaY' in origEvent) {
            e.deltaY = origEvent.deltaY;
        }
        if('deltaX' in origEvent) {
            e.deltaX = origEvent.deltaX;
        }

        // handle deltaMode for mouse wheel
        e.delta = e.deltaY || e.deltaX;
        if (origEvent.deltaMode === 1) {
            var lineHeight = 16;
            e.delta *= lineHeight;
            e.deltaY *= lineHeight;
            e.deltaX *= lineHeight;
        }

        return ($jq.event.dispatch || $jq.event.handle).call(this, e);
    };
}());

// extra module methods
var moduleMixin = {
    // provide function for firing native events
    fireNativeEvent: function(elements, eventName) {
        $jq(elements).each(function() {
            var element = this, eventObject;                    
            if(element.dispatchEvent) {
                eventObject = document.createEvent('HTMLEvents');
                eventObject.initEvent(eventName, true, true);
                element.dispatchEvent(eventObject);
            } else if(document.createEventObject) {
                eventObject = document.createEventObject();
                eventObject.target = element;
                element.fireEvent('on' + eventName, eventObject);
            }
        });
    },
    // bind event handlers for module instance (functions beggining with "on")
    bindHandlers: function() {
        var self = this;
        $jq.each(self, function(propName, propValue) {
            if(propName.indexOf('on') === 0 && $jq.isFunction(propValue)) {
                // dont use $jq.proxy here because it doesn't create unique handler
                self[propName] = function() {
                    return propValue.apply(self, arguments);
                };
            }
        });
    }
};

// public API
var api = {
    modules: {},
    getOptions: function() {
        return $jq.extend({}, commonOptions);
    },
    setOptions: function(moduleName, moduleOptions) {
        if(arguments.length > 1) {
            // set module options
            if(this.modules[moduleName]) {
                $jq.extend(this.modules[moduleName].prototype.options, moduleOptions);
            }
        } else {
            // set common options
            $jq.extend(commonOptions, moduleName);
        }
    },
    addModule: function(proto) {
        // add module to list
        var Module = function(options) {
            // save instance to collection
            options.element.data(commonOptions.dataKey, this);
            customInstances.push(this);

            // save options
            this.options = $jq.extend({}, commonOptions, this.options, options.element.data(commonOptions.optionsKey), options);

            // bind event handlers to instance
            this.bindHandlers();

            // call constructor
            this.init.apply(this, arguments);
        };

        // set proto as prototype for new module
        Module.prototype = proto;

        // add mixin methods to module proto
        $jq.extend(proto, moduleMixin);
        if(proto.plugins) {
            $jq.each(proto.plugins, function(pluginName, plugin) {
                $jq.extend(plugin.prototype, moduleMixin);
            });
        }

        // override destroy method
        var originalDestroy = Module.prototype.destroy;
        Module.prototype.destroy = function() {
            this.options.element.removeData(this.options.dataKey);

            for(var i = customInstances.length - 1; i >= 0; i--) {
                if(customInstances[i] === this) {
                    customInstances.splice(i, 1);
                    break;
                }
            }

            if(originalDestroy) {
                originalDestroy.apply(this, arguments);
            }
        };

        // save module to list
        this.modules[proto.name] = Module;
    },
    getInstance: function(element) {
        return $jq(element).data(commonOptions.dataKey);
    },
    replace: function(elements, moduleName, customOptions) {
        var self = this,
            instance;

        if(!commonOptions.styleSheetCreated) {
            createStyleSheet();
        }

        $jq(elements).each(function() {
            var moduleOptions,
                element = $jq(this);

            instance = element.data(commonOptions.dataKey);
            if(instance) {
                instance.refresh();
            } else {
                if(!moduleName) {
                    $jq.each(self.modules, function(currentModuleName, module) {
                        if(module.prototype.matchElement.call(module.prototype, element)) {
                            moduleName = currentModuleName;
                            return false;
                        }
                    });
                }
                if(moduleName) {
                    moduleOptions = $jq.extend({element:element}, customOptions);
                    instance = new self.modules[moduleName](moduleOptions);
                }
            }
        });
        return instance;
    },
    refresh: function(elements) {
        $jq(elements).each(function() {
            var instance = $jq(this).data(commonOptions.dataKey);
            if(instance) {
                instance.refresh();
            }
        });
    },
    destroy: function(elements) {
        $jq(elements).each(function() {
            var instance = $jq(this).data(commonOptions.dataKey);
            if(instance) {
                instance.destroy();
            }
        });
    },
    replaceAll: function(context) {
        var self = this;
        $jq.each(this.modules, function(moduleName, module) {
            $jq(module.prototype.selector, context).each(function() {
                self.replace(this, moduleName);
            });
        });
    },
    refreshAll: function(context) {
        if(context) {
            $jq.each(this.modules, function(moduleName, module) {
                $jq(module.prototype.selector, context).each(function() {
                    var instance = $jq(this).data(commonOptions.dataKey);
                    if(instance) {
                        instance.refresh();
                    }
                });
            });
        } else {
            for(var i = customInstances.length - 1; i >= 0; i--) {
                customInstances[i].refresh();
            }
        }
    },
    destroyAll: function(context) {
        var self = this;
        if(context) {
            $jq.each(this.modules, function(moduleName, module) {
                $jq(module.prototype.selector, context).each(function(index, element) {
                    var instance = $jq(element).data(commonOptions.dataKey);
                    if(instance) {
                        instance.destroy();
                    }
                });
            });
        } else {
            while(customInstances.length) {
                customInstances[0].destroy();
            }
        }
    }
};

return api;
}));


/*!
 * JavaScript Custom Forms : File Module
 *
 * Copyright 2014 PSD2HTML (http://psd2html.com)
 * Released under the MIT license (LICENSE.txt)
 * 
 * Version: 1.0.3 next start
*/


;(function($jq, window) {
'use strict';

jcf.addModule({
    name: 'File',
    selector: 'input[type="file"]',
    options: {
        fakeStructure: '<span class="jcf-file"><span class="jcf-fake-input"></span><span class="jcf-upload-button"><span class="jcf-button-content"></span></span></span>',
        buttonText: 'Choose file',
        placeholderText: 'No file chosen',
        realElementClass: 'jcf-real-element',
        extensionPrefixClass: 'jcf-extension-',
        selectedFileBlock: '.jcf-fake-input',
        buttonTextBlock: '.jcf-button-content'
    },
    matchElement: function(element) {
        return element.is('input[type="file"]');
    },
    init: function(options) {
        this.initStructure();
        this.attachEvents();
        this.refresh();
    },
    initStructure: function() {
        this.doc = $jq(document);
        this.realElement = $jq(this.options.element).addClass(this.options.realElementClass);
        this.fakeElement = $jq(this.options.fakeStructure).insertBefore(this.realElement);
        this.fileNameBlock = this.fakeElement.find(this.options.selectedFileBlock);
        this.buttonTextBlock = this.fakeElement.find(this.options.buttonTextBlock).text(this.options.buttonText);

        this.realElement.appendTo(this.fakeElement).css({
            position: 'absolute',
            opacity: 0
        });
    },
    attachEvents: function() {
        this.realElement.on({
            'jcf-pointerdown': this.onPress,
            'change': this.onChange,
            'focus': this.onFocus
        });
    },
    onChange: function() {
        this.refresh();
    },
    onFocus: function() {
        this.fakeElement.addClass(this.options.focusClass);
        this.realElement.on('blur', this.onBlur);
    },
    onBlur: function() {
        this.fakeElement.removeClass(this.options.focusClass);
        this.realElement.off('blur', this.onBlur);
    },
    onPress: function() {
        this.fakeElement.addClass(this.options.pressedClass);
        this.doc.on('jcf-pointerup', this.onRelease);
    },
    onRelease: function() {
        this.fakeElement.removeClass(this.options.pressedClass);
        this.doc.off('jcf-pointerup', this.onRelease);
    },
    getFileName: function(){
        return this.realElement.val().replace(/^[\s\S]*(?:\\|\/)([\s\S^\\\/]*)$jq/g, '$jq1');
    },
    getFileExtension: function(){
        var fileName = this.realElement.val();
        return fileName.lastIndexOf('.') < 0 ? '' : fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
    },
    updateExtensionClass: function(){
        var currentExtension = this.getFileExtension(),
            currentClassList = this.fakeElement.prop('className'),
            cleanedClassList = currentClassList.replace(new RegExp('(\\s|^)' + this.options.extensionPrefixClass + '[^ ]+','gi'), '');

        this.fakeElement.prop('className', cleanedClassList);
        if(currentExtension) {
            this.fakeElement.addClass(this.options.extensionPrefixClass + currentExtension);
        }
    },
    refresh: function() {
        var selectedFileName = this.getFileName() || this.options.placeholderText;
        this.fakeElement.toggleClass(this.options.disabledClass, this.realElement.is(':disabled'));
        this.fileNameBlock.text(selectedFileName);
        this.updateExtensionClass();
    },
    destroy: function() {
        // reset styles and restore element position
        this.realElement.insertBefore(this.fakeElement).removeClass(this.options.realElementClass).css({
            position: '',
            opacity: ''
        });
        this.fakeElement.remove();

        // remove event handlers
        this.realElement.off({
            'jcf-pointerdown': this.onPress,
            'change': this.onChange,
            'focus': this.onFocus,
            'blur': this.onBlur
        });
        this.doc.off('jcf-pointerup', this.onRelease);
    }
});

}($jq, this));
});
)};

Still not working with the following error:

Uncaught TypeError: Cannot read property 'width' of undefined

Can anyone please tell me what is the right approach to do this? Or any other suggestion?