Develop Reference

Trying to Override JS Timer

I am a newbie to JS - I've looked for different solutions on how to override a button timer but haven't found any solutions that worked for this application. I'm not even sure if I'm looking in the right place.
jQuery.timers = [];
jQuery.fx.tick = function() {
var timer,
i = 0,
timers = jQuery.timers;
fxNow = Date.now();
for ( ; i < timers.length; i++ ) {
timer = timers[ i ];
// Run the timer and safely remove it when done (allowing for external removal)
if ( !timer() && timers[ i ] === timer ) {
timers.splice( i--, 1 );
}
}
if ( !timers.length ) {
jQuery.fx.stop();
}
fxNow = undefined;
};
jQuery.fx.timer = function( timer ) {
jQuery.timers.push( timer );
jQuery.fx.start();
};
jQuery.fx.interval = 13;
jQuery.fx.start = function() {
if ( inProgress ) {
return;
}
inProgress = true;
schedule();
};
jQuery.fx.stop = function() {
inProgress = null;
};
jQuery.fx.speeds = {
slow: 600,
fast: 200,
// Default speed
_default: 400
};
This is what I'm looking at in the sources - is this even the right place? If so, what could I enter into the console to override?

Javascript Slideshow Speed

I have this Code with a Slideshow for Images. I Would like to set the time the images are fixed. (Image one rest for 10min and then fade out). All the Images should rest about 10min. I like to use this for a Infoscreen in my company. Please help :)
(function() {
function Slideshow( element ) {
this.el = document.querySelector( element );
this.init();
}
Slideshow.prototype = {
init: function() {
this.wrapper = this.el.querySelector( ".slider-wrapper" );
this.slides = this.el.querySelectorAll( ".slide" );
this.previous = this.el.querySelector( ".slider-previous" );
this.next = this.el.querySelector( ".slider-next" );
this.index = 0;
this.total = this.slides.length;
this.timer = null;
this.action();
this.stopStart();
},
_slideTo: function( slide ) {
var currentSlide = this.slides[slide];
currentSlide.style.opacity = 1;
for( var i = 0; i < this.slides.length; i++ ) {
var slide = this.slides[i];
if( slide !== currentSlide ) {
slide.style.opacity = 0;
}
}
},
action: function() {
var self = this;
self.timer = setInterval(function() {
self.index++;
if( self.index == self.slides.length ) {
self.index = 0;
}
self._slideTo( self.index );
}, 3000);
},
stopStart: function() {
var self = this;
self.el.addEventListener( "mouseover", function() {
clearInterval( self.timer );
self.timer = null;
}, false);
self.el.addEventListener( "mouseout", function() {
self.action();
}, false);
}
};
document.addEventListener( "DOMContentLoaded", function() {
var slider = new Slideshow( "#main-slider" );
});
})();

Well, there is only on thing that controls anything timing related in your code, so its a pretty safe bet that's what you want to change.
You have a setInterval() in action with its time set to 3000. Change that to 600000 (10m * 60s * 1000ms) and you should be all set.

action: function() {
var self = this;
self.timer = setInterval(function() {
self.index++;
if( self.index == self.slides.length ) {
self.index = 0;
}
self._slideTo( self.index );
}, 1000*60*10);
This function uses setInterval, which expects interval in ms as the second parameter. In this example its set to 3000 which is 3 seconds.
Change it to what I wrote above (1000ms is 1 second * 60 = 1 minute * 10 = 10 minutes).

dybanically change/insert/update div text using for loop and javascript in variable time steps

I would like to insert text pieces with variable timeout using for loop.
I mean i would like that text would change in the background with given pace and animation.
I have corrected the question.
The short version works, but the longer - not. Do not understand why?
//working version adapted from
JavaScript : For loop with timeout
$(document).ready(function () {
// working
for (var i=0;i<=10;i++) {
(function(ind) {
setTimeout(function(){
console.log(ind);
txtEl = $('#mainImgTxt'); //logs correctly with timeout
txtEl.text(ind); //works correctly with timeout
}, 1000 + (1100 * ind));
})(i);
}
});
Not working - logs after 5 seconds everything : a, b and c, and in div displays c. It should display each 5 seconds a, b and then c.
console.log('txt.js');
var presSlides = [
{ txtItem: [ 'a<br>a<br>'], txtEff: [{}], pictItem: [''], pictEff: [{}], sec : 5000 } ,
{ txtItem: [ 'b<br>b<br>'], txtEff: [{}], pictItem: [''], pictEff: [{}], sec : 5000 } ,
{ txtItem: [ 'c<br>c<br>'], txtEff: [{}], pictItem: [''], pictEff: [{}], sec : 5000 }
];
for (let slide of presSlides) {
//var dur = slide.sec ;
( function( dur, slide ) {
//var dur = dur;
//console.log( '********************************** anon fnc dur ='+dur );
setTimeout( function(slide) {
console.log( '********************************** slide' );
console.log(slide); // slide = { txtItem: { txt: 'a<br>a<br>', txtEff: '', pict: '', pictEff: '' } }
//default values
//var txtDur = 5000;
var txtItemArr = slide.txtItem;
var txtItemArrLen = txtItemArr.length;
var txtItemEff = slide.txtEff;
var txtItemEffLen = Object.keys(txtItemEff).length;
var pictItemArr = slide.pictItem;
var pictItemArrLen = pictItemArr.length;
var pictItemEff = slide.pictEff;
var pictItemEffLen = Object.keys(pictItemEff).length;
var pictEff = pictItemEff[0];
var txtEff = txtItemEff[0];
console.log('pictEff'); console.log(pictEff);
console.log('txtEff'); console.log(txtEff);
console.log('ttxtItemEffLen='); console.log(txtItemEffLen);
if (txtItemEffLen > 1) {
var cnt = 0;
for (let txtItem of txtItemArr) {
if (txtItemEffLen > 1) { var txtEff = txtItemEff[cnt]; }
if (pictItemEffLen > 1) { var pictEff = pictItemEff[cnt]; }
if (txtEff.sec !== null && txtEff.sec !== undefined) {
txtDur = txtEff.sec;
}
// timedDisp(txtDur, txtItem, txtEff, pictEff); //contains timeout
txtDisp( txtItem, txtEff, pictEff);
}
} // if( txtItemEffLen>1 ) {
else {
if (slide.sec !== null && slide.sec !== undefined) {
txtDur = slide.sec;
}
//timedDisp(txtDur, txtItemArr[0], txtEff, pictEff); //contains timeout
txtDisp(txtItemArr[0], txtEff, pictEff);
}
}, dur, slide ); //setTimeout(function(slide){
})( slide.sec, slide );
} // for ( let slide of presSlides ) {
//timedDisp( txtDur, txtItemArr[0], txtEff, pictEff );
function txtDisp( txtItem, txtEff, pictEff) {
console.log('timedDisp, txtDur=' + txtDur);
console.log('timedDisp, txtItem='); console.log(txtItem); //logs correct
//elId you already have
var txtItem = txtItem;
var txtEff = txtEff;
var pictEff = pictEff;
//elId is availbale here
//timing is available here
console.log('timedDisp, setTimeout, txtDur=' + txtDur);
txtEl = $('#mainImgTxt');
console.log('txtEl='); console.log(txtEl);
txtEl.removeClass();
// removeClass("blue"); //If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.
//add text
console.log('timedDisp, setTimeout, txtItem='); console.log(txtItem);
txtEl.text(txtItem);
} // function txtDisp( txtItem, txtEff, pictEff) {
//timedDisp( txtDur, txtItemArr[0], txtEff, pictEff );
function timedDisp(txtDur, txtItem, txtEff, pictEff) {
console.log('timedDisp, txtDur=' + txtDur);
console.log('timedDisp, txtItem='); console.log(txtItem); //logs correct
//elId you already have
var txtItem = txtItem;
var txtEff = txtEff;
var pictEff = pictEff;
setTimeout(function (txtItem, txtEff, pictEff) {
//elId is availbale here
//timing is available here
console.log('timedDisp, setTimeout, txtDur=' + txtDur);
txtEl = $('#mainImgTxt');
console.log('txtEl='); console.log(txtEl);
txtEl.removeClass();
// removeClass("blue"); //If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.
console.log('timedDisp, setTimeout, txtItem='); console.log(txtItem);
txtEl.text(txtItem);
}, txtDur, txtItem, txtEff, pictEff);
} // function timedDisp(txtDur, txtItem, txtEff, pictEff) {
}); // $(document).ready(function () {$(document).ready(function () {

Slideshow first slide timeout longer

I have a custom image slideshow that I am having to modify. I am trying to make the first slide timeout longer, basically I want it to be visible 2 seconds longer than the others. What would be the best way to go about? Here is the code:
(function($) {
var settings = {
'promoid': 'promo',
'selectorid': 'promoselector',
'promoanimation': 'fade',
'timeout': 4500,
'speed': 'slow',
'go': 'true',
'timeoutname': 'promotimeout'
};
$.fn.promofade = function(options) {
settings.promoid = $(this).attr("id");
return this.each(function() {
$.promofade(this, options);
});
};
$.promofade = function(container, options) {
if ( options ) {
$.extend( settings, options );
}
var elements = $("#" + settings.promoid).children();
var selectors = $("#" + settings.selectorid).children();
if ( elements.length != selectors.length ) { alert("Selector length does not match."); }
if ( settings.go == 'true' )
{
settings.timeoutname = setTimeout(function() {
$.promofade.next(elements, selectors, 1, 0);
}, settings.timeout);
} else {
clearTimeout( settings.timeoutname );
}
};
$.promofade.next = function( elements, selectors, current, last ) {
if ( settings.promoanimation == 'fade' )
{
//$(elements[last]).fadeOut( settings.speed );
//$(elements[current]).fadeIn( settings.speed );
$(elements[last]).hide();
$(elements[current]).show();
} else if ( settings.promoanimation == 'slide' ) {
// This creates a 'slide gap', where they havent crossed yet, causing a blank spot
// TODO: fix!
$(elements[last]).slideUp( settings.speed );
$(elements[current]).slideDown( settings.speed );
}
$(selectors[last]).removeClass("on");
$(selectors[current]).addClass("on");
//$(selectors[current]).attr("class", "on");
// They are both the same length so we only calculate for one
if ( (current + 1) < elements.length ) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
if ( settings.go == 'true' )
{
settings.timeoutname = setTimeout( function() {
$.promofade.next( elements, selectors, current, last );
}, settings.timeout );
} else {
clearTimeout( settings.timeoutname );
}
};
})(jQuery);
My html is built out like so:
<div id="fader">
<img src="#" alt='#'/>
<img src="#" alt='#'/>
<img src="#" alt='#'/>
</div>

You could solve it by specifying a separate first slide timeout that's assigned during initialization, then use the standard timeout on promofade.next.
(function($) {
var settings = {
'promoid': 'promo',
'selectorid': 'promoselector',
'promoanimation': 'fade',
'firstslidetimeout':2000, //apply this during $.promofade only
'timeout': 4500,
'speed': 'slow',
'go': 'true',
'timeoutname': 'promotimeout'
};
$.fn.promofade = function(options) {
settings.promoid = $(this).attr("id");
return this.each(function() {
$.promofade(this, options);
});
};
$.promofade = function(container, options) {
if ( options ) {
$.extend( settings, options );
}
var elements = $("#" + settings.promoid).children();
var selectors = $("#" + settings.selectorid).children();
if ( elements.length != selectors.length ) { alert("Selector length does not match."); }
if ( settings.go == 'true' )
{
settings.timeoutname = setTimeout(function() {
$.promofade.next(elements, selectors, 1, 0);
}, settings.timeout + settings.firstslidetimeout);
} else {
clearTimeout( settings.timeoutname );
}
};
$.promofade.next = function( elements, selectors, current, last ) {
if ( settings.promoanimation == 'fade' )
{
//$(elements[last]).fadeOut( settings.speed );
//$(elements[current]).fadeIn( settings.speed );
$(elements[last]).hide();
$(elements[current]).show();
} else if ( settings.promoanimation == 'slide' ) {
// This creates a 'slide gap', where they havent crossed yet, causing a blank spot
// TODO: fix!
$(elements[last]).slideUp( settings.speed );
$(elements[current]).slideDown( settings.speed );
}
$(selectors[last]).removeClass("on");
$(selectors[current]).addClass("on");
//$(selectors[current]).attr("class", "on");
// They are both the same length so we only calculate for one
if ( (current + 1) < elements.length ) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
if ( settings.go == 'true' )
{
settings.timeoutname = setTimeout( function() {
$.promofade.next( elements, selectors, current, last );
}, settings.timeout);
} else {
clearTimeout( settings.timeoutname );
}
};
})(jQuery);

You might need to make changes in two places to get what you wanted.
(function ($) {
var settings = {
'promoid': 'promo',
'selectorid': 'promoselector',
'promoanimation': 'fade',
'timeout': 4500,
'firstAdditionalTimeout': 4500,
'speed': 'slow',
'go': 'true',
'timeoutname': 'promotimeout'
};
$.fn.promofade = function (options) {
settings.promoid = $(this).attr("id");
return this.each(function () {
$.promofade(this, options);
});
};
$.promofade = function (container, options) {
if (options) {
$.extend(settings, options);
}
var elements = $("#" + settings.promoid).children();
var selectors = $("#" + settings.selectorid).children();
//if (elements.length != selectors.length) {
// alert("Selector length does not match.");
//}
if (settings.go == 'true') {
settings.timeoutname = setTimeout(function () {
$.promofade.next(elements, selectors, 1, 0);
}, settings.timeout + settings.firstAdditionalTimeout); // here
} else {
clearTimeout(settings.timeoutname);
}
};
$.promofade.next = function (elements, selectors, current, last) {
if (settings.promoanimation == 'fade') {
//$(elements[last]).fadeOut( settings.speed );
//$(elements[current]).fadeIn( settings.speed );
$(elements[last]).hide();
$(elements[current]).show();
} else if (settings.promoanimation == 'slide') {
// This creates a 'slide gap', where they havent crossed yet, causing a blank spot
// TODO: fix!
$(elements[last]).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
}
//$(selectors[last]).removeClass("on");
//$(selectors[current]).addClass("on");
//$(selectors[current]).attr("class", "on");
// They are both the same length so we only calculate for one
if ((current + 1) < elements.length) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
if (settings.go == 'true') {
settings.timeoutname = setTimeout(function () {
$.promofade.next(elements, selectors, current, last);
}, current == 1 ? (settings.timeout + settings.firstAdditionalTimeout) : settings.timeout); // and here
} else {
clearTimeout(settings.timeoutname);
}
};
})(jQuery);
DEMO

Hide go to top button when page is fully scrolled to the top

I have a button on my wordpress theme homepage that is used for going to the top of the page. I want to hide it when page is fully scrolled to the top. Here is my code:
(function($) {
var version = '#VERSION',
defaults = {
exclude: [],
excludeWithin:[],
offset: 0,
direction: 'top', // one of 'top' or 'left'
scrollElement: null, // jQuery set of elements you wish to scroll (for $.smoothScroll).
// if null (default), $('html, body').firstScrollable() is used.
scrollTarget: null, // only use if you want to override default behavior
beforeScroll: function() {}, // fn(opts) function to be called before scrolling occurs. "this" is the element(s) being scrolled
afterScroll: function() {}, // fn(opts) function to be called after scrolling occurs. "this" is the triggering element
easing: 'swing',
speed: 600,
autoCoefficent: 2 // coefficient for "auto" speed
},
getScrollable = function(opts) {
var scrollable = [],
scrolled = false,
dir = opts.dir && opts.dir == 'left' ? 'scrollLeft' : 'scrollTop';
this.each(function() {
if (this == document || this == window) { return; }
var el = $(this);
if ( el[dir]() > 0 ) {
scrollable.push(this);
} else {
// if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
el[dir](1);
scrolled = el[dir]() > 0;
if ( scrolled ) {
scrollable.push(this);
}
// then put it back, of course
el[dir](0);
}
});
// If no scrollable elements, fall back to <body>,
// if it's in the jQuery collection
// (doing this because Safari sets scrollTop async,
// so can't set it to 1 and immediately get the value.)
if (!scrollable.length) {
this.each(function(index) {
if (this.nodeName === 'BODY') {
scrollable = [this];
}
});
}
// Use the first scrollable element if we're calling firstScrollable()
if ( opts.el === 'first' && scrollable.length > 1 ) {
scrollable = [ scrollable[0] ];
}
return scrollable;
},
isTouch = 'ontouchend' in document;
$.fn.extend({
scrollable: function(dir) {
var scrl = getScrollable.call(this, {dir: dir});
return this.pushStack(scrl);
},
firstScrollable: function(dir) {
var scrl = getScrollable.call(this, {el: 'first', dir: dir});
return this.pushStack(scrl);
},
smoothScroll: function(options) {
options = options || {};
var opts = $.extend({}, $.fn.smoothScroll.defaults, options),
locationPath = $.smoothScroll.filterPath(location.pathname);
this
.unbind('click.smoothscroll')
.bind('click.smoothscroll', function(event) {
var link = this,
$link = $(this),
exclude = opts.exclude,
excludeWithin = opts.excludeWithin,
elCounter = 0, ewlCounter = 0,
include = true,
clickOpts = {},
hostMatch = ((location.hostname === link.hostname) || !link.hostname),
pathMatch = opts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) || locationPath ) === locationPath,
thisHash = escapeSelector(link.hash);
if ( !opts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) {
include = false;
} else {
while (include && elCounter < exclude.length) {
if ($link.is(escapeSelector(exclude[elCounter++]))) {
include = false;
}
}
while ( include && ewlCounter < excludeWithin.length ) {
if ($link.closest(excludeWithin[ewlCounter++]).length) {
include = false;
}
}
}
if ( include ) {
event.preventDefault();
$.extend( clickOpts, opts, {
scrollTarget: opts.scrollTarget || thisHash,
link: link
});
$.smoothScroll( clickOpts );
}
});
return this;
}
});
$.smoothScroll = function(options, px) {
var opts, $scroller, scrollTargetOffset, speed,
scrollerOffset = 0,
offPos = 'offset',
scrollDir = 'scrollTop',
aniProps = {},
aniOpts = {},
scrollprops = [];
if ( typeof options === 'number') {
opts = $.fn.smoothScroll.defaults;
scrollTargetOffset = options;
} else {
opts = $.extend({}, $.fn.smoothScroll.defaults, options || {});
if (opts.scrollElement) {
offPos = 'position';
if (opts.scrollElement.css('position') == 'static') {
opts.scrollElement.css('position', 'relative');
}
}
scrollTargetOffset = px ||
( $(opts.scrollTarget)[offPos]() &&
$(opts.scrollTarget)[offPos]()[opts.direction] ) ||
0;
}
opts = $.extend({link: null}, opts);
scrollDir = opts.direction == 'left' ? 'scrollLeft' : scrollDir;
if ( opts.scrollElement ) {
$scroller = opts.scrollElement;
scrollerOffset = $scroller[scrollDir]();
} else {
$scroller = $('html, body').firstScrollable();
}
aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
opts.beforeScroll.call($scroller, opts);
speed = opts.speed;
// automatically calculate the speed of the scroll based on distance / coefficient
if (speed === 'auto') {
// if aniProps[scrollDir] == 0 then we'll use scrollTop() value instead
speed = aniProps[scrollDir] || $scroller.scrollTop();
// divide the speed by the coefficient
speed = speed / opts.autoCoefficent;
}
aniOpts = {
duration: speed,
easing: opts.easing,
complete: function() {
opts.afterScroll.call(opts.link, opts);
}
};
if (opts.step) {
aniOpts.step = opts.step;
}
if ($scroller.length) {
$scroller.stop().animate(aniProps, aniOpts);
} else {
opts.afterScroll.call(opts.link, opts);
}
};
$.smoothScroll.version = version;
$.smoothScroll.filterPath = function(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
};
// default options
$.fn.smoothScroll.defaults = defaults;
function escapeSelector (str) {
return str.replace(/(:|\.)/g,'\\$1');
}
})(jQuery);
your help will be highly appreciated.

I'm guessing this is based on user events so something like this to cover mousescroll and scroll
$(window).bind( "mousewheel DOMMouseScroll scroll", function(e){
if (document.body.scrollTop == 0) {
// do this
}
})