Develop Reference

How To add automatic scrolling in slider

I want to add automatic scrolling time to my slider code but unable to do it can you please suggest me something to help me out with the code to make this slider slide automatic with a set interval of time.
'use strict';
$(document).ready(function () {
var $slides = $('.con__slide').length,
topAnimSpd = 650,
textAnimSpd = 1000,
nextSlideSpd = topAnimSpd + textAnimSpd,
animating = true,
animTime = 4000,
curSlide = 1,
nextSlide,
scrolledUp;
setTimeout(function () {
animating = false;
}, 2300);
//navigation up function
function navigateUp() {
if (curSlide > 1) {
scrolledUp = true;
pagination(curSlide);
curSlide--;
}
}
//navigation down function
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}
}
$(window).on('load', function () {
$('.con__slide--1').addClass('active');
});
//pagination function
function pagination(slide, target) {
animating = true;
// Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down.
if (target === undefined) {
nextSlide = scrolledUp ? slide - 1 : slide + 1;
} else {
nextSlide = target;
}
////////// Slides //////////
$('.con__slide--' + slide).removeClass('active');
setTimeout(function () {
$('.con__slide--' + nextSlide).addClass('active');
}, nextSlideSpd);
////////// Nav //////////
$('.con__nav-item--' + slide).removeClass('nav-active');
$('.con__nav-item--' + nextSlide).addClass('nav-active');
setTimeout(function () {
animating = false;
}, animTime);
}
// Mouse wheel trigger
$(document).on('mousewheel DOMMouseScroll', function (e) {
var delta = e.originalEvent.wheelDelta;
if (animating) return;
// Mouse Up
if (delta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
// Direct trigger
$(document).on("click", ".con__nav-item:not(.nav-active)", function () {
// Essential to convert target to a number with +, so curSlide would be a number
var target = +$(this).attr('data-target');
if (animating) return;
pagination(curSlide, target);
curSlide = target;
});
// Arrow trigger
$(document).on('click', '.con__nav-scroll', function () {
var target = $(this).attr('data-target');
if (animating) return;
if (target === 'up') {
navigateUp();
} else {
navigateDown();
}
});
// Key trigger
$(document).on("keydown", function (e) {
if (animating) return;
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
});
var topLink = $(".con__slide--4-top-h-link"),
botLink = $(".con__slide--4-bot-h-link");
$(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({
mouseenter: function mouseenter() {
topLink.css('text-decoration', 'underline');
botLink.css('text-decoration', 'underline');
},
mouseleave: function mouseleave() {
topLink.css('text-decoration', 'none');
botLink.css('text-decoration', 'none');
}
});
});
Hope you understand the above code if you have any query in it feel free to ask me and please help me out as soon as possible.

Added setInterval in your code.
setInterval(() => {
if (curSlide >= $slides){
if (animating) return;
pagination(4, 1);
curSlide = 1;
}
else
navigateDown();
}, 10000);
Check updated fiddle.

update below navigateDown code.
//navigation down function
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}else{
curSlide=1;
pagination(4,1)
}
}
Add this below line
setInterval(navigateDown,7000);

Want JavaScript script to run when the Div is in the viewport

I want to run a JS script when a particular div comes into the viewport/is visible.
The div will always be visible, but when the user scrolls it in to view.
I have created a JSFiddle with the example:
Example http://jsfiddle.net/sv8boe9u/21/
JS
consoleText(['HELLO,', 'HERE IS A BIT ABOUT ME,', 'ENJOY!'], 'text', ['#333', '#333', '#333']);
function consoleText(words, id, colors) {
"use strict";
if (colors === undefined) {
colors = ['#fff'];
}
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id);
target.setAttribute('style', 'color:' + colors[0]);
window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount);
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + colors[0]);
letterCount += x;
waiting = false;
}, 1000);
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000);
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount);
letterCount += x;
}
}, 120);
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden';
visible = false;
} else {
con.className = 'console-underscore';
visible = true;
}
}, 400);
}
To clarify, I want it to start at 'Hello' when it is actually in viewport. Any ideas?
Thanks.

Using the jQuery scroll() and scrollTop() functions you can specify a height in px that triggers another function when reached such as:
$(window).scroll(function () {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
doSomething(); // call this function
}
});
jQuery Scroll and Scroll Top

you can use the scroll function ..like create a function that runs until wen you reach that element u are targeting.. then call the alert('hello');
window.addEventListener('scroll', (e) => {
console.log(window.scrollY)
if (window.scrollY == 705) {
alert('got ya')
// do your stuff here boss
}
})
you should make sure to find that scroll position wen yo element comes into view and then put it wr 705 is.. hope this helps ya

trying to make a timer stop when the user reaches the bottom of the page using jQuery

I have a timer that starts counting up when the page is loaded. I want it to stop when the user scrolls to the bottom of the page. Here is the jQuery I've written:
function timerTick(time, stop)
{
if(stop == false)
{
setInterval(function ()
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}, 100);
}
else //behavior is the same if i remove the else block
{
return;
}
}
$(document).ready(function () {
var time = 0;
var stop = false;
timerTick(time, stop);
//check if we're at the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
stop = true;
}
});
});
The timer counts up perfectly, the problem is I can't get it to stop. If I replace the stop = true; line with alert('abc');, the alert shows up when the user reaches the bottom. So all of the pieces are working, just for some reason setting stop to true doesn't stop the timerTick function from going into the if(stop == false) block.
Can someone tell me what I'm doing wrong?
Edit: I made a jsFiddle.

You have to clear interval as soos as user reach the end of page. Otherwise it will continue executing.
Try:
var intervalId;
function timerTick(time, stop)
{
if(stop == false)
{
intervalId=setInterval(function () //Set the interval in a var
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}, 100);
}
else //behavior is the same if i remove the else block
{
return;
}
}
$(document).ready(function () {
var time = 0;
var stop = false;
timerTick(time, stop);
//check if we're at the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
stop = true;
clearInterval(intervalId);//HERE clear the interval
}
});
});
DEMO

to determine bottom of the page you could try this
if(window.innerHeight + document.body.scrollTop >= document.body.offsetHeight) {
stop = true;
}
Update:
you need to make your variable stop global, declare it outside of documnet.ready function.

setInterval function returns number that you can later pass into clearInterval to stop the timer.

Declare
var Timeout=0;
check
if(stop == false)
inside the setInterval function
like
Timeout=setInterval(function ()
{
if(stop == false)
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}
else
{
clearInterval(Timeout);
}
}, 100);

Mouswheel with one page navi - scroll only at the end of section

I had onepageNav script to scrollTo pages. Pages it's not full height of window than i had problem with addition mousewhell.
I had code:
$('body').mousewheel(function(event, delta) {
if (flag) { return false; }
$current = $('section.current');
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
flag = true;
$('body').scrollTo($prev, 1000, {
onAfter : function(){
flag = false;
}
});
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
flag = true;
$('body').scrollTo($next, 1000, {
onAfter : function(){
flag = false;
}
});
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
It's script for mousewheel. It's work but not exacly what i want.
If i had section #2 bigger than window than it's go automaticaly after scroll to next section.
I i had section #3 last, bigget than windows and i scroll down than scrolling stop working.
Someone had idea how to resolve that?

If I understand you correctly you can use the following code:
HTML:
<section id='s1'></section>
<section id='s2'></section>
<section id='s3'></section>
<section id='s4'></section>
JS:
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
};
var current = $('section').first();
current.addClass('current');
var flag;
$(window).scroll(function(event, delta) {
if (flag) { return false; }
var $body = $('body'),
$window = $(window),
newScroll = $body.scrollTop();
if (!elementInViewport2(current[0])) {
current.removeClass('current');
current[0] = null;
}
var newSection = $('section:not(.current)').filter(function(i, el) {
return elementInViewport2(el);
}).first();
if (newSection[0] && current[0] != newSection[0]) {
current.removeClass('current');
current = newSection;
newSection.addClass('current');
flag = true;
$body.animate({scrollTop: newSection.offset().top}, function() {
flag = false;
});
event.preventDefault();
}
});
Demo

Finding the direction of scroll using setTimeout

on a onscroll command I have a function which checks the scroll position and then waits 200ms and then checks it again, even tho' I have put the if function to stop it repeating the function the alert tells me that the xy[1] and ye are the same.
function dothescroll() {
if (scrolling == false) {
scrolling = true;
var xy = getScrollXY();
var ye = xy[1];
setTimeout(function(){
alert(xy[1] + " + " + ye);
if (xy[1] > ye) {
scrollup();
} else {
scrolldown();
}
},200);
}
}
Any ideas??
Thankss.x

You need to call getScrollXY() again to get the new coordinates:
setTimeout(function(){
xy = getScrollXY();
alert(xy[1] + " + " + ye);
if (xy[1] > ye) {
scrollup();
} else {
scrolldown();
}
},200);