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);

How to make jquery script work after Ajax dom append?

Ye, i know about "on" method and most of answers here about "on" are not specific. Can someone help me with this code?
$(function(){
var pagePositon = 0,
sectionsSeclector = 'article#sector',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$(document).keypress(function(e) {
if (e.which == 100 && pagePositon+1 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
}
if (e.which == 97 && pagePositon-1 >= 0) {
pagePositon--;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
When you press "d" or "a" it goes to next or prev with id="sector" and that's fine. But occasionally, after Ajax Call and after append of new articles, script can't move to them. I know that they are not binded (after dom refresh) and how to make that script work after Ajax dom change?

Solved:
$(function(){
var pagePositon = 0,
sectionsSeclector = 'article#sector',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
// Bind to scroll
//Move on click:
$(document).on('keypress', function(e) {
$scrollItems = $(sectionsSeclector);
pageMaxPosition = $scrollItems.length - 1;
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
$(window).bind('scroll',upPos);
if (e.which == 100 && pagePositon+1 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
}
if (e.which == 97 && pagePositon-1 >= 0) {
pagePositon--;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});

Prevent page scrolling while scrolling a div element

I have already found the solution in the accepted answer here:
How to prevent page scrolling when scrolling a DIV element?
But want also to disable scrolling the main page on keys (when div content can't be scrollable anymore).
I'm trying to make something like this but it's not working:
$( '.div-scroll' ).bind( 'keydown mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
e.preventDefault();
});
Any ideas why?

You can stop the scrolling of the whole page by doing:
Method 1
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
but it makes the browser's scrollbar disappear whenever you hover over the div.
Method 2
Else you can look at jquery-mousewheel.
var toolbox = $('#toolbox'),
height = toolbox.height(),
scrollHeight = toolbox.get(0).scrollHeight;
toolbox.off("mousewheel").on("mousewheel", function (event) {
var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
return !blockScrolling;
});
DEMO
Method 3
To stop the propagation with no plugins.
HTML
<div class="Scrollable">
<!-- A bunch of HTML here which will create scrolling -->
</div>
JS
$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
Method 4
you can do it by canceling these interaction events:
Mouse & Touch scroll and Buttons associated with scrolling.
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}

You need to bind document to 'keydown' event like this:
$( document ).bind( 'keydown', function (e) { ... e.preventDefault(); }

This code block the scrolling by using keys:
$(document).keydown(function(e) {
if (e.keyCode === 32 || e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {
return false;
}
});

JS : Event on ScrollDown and ScrollUp

I currently have a animated sprite that walks when you press the left and right keys on the keyboard. What I would like to do is to make the sprite walk-right when you scroll down and walk left when you scroll up. I would also like to make the sprite stop walking when the user stops scrolling. Thanks in advance!
I tried using the $(window).scroll function with variables of current and lastscroll positions, but it didn't work.
function walk(e) {
var keyCode = e.keyCode;
if (keyCode === 39) {
key.right = true;
} else if (keyCode === 37) {
key.left = true;
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}
function stop(e) {
var keyCode = e.keyCode;
if (keyCode === 39) {
key.right = false;
} else if (keyCode === 37) {
key.left = false;
}
if (key.right === false) {
sprite.classList.remove('walk-right');
} if (key.left === false) {
sprite.classList.remove('walk-left');
}
}

Update:
Here's a better version; I merged the keyboard and scroll code into the same event for you:
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", walk, false);
// Firefox
document.addEventListener("DOMMouseScroll", walk, false);
}else{
// IE 6/7/8
document.attachEvent("onmousewheel", walk);
}
function walk(e) {
var e = window.event || e; // old IE support
if (e.keyCode) {
//keyboard input
if (e.keyCode === 39) {
key.right = true;
} else if (keyCode === 37) {
key.left = true;
}
}else{
//scroll input
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta == 1) {
//walk right
key.right = true;
key.left = false;
}else if (delta == -1) {
//walk left
key.left = true;
key.right = false;
}else{
//stop
key.left = false;
key.right = false;
sprite.classList.remove('walk-right');
sprite.classList.remove('walk-left');
}
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}
Previous answer:
Here you go:
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", scroll, false);
// Firefox
document.addEventListener("DOMMouseScroll", scroll, false);
}else{
// IE 6/7/8
document.attachEvent("onmousewheel", scroll);
}
function scroll(e) {
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta == 1) {
//walk right
key.right = true;
key.left = false;
}else if (delta == -1) {
//walk left
key.left = true;
key.right = false;
}else{
//stop
key.left = false;
key.right = false;
sprite.classList.remove('walk-right');
sprite.classList.remove('walk-left');
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}

Use document.addEventListener instead:
var currentY = 0;
document.addEventListener('scroll', function(e){
// some logic
key.right = false;
key.left = false;
currentY < window.pageYOffset ? key.right = true : key.left = true;
currentY = window.pageYOffset;
})

Fullcalendar mousewheel event prev next

i'm trying to do a simple think in Fullcalendar ( 1.6.2 ) and is to simulate the prev and next button throught the mouse wheel up and down, similar to google calendar.
Here is the code i'm using, this code is from another question in here i think, but i can´t remember wich one :S
calendar.bind('mousewheel', function(event, delta) {
var view = calendar.fullCalendar('getView');
//alert(view.name); //Can retrieve the view name successfully
//alert(delta); // Undefined
//alert(event); // [Object object]
if (view.name == "month") {
if (delta > 0) {
alert(delta);
calendar.fullCalendar('prev');
}
if (delta < 0) {
alert(delta);
calendar.fullCalendar('next');
}
return false;
}
});
The problem is delta is Undefined
Anyone have a clue what i'm doing wrong? I'm very new to Jquery or Javascript
EDIT
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [37, 38, 39, 40];
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function keydown(e)
{
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll()
{
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
}
function enable_scroll()
{
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
calendar.bind(mousewheelevt, function(e)
{
var evt=window.event || e;
var delta=evt.detail ? evt.detail*(-120) : evt.wheelDelta;
if(delta > 0){
calendar.fullCalendar('next');
}
if(delta < 0){
calendar.fullCalendar('prev');
}
});
calendar.bind("mouseleave", function()
{
enable_scroll();
});
calendar.bind("mouseenter", function()
{
disable_scroll();
});
Most of this code was copied from the net i have just adapt it to my problem.
This works in Chrome ( latest version ) and I.E ( lastest version )
Doesn´t work in Firefox ( lastest version )
Didn´t check in old versions of any of them.
Can anyone see the problem of not working in FF?

I think i got it, its a bit hacky but it does the trick!!! Any constructive critics are welcome. This is now working in IE, Firefox, Chrome recent versions.
//This checks the browser in use and populates da var accordingly with the browser
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
//Prevents the scroll event for the windows so you cant scroll the window
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
//I think this could be eliminated but in the examples i found used it
function wheel(e) {
preventDefault(e);
}
//adds the scroll event to the window
function disable_scroll(){
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, wheel);
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, wheel, false);
}
//removes the scroll event to the window
function enable_scroll()
{
if (document.removeEvent) //if IE (and Opera depending on user setting)
document.removeEvent("on"+mousewheelevt, wheel);
else if (document.removeEventListener) //WC3 browsers
document.removeEventListener(mousewheelevt, wheel, false);
}
//binds the scroll event to the calendar's DIV you have made
calendar.bind(mousewheelevt, function(e){
var evt = window.event || e; //window.event para Chrome e IE || 'e' para FF
var delta;
delta = evt.detail ? evt.detail*(-120) : evt.wheelDelta;
if(mousewheelevt === "DOMMouseScroll"){
delta = evt.originalEvent.detail ? evt.originalEvent.detail*(-120) : evt.wheelDelta;
}
if(delta > 0){
calendar.fullCalendar('next');
}
if(delta < 0){
calendar.fullCalendar('prev');
}
});
//hover event to disable or enable the window scroll
calendar.hover(
function(){
enable_scroll();
console.log("mouseEnter");
},
function(){
disable_scroll();
console.log("mouseLeave");
}
);
//binds to the calendar's div the mouseleave event
calendar.bind("mouseleave", function()
{
enable_scroll();
});
//binds to the calendar's div the mouseenter event
calendar.bind("mouseenter", function()
{
disable_scroll();
});