Vertical sliders scroll - javascript

I have a problem with a code which I've copied from http://jsfiddle.net/NGj7F/ I placed this code in my HTML file between and I have put every section between
//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
}
});
It works as I want on my website with the exception that every time I arrive at the last section and scroll down again, after that it doesn't work anymore. The same happens when I try to scroll from the first section up. Why does it stop working? Please help!!! And can someone help me to introduce also the up and down arrows to this function? Thanks!!!!!

Related

Start the counter when the div scrolls into the view

So, I have the counter, that goes from 0 to the certain number.
The div that includes the counter is far below on the page - when the user gets there, the counter will most likely have already reached the maximum number and stopped.
How do I trigger the function when the counter div scrolls into the view?
There's a jQuery script that performs actions when an element is in the viewport called jQuery inview. Link it to your HTML file then use the following to bind an event when the div is inview.
function increment() {
$('div').one('inview', function (event, visible) { //one animates it once
if (visible == true) {
// element is now visible in the viewport
var interval = setInterval(function () {
$('#number').text(number);
if (number >= target){
clearInterval(interval);
}
number++;
}, 50);
} else {
// element has gone out of viewport
}
});
}
$(window).on("load", increment);

disable mousewheel plugin over div

I'm using the mousewheel plugin that's shown here:
https://github.com/jquery/jquery-mousewheel
And it works well for getting the page to scroll horizontally, but I want to temporarily disable that and revert to vertical scrolling when a couple specific divs pop up. I tried this:
jQuery(document).ready(function() {
jQuery('html, div.everthing').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 1);
e.preventDefault();
});
jQuery(".interests.content .child").mouseover(
function stopHorizScroll(){
var vScroll = [
jQuery(".child.books").attr("class"),
jQuery(".child.quotes").attr("class"),
jQuery(".child.humans").attr("class"),
jQuery(".child.travel").attr("class")
];
var x = "show"
if (vScroll[0].indexOf(x) !== -1) {
jQuery('html, div.everthing').mousewheel(function(e, delta) {
return false;
});
}
});
});
You've already bound the mousewheel event. return false does nothing to the event you previously bound. To do what you're trying to do, you'd need to unbind the original event, then rebind on mouseleave, or stop the propagation. I'm not sure if you can unbind/destroy the mousewheel event, and I'm not sure if e.stopPropagation() would work either.
Perhaps an easier solution would be to set a flag when someone hovers over that div, and prevent the horizontal scroll if the flag is set. For example, something like this might work:
var stopScroll = false;
jQuery('html, div.everthing').mousewheel(function(e, delta) {
if ( stopScroll ) return;
this.scrollLeft -= (delta * 1);
e.preventDefault();
});
jQuery(".interests.content .child").hover(function() {
stopScroll = true;
}, function() {
stopScroll = false;
});

Navbar fade In when back to top

I was trying this jQuery example
(function ($) {
$(document).ready(function(){
// hide .navbar first
// $(".masthead").hide();
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop === 0){
$('.masthead').fadeIn();
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
It shows the menu/navbar when I run the page and disapears when I start scrolling and after 700 pixels navbar is displayed again with black background, I expected it to fade in again after I come back to the top.
if($(this).scrollTop === 0){
$('.masthead').fadeIn();
}
But it have not worked. How do scrollTop() work then? I have also tried to set scrollTop < 10, but with no success. How do I make it work when I'm back at 10 pixels or zero?
You're comparing the function body to 0, not the actual results of the function (the scroll value), so this:
if($(this).scrollTop === 0){
$('.masthead').fadeIn();
}
should become this:
if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
}
TL;DR
It's scrollTop vs. scrollTop().

How to prevent duplicate events when scroll in jQuery?

I have 4 divs like;
<div class="diva">diva</div>
<div class="divb">divb</div>
<div class="divc">divc</div>
<div class="divd">divd</div>
They are 400px wide and high. I want to alert a when div b scrolls to top of page, and did using scroll function and scrollTop method. Each time when scroll, it check if scrollTop() if lager than 400, and alert a. But if I don't click the on the ok button of alert window, if I continue scrolling, multiple alerts will come, and I have to close them all.
But I just want one alert, and even if I continue scrolling, I want no more alerts. Also if the scrollTop is below 400px, I want to alert b (here also, I don't want repeats). If I got alert a, and if I scroll in opposite direction, and if scrollTop becomes below 400px, I want alert b, no problem for that.
Here is the fiddle.
please add this script on your file JS and try this script:
$(document).ready(function() {
$(window).scroll(function(){
var xx = $(document).scrollTop();
if(xx > jQuery(".divb").height()){
alert("a");
}else{
alert("b");
}
});
});
You are popping alerts on a 'scroll' event which happens every time you scroll..
if this is just a debugging annoyance, what you can do is use console.log('a') instead - example
If you wanted the actual function to run once for each time you reach it you can do this:
var a = false;
$(window).scroll(function(){
var xx = $(document).scrollTop();
if(xx > 400){
if (!a) {
alert("a");
a = true;
}
}else{
if (a) {
alert("b");
a = false;
}
}
});
fiddle for this example
The easiest way to avoid any confusion would be to keep state of scroll actions.
Demo: http://jsfiddle.net/abhitalks/uwUvC/1/
var last = 0, // last scroll-top to determine scroll direction
scrolledUp = false, // to cache state of scroll up
scrolledDown = false; // to cache state of scroll down
$(window).scroll(function (event) {
var current = $(this).scrollTop();
if (current > last) { // if scrolled down
if (current > 400 && !scrolledDown) { // check position and state
alert("A");
scrolledDown = true; // reset scroll down state
}
} else { // if scrolled up
if (current < 400 && scrolledDown && !scrolledUp) {
alert("B");
scrolledUp = true; // reset scroll up state
}
}
last = current; // keep current position to check direction
});
This way you are sure about when you are scrolling up and when you are scrolling down. Keep state of scroll in respective variables and check them.
The alerts fire only once in each direction.

How to detect user mouse wheel scroll distance?

I am trying to detect user scroll, if to left and to right then trigger and do something.
But if user use trackpad scroll to top or to bottom then it will accidentally scroll to left or to right.
I think, may be not just check timer define per scroll also need to check if user scroll distance smaller than 20, we can differentiate that as accidentally and don't do anything.
I can't find the way check if user scroll distance, the element is not be scrollable so can't use scrollTop scrollLeft....
Any idea?
var scroll_timer;
$('img').bind('mousewheel', function(e) {
if (e.originalEvent.wheelDeltaX < 0) {
clearTimeout(scroll_timer);
scroll_timer = setTimeout(function() {
// .. do something
// console.log('right');
}, 200);
} else if (e.originalEvent.wheelDeltaX > 0) {
clearTimeout(scroll_timer);
scroll_timer = setTimeout(function() {
// .. do something
// console.log('left');
}, 200);
}
});
Here is my JSFiddle
It looks like you can use e.originalEvent.wheelDeltaX to get scroll distance values. You could then use e.originalEvent.wheelDeltaY to see if the user is scrolling vertically more than horizontally and trigger stuff after that is true.
Here's a demo that works by testing if the value of scrolling Y is less that scrolling X and then allowing you to trigger if it's left or right after that. Seems to do the trick on my mac trackpad
var scroll_timer;
$('img').bind('mousewheel', function(e) {
if((Math.abs(e.originalEvent.wheelDeltaX) > Math.abs(e.originalEvent.wheelDeltaY)))
{
if (e.originalEvent.wheelDeltaX < 0) {
clearTimeout(scroll_timer);
scroll_timer = setTimeout(function() {
// .. do something
console.log('right');
}, 200);
} else if (e.originalEvent.wheelDeltaX > 0) {
clearTimeout(scroll_timer);
scroll_timer = setTimeout(function() {
// .. do something
console.log('left');
}, 200);
}
}
});
http://jsfiddle.net/andyface/5CfgT/

Categories