Develop Reference

Issue with checking if item is in DOM and the executing the javascript function

I'm making a webpage that has two different navbars... Lets say I named them navbar1 and navbar2.. soo the navbar1 is being used on the home page of the web site and navbar2 on all other sub pages... I have written a pure Javascript function that checks if the navbar1 exists in DOM and if it does then it does something... if navbar1 doesent exist in DOM it should ignore that part of code and move forward with the rest...
so now I have this issue that I spent several hours now trying to resolve... and I just can figure it out... When I go to the home page the code works... everything that should happen to navbar1 happens... but if I go to a subpage that doesn't use navbar1 I get this error in the console: "Cannot read properties of null (reading 'getBoundingClientRect')"
I would apreciate some help... and if it matters I don't have much experience with javascript so :)
So here's my JS code...
function docReady(fn) {
if (document.readyState === "complete" || document.readyState === "interactive") {
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function() {
var className = "scroll";
var scrollTrigger = 60;
var navTogler = document.getElementById('navbar-toggler');
var navbar1 = document.getElementById('navbar1');
var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
if (isInViewport(navbar1)) {
navTogler.addEventListener('click', classToggle);
function classToggle() {
navbar1.classList.toggle('has-bg');
if (navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
if (navbar1.classList.contains('scroll') && navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
if (!navbar1.classList.contains('scroll') && !navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
}
else {
// console.log("something");
}
}
window.onscroll = function() {
if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
document.getElementById("navbar1").classList.add(className);
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
else {
document.getElementById("navbar1").classList.remove(className);
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
}
};
}
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
grid: {
rows: 2,
},
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
console.log("hello swiper");
});

isInViewport() should return false if the element doesn't exist.
var isInViewport = function (elem) {
if (!elem) {
return false;
}
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};

Overriding element.style{width: ;} value in jquery sticky nav

The issue that I am having is getting my sticky nav to span the entire width of the page. I am using the jquery sticky nav plugin from http://stickyjs.com/ - I have tried setting the width to 100% but there is an element.style property that is overriding the containers width. After researching this issue it seems that this element.style value comes from the javascript for this plugin. I am new to code and I have limited javascript knowledge so any guidance on how to change/remove that element.style value would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.sticky.js"></script>
</head>
<body>
<div class="wrapper">
<header id="sticker" class="clearfix">
<img src="img/logo.png" alt="Conference Logo">
<nav>
<ul class="monquan">
<li>Schedule</li>
<li>Locations</li>
<li>Workshops</li>
<li>Register</li>
</ul>
</nav>
</header>
</div>
<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script>
</body>
</html>
There is the HTML for my project and below is the jquery.sticky.js code that I believe holds the answer to my problem.
// Sticky Plugin v1.0.4 for jQuery
// =============
// Author: Anthony Garand
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Improvements by Leonardo C. Daronco (daronco)
// Created: 02/14/2011
// Date: 07/20/2015
// Website: http://stickyjs.com/
// Description: Makes an element on the page stick on the screen as you scroll
// It will only set the 'top' and 'position' of your element, you
// might need to adjust the width in some cases.
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var slice = Array.prototype.slice; // save ref to original slice()
var splice = Array.prototype.splice; // save ref to original slice()
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
wrapperClassName: 'sticky-wrapper',
center: false,
getWidthFrom: '',
widthFromWrapper: true, // works only when .getWidthFrom is empty
responsiveWidth: false,
zIndex: 'auto'
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0, l = sticked.length; i < l; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
//update height in case of dynamic content
s.stickyWrapper.css('height', s.stickyElement.outerHeight());
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement
.css({
'width': '',
'position': '',
'top': '',
'z-index': ''
});
s.stickyElement.parent().removeClass(s.className);
s.stickyElement.trigger('sticky-end', [s]);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.stickyElement.outerHeight()
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop !== newTop) {
var newWidth;
if (s.getWidthFrom) {
newWidth = $(s.getWidthFrom).width() || null;
} else if (s.widthFromWrapper) {
newWidth = s.stickyWrapper.width();
}
if (newWidth == null) {
newWidth = s.stickyElement.width();
}
s.stickyElement
.css('width', newWidth)
.css('position', 'fixed')
.css('top', newTop)
.css('z-index', s.zIndex);
s.stickyElement.parent().addClass(s.className);
if (s.currentTop === null) {
s.stickyElement.trigger('sticky-start', [s]);
} else {
// sticky is started but it have to be repositioned
s.stickyElement.trigger('sticky-update', [s]);
}
if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) {
// just reached bottom || just started to stick but bottom is already reached
s.stickyElement.trigger('sticky-bottom-reached', [s]);
} else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
// sticky is started && sticked at topSpacing && overflowing from top just finished
s.stickyElement.trigger('sticky-bottom-unreached', [s]);
}
s.currentTop = newTop;
}
// Check if sticky has reached end of container and stop sticking
var stickyWrapperContainer = s.stickyWrapper.parent();
var unstick = (s.stickyElement.offset().top + s.stickyElement.outerHeight() >= stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight()) && (s.stickyElement.offset().top <= s.topSpacing);
if( unstick ) {
s.stickyElement
.css('position', 'absolute')
.css('top', '')
.css('bottom', 0)
.css('z-index', '');
} else {
s.stickyElement
.css('position', 'fixed')
.css('top', newTop)
.css('bottom', '')
.css('z-index', s.zIndex);
}
}
}
},
resizer = function() {
windowHeight = $window.height();
for (var i = 0, l = sticked.length; i < l; i++) {
var s = sticked[i];
var newWidth = null;
if (s.getWidthFrom) {
if (s.responsiveWidth) {
newWidth = $(s.getWidthFrom).width();
}
} else if(s.widthFromWrapper) {
newWidth = s.stickyWrapper.width();
}
if (newWidth != null) {
s.stickyElement.css('width', newWidth);
}
}
},
methods = {
init: function(options) {
var o = $.extend({}, defaults, options);
return this.each(function() {
var stickyElement = $(this);
var stickyId = stickyElement.attr('id');
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName;
var wrapper = $('<div></div>')
.attr('id', wrapperId)
.addClass(o.wrapperClassName);
stickyElement.wrapAll(function() {
if ($(this).parent("#" + wrapperId).length == 0) {
return wrapper;
}
});
var stickyWrapper = stickyElement.parent();
if (o.center) {
stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
}
if (stickyElement.css("float") === "right") {
stickyElement.css({"float":"none"}).parent().css({"float":"right"});
}
o.stickyElement = stickyElement;
o.stickyWrapper = stickyWrapper;
o.currentTop = null;
sticked.push(o);
methods.setWrapperHeight(this);
methods.setupChangeListeners(this);
});
},
setWrapperHeight: function(stickyElement) {
var element = $(stickyElement);
var stickyWrapper = element.parent();
if (stickyWrapper) {
stickyWrapper.css('height', element.outerHeight());
}
},
setupChangeListeners: function(stickyElement) {
if (window.MutationObserver) {
var mutationObserver = new window.MutationObserver(function(mutations) {
if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
methods.setWrapperHeight(stickyElement);
}
});
mutationObserver.observe(stickyElement, {subtree: true, childList: true});
} else {
if (window.addEventListener) {
stickyElement.addEventListener('DOMNodeInserted', function() {
methods.setWrapperHeight(stickyElement);
}, false);
stickyElement.addEventListener('DOMNodeRemoved', function() {
methods.setWrapperHeight(stickyElement);
}, false);
} else if (window.attachEvent) {
stickyElement.attachEvent('onDOMNodeInserted', function() {
methods.setWrapperHeight(stickyElement);
});
stickyElement.attachEvent('onDOMNodeRemoved', function() {
methods.setWrapperHeight(stickyElement);
});
}
}
},
update: scroller,
unstick: function(options) {
return this.each(function() {
var that = this;
var unstickyElement = $(that);
var removeIdx = -1;
var i = sticked.length;
while (i-- > 0) {
if (sticked[i].stickyElement.get(0) === that) {
splice.call(sticked,i,1);
removeIdx = i;
}
}
if(removeIdx !== -1) {
unstickyElement.unwrap();
unstickyElement
.css({
'width': '',
'position': '',
'top': '',
'float': '',
'z-index': ''
})
;
}
});
}
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(method) {
if (methods[method]) {
return methods[method].apply(this, slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$.fn.unstick = function(method) {
if (methods[method]) {
return methods[method].apply(this, slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.unstick.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$(function() {
setTimeout(scroller, 0);
});
}));
Please let me know if there is anything else I can provide to make answering this easier and I appreciate any input.

I strongly suggest not to change the library file, it will pretty much defeat the purpose of you using a library in the first place. A library is designed to work in a specific way and mostly follows a rigid code, meaning if you change a single component the repercussions might be bad or worse non-debuggable.
If you want, you must always override the code with your own custom files. In your case, after the <script src="js/jquery.sticky.js"></script> create a js file of your own say, <script src="js/custom.js"></script> and add this there(this is just a basic example)
element.css({"width":"100%"});
OR adding the same line onto your internal <script> in your HTML(where you have initiated the stickybar) will also work well.

Parallax Background Positioning Scrolling

I have just developed a new parallax scrolling script. I have it working just the way I want however there is just 1 issue with it currently.
I want the script to start scrolling the background image at the y coord that is specified in the css stylesheet by default. Instead my script seems to be resetting the CSS y coord to 0 before scrolling the image. This is obviously undesired behavior.
// Parallax scripting starts here
$.prototype.jpayParallax = function(userOptions){
var _api = {};
_api.utils = {};
_api.utils.isElementInViewport = function(el){
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
_api.utils.debounceScrollWheel = (function(){
$(function(){
var $window = $(window); //Window object
var scrollTime = 0.3; //Scroll time
var scrollDistance = 50; //Distance. Use smaller value for shorter scroll and greater value for longer scroll
$window.on("mousewheel DOMMouseScroll", function(event){
event.preventDefault();
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to($window, scrollTime, {
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut, //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
autoKill: true,
overwrite: 5
});
});
});
})();
_api.selector = 'data-jpay-parallax';
_api.methods = {};
_api.methods.checkForVisibleParallaxEls = function(){
$('['+_api.selector+']').each(function(){
var instanceObject = $(this);
var origBgPos = $(this).css('backgroundPosition').split(' ');
var options = $(this).data('jpay-parallax');
console.log(origBgPos)
if (_api.utils.isElementInViewport(instanceObject)){
_api.methods.doParallax(instanceObject, options);
}
});
}
_api.methods.doParallax = function(instanceToManip, userOptions){
var direction = userOptions.settings.direction;
var orientation = userOptions.settings.orientation;
var speed = userOptions.settings.speed;
var type = userOptions.settings.type;
var speedInt;
var getSpeed = (function(){
if (speed){
switch(speed){
case 'slow':
speedInt = 10;
break;
case 'fast':
speedInt = 5;
break;
case 'faster':
speedInt = 1;
break;
default:
throw new TypeError('Unknown speed parameter added to module instructions');
}
}
})();
var distToTopInt = function(){
if (typeof speedInt === 'number'){
return $(window).scrollTop()/speedInt;
}
else {
return $(window).scrollTop();
}
}
var origPos = instanceToManip.css('backgroundPosition').split(' ');
var origPosX = parseInt(origPos[0]);
var origPosY = parseInt(origPos[1]);
var newPosY = origPosY += distToTopInt();
var newPosX = origPosX += distToTopInt();
if (orientation === 'vertical' && direction !== 'reverse'){
instanceToManip.css('backgroundPositionY', newPosX+'px');
}
else if (orientation === 'vertical' && direction === 'reverse'){
instanceToManip.css('backgroundPositionY', -newPosX+'px');
}
else if (orientation == 'horizontal' && direction !== 'reverse'){
instanceToManip.css('backgroundPositionX', newPosX+'px');
}
else if (orientation == 'horizontal' && direction === 'reverse'){
instanceToManip.css('backgroundPositionX', -newPosY+'px');
}
}
$(window).on('scroll', _api.methods.checkForVisibleParallaxEls)
};
$.fn.jpayParallax();
Here is the pen:
http://codepen.io/nicholasabrams/pen/OPxKXm/?editors=001
BONUS: Why does this script also mess with the css set backgroundSize property when the script never accesses it?
I am looking for advice in where in the script to cache the original CSS background image y coord value so that it becomes incremented from there instead of starting at 0px /0 for each instance. Thanks again for the help!

Choppy animation on scroll

I'm attempting to animate a block based on how far scrolled down the page I am, by using jQuery to change the CSS attribute.
when using a mouse wheel, there is a slight flicker of where it was and where it ends up being shown at the same time.
An example of this can be viewed at the following link.
http://fiddle.jshell.net/LPvES/10/show/light/
This behaviour is not smooth and feels 'choppy'.
I have no idea why this is happening. The expected behaviour should be this:
http://jsfiddle.net/LPvES/10/embedded/result/
I understand the irony of linking the exact same example. Only difference I can see between the two is that one is embedded in an iFrame, which is not a solution I want to use.
my JS code:
var icons = {
header: "iconClosed",
activeHeader: "iconOpen"
};
$('.main--content').accordion({
header: ".accordion header",
heightStyle: "content",
collapsible: true,
icons: icons
});
function accordionIcon() {
var icon = $('.ui-accordion-header-icon.iconOpen');
var iconClosed = $('.ui-accordion-header-icon.iconClosed');
if (icon[0]) {
var article = $('.ui-accordion-header-icon.iconOpen').closest('.article')
if (article.offset().top - window.scrollY > 200) {
if (icon.css('top') !== 0) {
icon.css('top', 0)
}
} else if (article.offset().top - window.scrollY < 200) {
// article.outerHeight() - (icon.offset().top - article.offset().top) > 0
if (article.offset().top - (window.scrollY + 200) < article.outerHeight() && window.scrollY + $(window).height() - article.offset().top < article.outerHeight()) {
var position = (window.scrollY + 200) - article.offset().top
// if(icon.css('transform') === none){
icon.css('top', position)
// }
if (icon.hasClass('iconExtend')) {
icon.removeClass('iconExtend')
}
} else if (window.scrollY + $(window).height() - article.offset().top > article.outerHeight()) {
if (icon.css('top') !== article.outerHeight() + 30) {
icon.css('top', article.outerHeight() + 30)
}
if (!icon.hasClass('iconExtend')) {
icon.addClass('iconExtend')
}
} else {
if (icon.css('top') !== article.outerHeight()) {
icon.css('top', article.outerHeight())
}
if (!icon.hasClass('iconExtend')) {
icon.addClass('iconExtend')
}
}
}
}
if (iconClosed[0]) {
if (iconClosed.css('top') !== 0) {
iconClosed.css('top', 0)
}
if (iconClosed.hasClass('iconExtend')) {
iconClosed.removeClass('iconExtend')
}
}
}
function raf() {
window.requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
requestAnimFrame(raf);
accordionIcon();
}
raf();
Any help would be appreciated.

debugging MooTools slider "SlideItMoo" in IE8

I'm having issues getting this mooTools slider script -- SlideItMoo -- to work with IE8. It works fine in every other browser, but IE8 kicks an error that says "Object doesn't support this property or method" for line 3 indicated below. Any insight or help would be very much appreciated!
initialize: function(options){
this.setOptions(options);
ERROR>> this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
this.totalElements = this.elements.length;
if( this.totalElements <= this.options.itemsVisible ) return;
// width of thumbsContainer children
this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x;
this.currentElement = 0;
this.direction = this.options.direction;
this.autoSlideTotal = this.options.autoSlide + this.options.duration;
this.begin();
},
And here's the full script for reference:
var SlideItMoo = new Class({
Implements: [Options],
options: {
overallContainer: null,
elementScrolled: null,
thumbsContainer: null,
itemsVisible:5,
elemsSlide: null,
itemsSelector: null,
itemWidth: null,
showControls:1,
transition: Fx.Transitions.linear,
duration: 800,
direction: 1,
autoSlide: false,
mouseWheelNav: false
},
initialize: function(options){
this.setOptions(options);
this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
this.totalElements = this.elements.length;
if( this.totalElements <= this.options.itemsVisible ) return;
this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x;
this.currentElement = 0;
this.direction = this.options.direction;
this.autoSlideTotal = this.options.autoSlide + this.options.duration;
this.begin();
},
begin: function(){
this.setContainersSize();
this.myFx = new Fx.Morph(this.options.thumbsContainer, {
wait: true,
transition: this.options.transition,
duration: this.options.duration
});
this.addControls();
if( this.options.mouseWheelNav && !this.options.autoSlide ){
$(this.options.thumbsContainer).addEvent('mousewheel', function(ev){
new Event(ev).stop();
this.slide(-ev.wheel);
}.bind(this));
}
if( this.options.autoSlide )
this.startAutoSlide();
},
setContainersSize: function(){
$(this.options.overallContainer).set({
styles:{
'width': this.options.itemsVisible * this.elementWidth + 50 * this.options.showControls
}
});
$(this.options.elementScrolled).set({
styles:{
'width': this.options.itemsVisible * this.elementWidth
}
});
$(this.options.thumbsContainer).set({
styles:{
'width': this.totalElements * (this.elementWidth + 10)
}
});
},
addControls: function(){
if( !this.options.showControls ) return;
this.fwd = new Element('div', {
'class': 'SlideItMoo_forward',
'events':{
'click':this.slide.pass(1, this)
}
});
this.bkwd = new Element('div', {
'class': 'SlideItMoo_back',
'events':{
'click': this.slide.pass(-1, this)
}
});
$(this.options.overallContainer).adopt(this.fwd, this.bkwd);
},
slide: function( direction ){
if(this.started) return;
this.direction = direction;
var currentIndex = this.currentIndex();
if( this.options.elemsSlide && this.options.elemsSlide>1 && this.endingElem==null ){
this.endingElem = this.currentElement;
for(var i = 0; i < this.options.elemsSlide; i++ ){
this.endingElem += direction;
if( this.endingElem >= this.totalElements ) this.endingElem = 0;
if( this.endingElem < 0 ) this.endingElem = this.totalElements-1;
}
}
if( this.direction == -1 ){
this.rearange();
$(this.options.thumbsContainer).setStyle('margin-left', -this.elementWidth);
}
this.started = true;
this.myFx.start({
'margin-left': this.direction == 1 ? -this.elementWidth : 0
}).chain( function(){
this.rearange(true);
if(this.options.elemsSlide){
if( this.endingElem !== this.currentElement ) this.slide(this.direction);
else this.endingElem=null;
}
}.bind(this) );
},
rearange: function( rerun ){
if(rerun) this.started = false;
if( rerun && this.direction == -1 ) {
return;
}
this.currentElement = this.currentIndex( this.direction );
//$('debug').innerHTML+= this.currentElement+'<br>';
$(this.options.thumbsContainer).setStyle('margin-left',0);
if( this.currentElement == 1 && this.direction == 1 ){
this.elements[0].injectAfter(this.elements[this.totalElements-1]);
return;
}
if( (this.currentElement == 0 && this.direction ==1) || (this.direction==-1 && this.currentElement == this.totalElements-1) ){
this.rearrangeElement( this.elements.getLast(), this.direction == 1 ? this.elements[this.totalElements-2] : this.elements[0]);
return;
}
if( this.direction == 1 ){
this.rearrangeElement( this.elements[this.currentElement-1], this.elements[this.currentElement-2]);
}
else{
this.rearrangeElement( this.elements[this.currentElement], this.elements[this.currentElement+1]);
}
},
rearrangeElement: function( element , indicator ){
this.direction == 1 ? element.injectAfter(indicator) : element.injectBefore(indicator);
},
currentIndex: function(){
var elemIndex = null;
switch( this.direction ){
case 1:
elemIndex = this.currentElement >= this.totalElements-1 ? 0 : this.currentElement + this.direction;
break;
case -1:
elemIndex = this.currentElement == 0 ? this.totalElements - 1 : this.currentElement + this.direction;
break;
}
return elemIndex;
},
startAutoSlide: function(){
this.startIt = this.slide.bind(this).pass(this.direction||1);
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
this.elements.addEvents({
'mouseover':function(){
$clear(this.autoSlide);
}.bind(this),
'mouseout':function(){
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
}.bind(this)
})
}
})

it says Object doesn't support this property or method, not this => property or mothod, it refers to the scope of function in which this or the selected element is undefined.

You may find that the selector has not returned a valid Element. Try testing if the variable was set before assuming such.
this.elements = $(this.options.thumbsContainer);
if(this.elements)this.elements.getElements(this.options.itemsSelector);