Develop Reference

Array of elements becomes undefined within a class when changing with and attempting to do some adjustments

I build an object and gather all elements by class name, then on changing the with I want to do some work on them. When I construct the object it works, but within WidthChecker() when do some work on a width change the become undefined.
class SlickController {
constructor () {
this.$mobileSlicksCarousels;
}
Init() {
this.$mobileSlicksCarousels = document.getElementsByClassName("slick_carousels_mobile-only"); // view in console says this is valid, I see the objects
this.WidthChecker();
}
WidthChecker() {
var width = $(window).width();
$(window).on('resize', function() {
console.log(this.$mobileSlicksCarousels); // they become undefined in here, lost and none of the content afterwords be seen
if ($(this).width() !== width) {
width = $(this).width();
if (width < 491) {
this.$mobileSlicksCarousels.forEach( carousel => {
this.SlickMobile(carousel);
});
} else if (width > 490) {
this.$mobileSlicksCarousels.forEach( carousel => {
this.UnSlickMobile(carousel);
});
}
}
});
}
SlickMobile (toSlick) {
console.log(toSlick);
toSlick.slick();
}
UnSlickMobile (unSlick) {
unSlick.slick('unslick');
}
}
// call and start width checker
slick_Controller.Init();
I assume the issue is when I called $(window).on('resize', function() { because the function doesn't see the parent variables, but I'm not sure how else to approach calling a function directly on resize.

You can store this in a variable before jumping to function or you can bind function but then you lose jquery context and cannot use $(this) expression.
Take a look at the examples
class Test {
constructor () {
this.property = 1;
}
Func() {
var width = $(window).width();
const that = this;
$(window).on('load', function() {
console.log(that.property);
console.log($(this).width());
});
}
Func1() {
var width = $(window).width();
$(window).on('load', (function() {
console.log(this.property);
console.log($(window).width());
}).bind(this));
}
Func2() {
var width = $(window).width();
$(window).on('load', this.OnResize.bind(this));
}
OnResize(event) {
console.log(this.property);
console.log($(event.target).width());
}
}
const test = new Test();
test.Func();
test.Func1();
test.Func2();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Angular 4 TypeScript callaback with this. in block

I have a theme that I am converting into an Angular 4 admin panel. The theme has a file called app.js containing a class which I am trying to convert into my layout.component.ts In app.js there are several blocks of code that try to access functions outside the class but I have converted all functions into methods of my layout.component.ts;
$(window).resize(function(){
this.resizePageContent();
});
Running this gives a Javascript error. However there is a method on my layout.component.ts that should be used in this case.;
this.resizePageContent is not a function
So I am wondering which is the best way to convert this such that the layout.component.ts method is called instead. This is what I have tried but I am not so sure whether this is the best way to do it and why it works.
$(window).resize(()=>{
this.resizePageContent();
});
After replacing it with the above code the errors have disappeared.
This is a preview of app.js It has over 700 lines of code so I will not be able to paste it all here;
Update:
var App = function() {
/* Helper variables - set in uiInit() */
var page, pageContent, header, footer, sidebar, sScroll, sidebarAlt, sScrollAlt;
/* Initialization UI Code */
var uiInit = function() {...};
/* Page Loading functionality */
var pageLoading = function(){..};
/* Gets window width cross browser */
var getWindowWidth = function(){...};
/* Sidebar Navigation functionality */
var handleNav = function() {..};
/* Scrolls the page (static layout) or the sidebar scroll element (fixed header/sidebars layout) to a specific position - Used when a submenu opens */
var handlePageScroll = function(sElem, sHeightDiff, sSpeed) {...};
/* Sidebar Functionality */
var handleSidebar = function(mode, extra) {...};
/* Resize #page-content to fill empty space if exists */
var resizePageContent = function() {...};
/* Interactive blocks functionality */
var interactiveBlocks = function() {...};
/* Scroll to top functionality */
var scrollToTop = function() {...};
/* Demo chat functionality (in sidebar) */
var chatUi = function() {...};
/* Template Options, change features functionality */
var templateOptions = function() {...};
/* Datatables basic Bootstrap integration (pagination integration included under the Datatables plugin in plugins.js) */
var dtIntegration = function() {...};
/* Print functionality - Hides all sidebars, prints the page and then restores them (To fix an issue with CSS print styles in webkit browsers) */
var handlePrint = function() {...};
return {
init: function() {
uiInit(); // Initialize UI Code
pageLoading(); // Initialize Page Loading
},
sidebar: function(mode, extra) {
handleSidebar(mode, extra); // Handle sidebars - access functionality from everywhere
},
datatables: function() {
dtIntegration(); // Datatables Bootstrap integration
},
pagePrint: function() {
handlePrint(); // Print functionality
}
};
}();
/* Initialize app when page loads */
$(function(){ App.init(); });
This is my layout.component.ts;
import { Component, OnInit } from '#angular/core';
declare var jQuery: any;
declare var $: any;
declare var window: any;
declare var document: any;
declare var Cookies: any;
#Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
public page;
public pageContent;
public header;
public footer;
public sidebar;
public sScroll;
public sidebarAlt;
public sScrollAlt;
constructor() { }
ngOnInit() {
this.init();
}
uiInit (): void {...}
pageLoading (): void {...}
getWindowWidth (): any {...}
handleNav (): any {...}
handlePageScroll (sElem, sHeightDiff, sSpeed): void {...}
handleSidebar (mode, extra?:any): any {
if (mode === 'init') {
// Init sidebars scrolling functionality
this.handleSidebar('sidebar-scroll');
this.handleSidebar('sidebar-alt-scroll');
// Close the other sidebar if we hover over a partial one
// In smaller screens (the same applies to resized browsers) two visible sidebars
// could mess up our main content (not enough space), so we hide the other one :-)
$('.sidebar-partial #sidebar')
.mouseenter(function(){ this.handleSidebar('close-sidebar-alt'); });
$('.sidebar-alt-partial #sidebar-alt')
.mouseenter(function(){ this.handleSidebar('close-sidebar'); });
} else {
var windowW = this.getWindowWidth();
if (mode === 'toggle-sidebar') {
if ( windowW > 991) { // Toggle main sidebar in large screens (> 991px)
this.page.toggleClass('sidebar-visible-lg');
if (this.page.hasClass('sidebar-mini')) {
this.page.toggleClass('sidebar-visible-lg-mini');
}
if (this.page.hasClass('sidebar-visible-lg')) {
this.handleSidebar('close-sidebar-alt');
}
// If 'toggle-other' is set, open the alternative sidebar when we close this one
if (extra === 'toggle-other') {
if (!this.page.hasClass('sidebar-visible-lg')) {
this.handleSidebar('open-sidebar-alt');
}
}
} else { // Toggle main sidebar in small screens (< 992px)
this.page.toggleClass('sidebar-visible-xs');
if (this.page.hasClass('sidebar-visible-xs')) {
this.handleSidebar('close-sidebar-alt');
}
}
// Handle main sidebar scrolling functionality
this.handleSidebar('sidebar-scroll');
}
else if (mode === 'toggle-sidebar-alt') {
if ( windowW > 991) { // Toggle alternative sidebar in large screens (> 991px)
this.page.toggleClass('sidebar-alt-visible-lg');
if (this.page.hasClass('sidebar-alt-visible-lg')) {
this.handleSidebar('close-sidebar');
}
// If 'toggle-other' is set open the main sidebar when we close the alternative
if (extra === 'toggle-other') {
if (!this.page.hasClass('sidebar-alt-visible-lg')) {
this.handleSidebar('open-sidebar');
}
}
} else { // Toggle alternative sidebar in small screens (< 992px)
this.page.toggleClass('sidebar-alt-visible-xs');
if (this.page.hasClass('sidebar-alt-visible-xs')) {
this.handleSidebar('close-sidebar');
}
}
}
else if (mode === 'open-sidebar') {
if ( windowW > 991) { // Open main sidebar in large screens (> 991px)
if (this.page.hasClass('sidebar-mini')) { this.page.removeClass('sidebar-visible-lg-mini'); }
this.page.addClass('sidebar-visible-lg');
} else { // Open main sidebar in small screens (< 992px)
this.page.addClass('sidebar-visible-xs');
}
// Close the other sidebar
this.handleSidebar('close-sidebar-alt');
}
else if (mode === 'open-sidebar-alt') {
if ( windowW > 991) { // Open alternative sidebar in large screens (> 991px)
this.page.addClass('sidebar-alt-visible-lg');
} else { // Open alternative sidebar in small screens (< 992px)
this.page.addClass('sidebar-alt-visible-xs');
}
// Close the other sidebar
this.handleSidebar('close-sidebar');
}
else if (mode === 'close-sidebar') {
if ( windowW > 991) { // Close main sidebar in large screens (> 991px)
this.page.removeClass('sidebar-visible-lg');
if (this.page.hasClass('sidebar-mini')) { this.page.addClass('sidebar-visible-lg-mini'); }
} else { // Close main sidebar in small screens (< 992px)
this.page.removeClass('sidebar-visible-xs');
}
}
else if (mode === 'close-sidebar-alt') {
if ( windowW > 991) { // Close alternative sidebar in large screens (> 991px)
this.page.removeClass('sidebar-alt-visible-lg');
} else { // Close alternative sidebar in small screens (< 992px)
this.page.removeClass('sidebar-alt-visible-xs');
}
}
else if (mode === 'sidebar-scroll') { // Handle main sidebar scrolling
if (this.page.hasClass('sidebar-mini') && this.page.hasClass('sidebar-visible-lg-mini') && (windowW > 991)) { // Destroy main sidebar scrolling when in mini sidebar mode
if (this.sScroll.length && this.sScroll.parent('.slimScrollDiv').length) {
this.sScroll
.slimScroll({destroy: true});
this.sScroll
.attr('style', '');
}
}
else if ((this.page.hasClass('header-fixed-top') || this.page.hasClass('header-fixed-bottom'))) {
var sHeight = $(window).height();
if (this.sScroll.length && (!this.sScroll.parent('.slimScrollDiv').length)) { // If scrolling does not exist init it..
this.sScroll
.slimScroll({
height: sHeight,
color: '#fff',
size: '3px',
touchScrollStep: 100
});
// Handle main sidebar's scrolling functionality on resize or orientation change
var sScrollTimeout;
$(window).on('resize orientationchange', function(){
clearTimeout(sScrollTimeout);
sScrollTimeout = setTimeout(function(){
this.handleSidebar('sidebar-scroll');
}, 150);
});
}
else { // ..else resize scrolling height
this.sScroll
.add(this.sScroll.parent())
.css('height', sHeight);
}
}
}
else if (mode === 'sidebar-alt-scroll') { // Init alternative sidebar scrolling
if ((this.page.hasClass('header-fixed-top') || this.page.hasClass('header-fixed-bottom'))) {
var sHeightAlt = $(window).height();
if (this.sScrollAlt.length && (!this.sScrollAlt.parent('.slimScrollDiv').length)) { // If scrolling does not exist init it..
this.sScrollAlt
.slimScroll({
height: sHeightAlt,
color: '#fff',
size: '3px',
touchScrollStep: 100
});
// Resize alternative sidebar scrolling height on window resize or orientation change
var sScrollAltTimeout;
$(window).on('resize orientationchange', function(){
clearTimeout(sScrollAltTimeout);
sScrollAltTimeout = setTimeout(function(){
this.handleSidebar('sidebar-alt-scroll');
}, 150);
});
}
else { // ..else resize scrolling height
this.sScrollAlt
.add(this.sScrollAlt.parent())
.css('height', sHeightAlt);
}
}
}
}
return false;
}
resizePageContent (): void {...}
interactiveBlocks (): void {...}
scrollToTop (): any{...}
chatUi (): any {...}
templateOptions (): void {...}
dtIntegration (): any {...}
handlePrint (): void {...}
//Methods from original object
init (): void {
this.uiInit(); // Initialize UI Code
this.pageLoading(); // Initialize Page Loading
}
//Originally sidebar
CallhandleSidebar(mode, extra): void {
this.handleSidebar(mode, extra); // Handle sidebars - access functionality from everywhere
}
datatables() :void {
this.dtIntegration(); // Datatables Bootstrap integration
}
pagePrint (): void {
this.handlePrint(); // Print functionality
}
}
Also could you give me an example of how TypeScript might output something like this;
$(window).resize(()=>{
this.resizePageContent();
});
...just to get a good idea of how it works.

In your case, using the code
$(window).resize(()=>{
this.resizePageContent();
});
is the correct way for accessing functions and variables outside of the scope of the callback function.
When using
function() {
this.something;
}
the 'this' is bound to the scope of the function, rather than of the class.
When using
() => {
this.something
}
that is using ecmascript 6 arrow notation. Ecmascript 6 sees the introduction of the lexical this, where in the latter case the 'this' keyword refers to the class defined.
For more information see http://es6-features.org/#Lexicalthis and https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this .

If you have to do just delegate or one line coder in the callback, go for this:
$(window).resize(()=> this.resizePageContent());
Or you can use the following too resize the page content:
another question on stackoverflow to catch the window resizing event in Angular context
and make your resizePageContent() method to listen for that event.

Opinion based question, but personally the best way is to use a class field
and assign an arrow function definition, and to -not- use jQuery while using angular:
window.addEventListener('resize', this.resizePageContent);
Within your class you should then define the method like this:
private resizePageContent: EventListener = (event: UIEvent): void => {
};
The big advantage of this, is that you can remove the event listener, which is impossible if you use an anonymous arrow function.
plunkr
Another option is to use bind(this) to retain the this context:
window.addEventListener('resize', this.resizePageContent.bind(this));
This way you do not need to assign your callback to a field of the class. But using bind creates a copy of the method, which makes it harder (not impossible) to remove the event listener
You can also just immediately listen to it from within your component using #HostListener. Removing of the event is done internally by angular on destroy of the component
#HostListener('window:resize', ['$event'])
public resizePageContent(event: Event) {}
The reason you were getting an error is because you were using the function keyword. This changes the this context to the anonymous function you are defining as callback

Recall JS function on window resize

I am extremely new to JS, any help with this question is greatly appreciated.
I have the following bit of JS:
var isMobile = false;
if(Modernizr.mq('only all and (max-width: 1024px)') ) {
isMobile = true;
}
if (isMobile === false)
/* desired function: */
slider.ev.on('rsAfterSlideChange', playSlideVideo);
playSlideVideo();
}
Which indeed works as intended if the browser window loads below or above max-width: 1024px. The problem is that I would like my functions to run or stop if the user changes the size of their window after the page loads.
How can I go about setting that up?
This is amazing, thank you! Specially for explaining commenting your code along the way. Im 80% there. the script works when going from small window to big, but does not work from big to small. any thoughts on how I can fix? This is all of my code:
var slider = $(".royalSlider").data('royalSlider'),
prevSlideVideo,
playSlideVideo = function() {
if(prevSlideVideo) {
prevSlideVideo.pause();
}
var video = slider.currSlide.content.find('video');
if(video.length) {
prevSlideVideo = video[0];
prevSlideVideo.play();
} else {
prevSlideVideo = null;
}
};
var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
var timer = 0;
function updateSlider() {
if (!isMobile) {
/* desired shenanigans: */
slider.ev.on('rsAfterSlideChange', playSlideVideo);
playSlideVideo();
}
}
$window.on("resize.slider", function() {
// delay execution to 300ms after the last resize event
timer = setTimeout(function() {
clearTimeout(timer);
isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
updateSlider(); // run function on resize
}, 300);
}).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();

update
I would doubt the isMobile = Modernizr.mq('only all and (max-width: 1024px)'); part (even though it seems fine)
Also, it appears that you're assigning events to slider widget. There could be a case where multiple resize events would end up attaching multiple events 'rsAfterSlideChange' to the slider.
Looking at the api there doesn't seem to be an off method.
So, keeping above in mind. could you try something like below:
var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
var timer = 0;
var slider = $(".royalSlider").data('royalSlider'); // slider instance
var prevSlideVideo;
var playSlideVideo = function() {
if(prevSlideVideo) {
prevSlideVideo.pause();
}
var video = slider.currSlide.content.find('video');
if(video.length) {
prevSlideVideo = video[0];
prevSlideVideo.play();
} else {
prevSlideVideo = null;
}
};
// Looking at the [api](http://dimsemenov.com/plugins/royal-slider/documentation/#api) there doesn't seem to be an ```off``` method.
// So it is probably safe to attach event only once.
slider.ev.on('rsAfterSlideChange', playSlideVideo);
$window.on("resize.slider", function() {
// delay execution to 300ms after the last resize event
timer = setTimeout(function() {
clearTimeout(timer);
// quick and dirty check of window width instead of match media, this is unreliable but should do the job for now
if ($window.width() < 1024) {
playSlideVideo();
}
// updateSlider(); // dont need this anymore as you're calling ```playSlideVideo()``` straight away
}, 300);
}).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();
There are many ways to do it.
Heres a quick way:
var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
function updateSlider() {
if (!isMobile) {
/* desired shenanigans: */
slider.ev.on('rsAfterSlideChange', playSlideVideo);
playSlideVideo();
}
}
$window.on("resize.slider", function() {
isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
updateSlider(); // run function on resize
}).trigger("resize.slider"); // trigger this event so you don't have to explicitly call updateSlider();
Interesting thing with resize events is that they will fire many times when window is resized, there are many ways to throttle this event, below is one way
var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
var timer = 0;
function updateSlider() {
if (!isMobile) {
/* desired shenanigans: */
slider.ev.on('rsAfterSlideChange', playSlideVideo);
playSlideVideo();
}
}
$window.on("resize.slider", function() {
// delay execution to 300ms after the last resize event
timer = setTimeout(function() {
clearTimeout(timer);
isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
updateSlider(); // run funtion on resize
}, 300);
}).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();
I haven't tested above code (maybe provide a fiddle?) but should put you in right direction. Let me know if anything is unclear.
Good luck

Responsive JavaScript: Attempts to Fire Functions based on Media Queries

Third day I'm trying to implement media queries in JavaScript.
Say function A() can be called only if (min-width: 768px),
and the function B() can be called only if (max-width: 767px).
This is easily achieved by using MediaQueryList object. But problems occur with browser resizing.
A function A() can not be called if the page was loaded on
(max-width: 767px), and then resizing to (min-width: 768px).
A function A() fires multiple times on click if I try call function on window resize.
I have tried different solutions:
using addListener
enquire.js
setTimeout / clearTimeout — http://go.shr.lc/1kGNpM6
etc
But obviously my knowledge of JavaScript is not enough to do things write. Please help
// Attempt #1 -----------------------------------------------------------------
function responsiveFunction(){
if(window.matchMedia('(max-width: 767px)').matches) {
$('.btn').click(function(event) {
// Knock knock
});
}
}
$(function(){
responsiveFunction();
});
$(window).resize(function(){
responsiveFunction();
});
// Attempt #2 -----------------------------------------------------------------
function responsiveFunction(mql) {
    if (mql.matches) {
     $('.btn').click(function(event) {
// Knock knock
});
    }
}
 
var mql = window.matchMedia('min-width: 768px'); // MQL for MediaQueryList object
 
mql.addListener(responsiveFunction); // Execute responsive function on resize
 
responsiveFunction(mql); // Execute responsive function on load
// Attempt #3 -----------------------------------------------------------------
var smartResize = (function() {
var timers = {};
return function(callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = 'Don\'t call this twice without a uniqueId';
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
function responsiveFunction() {
if (window.matchMedia('(min-width: 768px)').matches) {
$('.btn').click(function(event) {
// Knock knock
});
}
}
// Execute responsive function on load
responsiveFunction();
// Execute responsive function on resize
$(window).resize(function() {
smartResize(function() {
responsiveFunction();
}, 500, 'myUniqueId');
});
// Attempt #4 w enquire.min.js ---------------------------------------------
enquire.register('(min-width: 768px)', {
match: function() {
$('.btn').click(function(event) {
// Knock knock
});
}
});

This should work:
$(function(){
$('.btn').on('click', function(event) {
if(window.matchMedia('(max-width: 767px)').matches) {
// Only run the code if media query matches
}
});
});
Register the click handler without checking the max-width and check the width just before you run the code, if the width condition matches then run the code otherwise doesn't run the code.

Repeating code block problem

I have the following code in a jQuery JavaScript document running on a page (THIS IS CURRENT):
$(window).resize(function(){
detectscreen();
});
function windowWidth() {
if(!window.innerWidth) {
// user is being a git, using ie
return document.documentElement.clientWidth;
} else {
return window.innerWidth;
}}
gearsExists = false;
function detectscreen() {
shouldExist = windowWidth() >= 1300;
if (shouldExist != gearsExists) {
if (shouldExist) {
$('body').append('<div id="gearsfloat"></div>');
$('#clickGoTop').fadeTo(0,0);
$('#clickGoTop').hover(function() {
$(this).stop().fadeTo(500,1);
}, function() {
$(this).stop().fadeTo(500,0);
});
} else {
$('#gearsfloat').remove();
$('#clickGoTop').remove();
}
gearsExists = shouldExist;
}
}
This code is from my previous question, branched here simply because I think it is related.
The problem here is that the beginning is fine: it is displayed. However, if the screen is resized to less than 1300, it disappears; still good.
Now I make the window again larger than 1300. Suddenly the gear element is doubled. Another screen squish and largen and BAM, there's three now. Do this several times and it quickly adds up.
How can I stop this?

If you hook any code in resize event, make sure that your code doesn't resize the window again. Otherwise, resize event will fire again and your code will go in infinite loop.
Also, in your code, you are not using the global gearsExists variable. Remove the 'var' at the bottom of the method to use the global variable.
function detectscreen() {
// Your original code
//var gearsExists = shouldExist; //This code will create new local variable.
gearsExists = shouldExist;
}
}
EDIT: Here's what I would do:
//We will add only one variable to the global scope.
var screenManager = function()
{
var pub = {};
var inResizeHandler = false;
pub.getWindowWidth = function()
{
return window.innerWidth || document.documentElement.clientWidth;
};
pub.manage = function()
{
//if we are already in the resize handler, don't do anything.
if(inResizeHandler)
return;
inResizeHandler = true;
if(pub.getWindowWidth() < 1300)
{
$('#gearsfloat').remove();
//You don't have to remove clickGoTop because it is part of gearsfloat.
inResizeHandler = false;
return;
}
if($('#gearsfloat').length > 0)
{
inResizeHandler = false;
return false;
}
$('body').append('<div id="gearsfloat"></div>');
$('#clickGoTop').fadeTo(0,0);
$('#clickGoTop').hover(
function() {$(this).stop().fadeTo(500,1);},
function() {$(this).stop().fadeTo(500,0);
});
inResizeHandler = false;
};
pub.init = function()
{
$(window).resize(pub.manage);
};
return pub;
}();
$(document).ready( function() { screenManager.init(); } );
EDIT:
Final working version:
http://jsbin.com/ufipu
Code:
http://jsbin.com/ufipu/edit

Haha! After a while, I decided to ignore everything said by everyone else for a while (sorry) and try to see if I could figure it out myself, and I did!
Thanks to SolutionYogi for all the help, but the code he gave me was out of my expertise; it was impossible to debug. My solution is not as pretty as his (if you can help optimize, please do), but it works:
function WinWidth() {
// check width of content
if(!window.innerWidth) {
// you git, how dare you use ie
return document.documentElement.clientWidth;
} else {
return window.innerWidth;
}
};
function gearsAction() {
if(WinWidth() >= 1300) {
$('body').append(
'<div id="gearsfloat"></div>');
$('#clickGoTop').fadeTo(0,0);
$('#clickGoTop').hover(
function() {$(this).stop().fadeTo(500,1);},
function() {$(this).stop().fadeTo(500,0);});
};
};
$(document).ready(function() {
gearsAction();
});
$(window).resize(function() {
$('#gearsfloat').remove();
gearsAction();
});