We Keep Coding

How to change this script to autoscroll?

I have a script which has a button to scroll the site but I need it to scroll automatically on page load. I need the script to scroll exactly like shown below, except the button. Could anyone change it for me? I'm new to javascript, thanks..
function scroll(element, speed) {
var distance = element.height();
var duration = distance / speed;
element.animate({scrollTop: distance}, duration, 'linear');
}
$(document).ready(function() {
$("button").click(function() {
scroll($("html, body"), 0.015); // Set as required
});
});

Call the scroll function in on window load, this will scroll the page on load finished.
$(window).on('load', function(){
scroll($("html, body"), 0.015); // Set as required
})

You can try the below JavaScript code
var div = $('.autoscroller');
$('.autoscroller').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {
}
if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) {
clearInterval(autoscroller);
}
if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) {
clearInterval(autoscroller);
}
});
var autoscroller = setInterval(function(){
var pos = div.scrollTop();
if ((div.scrollTop() + div.innerHeight()) >= div[0].scrollHeight) {
clearInterval(autoscroller);
}
div.scrollTop(pos + 1);
}, 50);
here on the load of the page. The text are auto-scrolled upto the end of the page.

Detect touch scroll up or down

I need code same this for touch devices . help me please
$(window).on('DOMMouseScroll mousewheel', function (e) {
if (ScrollEnable) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
console.log('Down');
} else {
console.log('Up');
}
}
return false;
});
and here is my touch code, But consul just take up i need find down for my website ! what can i do :|
$('body').on({
'touchmove': function(e) {
if (e.originalEvent.touches > 0 || e.originalEvent.touches > 0) {
console.log('Down');
} else {
console.log('Up');
}
}
});

var updated=0,st;
$('body').on({
'touchmove': function(e) {
st = $(this).scrollTop();
if(st > updated) {
console.log('down');
}
else {
console.log('up');
}
updated = st;
}
});

You can use scroll event
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});

I know my solution is a bit more generic - it is not dependend on any element, but it might help someone that has encountered the same problem as me.
var touchPos;
// store the touching position at the start of each touch
document.body.ontouchstart = function(e){
touchPos = e.changedTouches[0].clientY;
}
// detect wether the "old" touchPos is
// greater or smaller than the newTouchPos
document.body.ontouchmove = function(e){
let newTouchPos = e.changedTouches[0].clientY;
if(newTouchPos > touchPos) {
console.log("finger moving down");
}
if(newTouchPos < touchPos) {
console.log("finger moving up");
}
}

The only way that I could (and tested) detect scroll down/up on mobile devices (android & ios, touch devices):
(other events such as scroll, mousewheel, DOMMouseScroll, nmousewheel and wheel do not work on mobile devices)
jQuery:
let touchStartPosX = 0;
// Detect Scroll Down and Up in mobile(android|ios)
$(window).on('touchmove', (e) => {
// Different devices give different values with different decimal percentages.
const currentPageX = Math.round(e.originalEvent.touches[0].screenY);
if (touchStartPosX === currentPageX) return;
if (touchStartPosX - currentPageX > 0) {
console.log("down");
} else {
console.log("up");
}
touchStartPosX = currentPageX;
});
Vanilla:
let touchStartPosX = 0;
window.addEventListener('touchmove', (e) => {
// Different devices give different values with different decimal percentages.
const currentPageX = Math.round(e.changedTouches[0].screenY);
if (touchStartPosX === currentPageX) return;
if (touchStartPosX - currentPageX > 0) {
console.log("down");
} else {
console.log("up");
}
touchStartPosX = currentPageX;
});

This w3schools.com documentation would help you out http://www.w3schools.com/jquerymobile/jquerymobile_events_scroll.asp
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});

How do I hover on Browser's cancel button?

I am trying to populate a splash screen on my website and it is populating if scroll pos is between 1-120, using following JS code.
Please suggest what should be done if I want to execute this on hover browser's and tab's cancel button?
How to read that, cause $(window).scrollTop(); won't return anything if it is less that 0.
function setHeightToEmergencyContainer () {
var getWindowHeight = $(window).height();
var setHeight = (getWindowHeight - 123)/2;
}
setHeightToEmergencyContainer();
$(window).resize(function() {
setHeightToEmergencyContainer();
});
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window,"load",function(e) {
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
// stop your drag event here
// for now we can just use an alert
setHeightToEmergencyContainer();
var scroll = $(window).scrollTop();
console.log("scroll pos :: "+scroll);
if(scroll > 0 && scroll <= 120){
console.log("show popup "+scroll);
$(".tso_pop-container").css({"width":"1366px","height":"700px","overflow":"auto","right":"-296px","top":"106px"});
}
//$.cookie("dontShowUrgencyContainer","yes");
}
});
addEvent(document, "mouseover", function() {
$(".tso_pop-container").css({"width":"0px","height":"0px","overflow":"hidden","right":"50%","top":"50%"});
});
});
//}
window.onblur = function(event) {
$(".tso_pop-container").css({"width":"0px","height":"0px","overflow":"hidden","right":"50%","top":"50%"});
}

first to get scrolled position of document use :
$('body').scrollTop() // webkit
$('html').scrollTop() // moz
for browser hover use :
$(window).mouseenter(function(){
var stop = $('html').scrollTop() == 0 ? $('body').scrollTop() : $('html').scrollTop()
if(stop <= 120){
// your code
}
});
hope this helps you.

How to get a MouseWheel Event to fire only once in jQuery?

So I want to fire a function only once every time a user scrolls up or down via the Mousewheel. See: jsFiddle Demo. The issue is that even though I have the e.preventDefault(), the function still fires multiple times.
The goal is for the function to fire only once whenever a user scrolls up or down. Similar to this site.
Here is the code that I have so far:
var sq = {};
sq = document;
if (sq.addEventListener) {
sq.addEventListener("mousewheel", MouseWheelHandler(), false);
sq.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
sq.attachEvent("onmousewheel", MouseWheelHandler());
}
function MouseWheelHandler() {
return function (e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta < 0) {
/* Scroll Down */
e.preventDefault();
console.log("Down. I want this to happen only once");
} else {
/* Scroll Up */
console.log("up. I want this to happen only once");
e.preventDefault();
}
return false;
}
return false;
}

This has helped me:
var isMoving=false;
$(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll", function(event, delta) {
event.preventDefault();
if (isMoving) return;
navigateTo();
});
function navigateTo(){
isMoving = true;
setTimeout(function() {
isMoving=false;
},2000);
}
Basically you have a isMoving variable that is set depending on if your animation or whatever you do is in progress. Even though user scrolls multiple times with mousewheel in one "flick", the function fires only once.

​$(document).ready(function(){
var up=false;
var down=false;
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0 && up=false) {
up=true;
down=false;
$(this).text('scrolling up !');
}
elseif(e.originalEvent.wheelDelta /120 > 0 && down=false){
down=true;
up=false;
$(this).text('scrolling down !');
}
});
});
And here is a plug in you can use it

Autoscroll was but now isn't working

I was working on a project that, when you click the page, it scrolls the entire length of the page. But it does this at 20px intervals; this is to allow javascript to be executed while scrolling in iOS.
However, when uploading the final version, my ftp client has deleted some of the code and it's now not working. I can't see why.
Any suggestions?
var t;
var scrolling = false;
// doScroll sets the position in which to auto pause.
function doScroll() {
$('body').scrollTop($('body').scrollTop() + 20);
if($("#pause").offset().top >=300 && $("#pause").offset().top < 304){
ScrollIt();
} else
if($("#pause").offset().top >=4000 && $("#pause").offset().top < 4004){
ScrollIt() ;
} else
if($("#pause").offset().top >=7500 && $("#pause").offset().top < 7504){
ScrollIt() ;
}
}
// ScrollIt removes the interval for scrolling, pausing the scroll.
function ScrollIt() {
clearInterval(t);
scrolling = false;
return;
// playPause()
}
//Stop/start on click
$('#pause').on('click',function(){
ScrollIt();
scrolling = !scrolling;
if(!scrolling){
clearInterval(t);
return;
}
t = setInterval(doScroll, 5);
});

I create jsfiddle page for you.
http://jsfiddle.net/u32Nw/2/
I can see that it is working, but scrolling is not stopping.
var t;
var scrolling = false;
// doScroll sets the position in which to auto pause.
function doScroll() {
var $body = $("body"),
$pause = $("#pause");
$body.scrollTop($body.scrollTop() + 20);
var pauseTop = $pause.offset().top;
if (pauseTop >= 300 && pauseTop < 304 || pauseTop >= 4000 && pauseTop < 4004 || pauseTop >= 7500 && pauseTop < 7504) {
clearScrollInterval();
}
}
// scrollIt removes the interval for scrolling, pausing the scroll.
function clearScrollInterval() {
clearInterval(t);
scrolling = false;
return;
// playPause()
}
//Stop/start on click
$("#pause").on("click", function () {
clearScrollInterval();
scrolling = !scrolling;
t = setInterval(doScroll, 5);
});
This is exact same code, just refactored.
Try working from here. You need to refactor your code for debugging.