Develop Reference

scroll based on dragenter event?

how to scroll up step by step and scroll down step by step using jquery. (jquery ui not appreciated).
i have a 2 divs
<div class="upper" style="height:35px;background-color:red;right:0;left:0;top:0;position:fixed;width:100%;z-index:2000"></div>
<div class="lower" style="height:35px;background-color:red;right:0;left:0;bottom:0;position:fixed;width:100%;z-index:2000"></div>
if i drag an image and hover on first div (upper),it should scroll up step by stell.
if i drag and hover on 2nd div it should scroll down manually.
in both cases scrolling should stop if i came out of the div.
i am trying to implement it using events
var isleftDragPosition=true;;
$('.upper').on('dragleave', function(){
console.log("hidragleave");
var isleftDragPosition=true;
});
$('.lower').on('dragleave', function(){
console.log("hi2dragleave")
var isleftDragPosition=true;
});
$('.upper').on('dragenter', function(){
var isleftDragPosition=false;
while(!isleftDragPosition){
var x=document.documentElement.scrollTop;
console.log("to upper position",x);
window.scrollTo(0, x-2);
}
});
$('.lower').on('dragenter', function(){
console.log("hi2dragenter",document.documentElement.scrollTop)
window.scrollTo(1000, 1000);
});
i am trying it with the top div to scroll up, but the code crashes my tab(hang).
how i can do that?

You are redefining your flag in each handler, so the change is not saved. Also, while loop might be to fast for your particular case. I modified code like this:
$('.upper').on('dragenter', function(){
isleftDragPosition=false;
clearInterval(interval);
var f = function() {
if(!isleftDragPosition){
var x=document.documentElement.scrollTop;
console.log("to upper position",x);
window.scrollTo(0, x-2);
} else {
clearInterval(interval);
}
}
setInterval(f, 1000);
});
Hope this helps.

Wow.js repeat animation every time you scroll up or down

I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.
I have already tried this:
$(window).scroll(function(){
new WOW().init();
}
But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.
I'm sorry for this messy question but I really don't know how to explain it.
Thanks in advance!

This example by Benoît Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.
http://codepen.io/benske/pen/yJoqz
Snippet:
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});

If a user wants to repeat the animation on both the events i.e.
onScrollUp
onScrollDown
then this will be a good solution for it:
First create an addBox function, it will help to push new elements into the WOW boxes array.
WOW.prototype.addBox = function(element){
this.boxes.push(element);
};
Then use jQuery and scrollspy plugin that helps to detect which element is out of the view and then push WOW as:
$('.wow').on('scrollSpy:exit',function(){
var element = $(this);
element.css({
'visibility' : 'hidden',
'animation-name' : 'none'
}).removeClass('animated');
wow.addBox(this);
});
Solution Courtesy: ugurerkan

Answer by #vivekk is correct I m just adding a working example so that people can easily get this
see the Demo fiddle
<script>
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
</script>

Detect scrolling - scroll to div

I'm trying to make a site whereby when the user starts to scroll it automatically scrolls them (not jump) to a set position, so that content can be seen. The content is already there on the page I just dont want them to scroll to it so as soon as they start to move down the page it will help them by scrolling to a set point.
This is what I had so far but I got lost:
<script type="text/javascript">
$(body).scroll(function() {
if ( $this).scrollTop() > 1 ) {
}
});
</script>

Here's a fiddle
var scrollFunction = function() {
$('html, body').not(':animated').animate({
scrollTop: $("#layer-2").offset().top //gets the position of the next layer
}, 1000, function() {
$(document).off('scroll', scrollFunction)
});
}
$(document).on('scroll', scrollFunction);

You can bind your element with scrollstart (also there is a scrollstop) event:
jQuery('#yourElementId').bind("scrollstart",scrollFunc);
var scrollFunc = function(){
//if(jQuery('#yourElementId').scrollTop()>1) //unnecessary
jQuery('#yourElementId').scrollTop(300); // change 300 to any number you want
}

how to disbale scrolling on whole page except the selected div in html web page

I am using scrolling in the html web page but problem is that it works on whole page but i want that to work on the div on which i am calling the scrolling function here is my code
<script>
var startPos;
function init(){
var scrollArea = document.getElementById('holder');
scrollArea.addEventListener('touchstart', function(event){
touchstartHandler(event);
}, false);
scrollArea.addEventListener('touchmove', function(event){
touchmoveHandler(event);
}, false);
scrollArea.addEventListener('touchend', function(event){
touchendHandler(event);
}, false);
}
function touchstartHandler(e){
startPos = e.touches[0].pageY;
}
function touchmoveHandler(e){
var touch = e.touches[0];
var targetBox = e.currentTarget.getElementsByTagName("div")[0];
e.preventDefault();
var fingerMoved = startPos - touch.pageY;
startPos = touch.pageY;
targetBox.scrollTop = targetBox.scrollTop + fingerMoved;
}
</script>

A simple solution,
To cut off the scroll of your ENTIRE page.
Set CSS:
html, body{overflow:hidden;}
/* or */
html, body{overflow-y: hidden;}
This will get rid of your page scrolling completely.
Then just set the elements on the page that you want to scroll to scroll.
Which in all honesty you don't even need javascript for, but javascript does provide better functionality.

In Responsive Web Design, how can I use Javascript or jQuery to stop a function and reset when the users downsizes their window?

I have a responsive layout and I've created a fading panels animated element with jQuery. I set the jQuery function to only activate if the user is above a certain screen size. However, if I scale the window down, the function still runs.
Here's what I'd like to achieve:
When the user scrolls bellow a browser width of 1440px, stop that fading panels animation.
Once the animation is stopped, I want to reset the area to display the 1st panel.
If the user scrolls back up above that screen size, start the animation again.
Here is my code, thanks in advance for your time:
// Get the viewport size!
var viewport = $(document).width();
if (viewport >= 1140) {
var InfiniteRotator =
{
init: function()
{
// hard set height of container
$('#circles').height('286.717px');
// initial fade-in time
var initialInterval = 3000;
// interval between items
var itemInterval = 5000;
// cross-fade time
var fadeTime = 2000;
// count number of items
var numberOfItem = $('.rotating-item').length;
// set current item
var currentItem = 0;
// create loop
var infiniteLoop = setInterval(function() {
// initial fade out
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
// set counter
if (currentItem == numberOfItem -1) {
currentItem = 0;
} else {
currentItem++;
}
// next item fade in
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
}
// go Go GO!
InfiniteRotator.init();
}
Please note: I used this great tutorial to create the fading panels: http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

window.onresize = function() {
clearInterval(infiniteLoop)
}
Note that you must still be in your init function in order to get the infiniteLoop variable.

You can use
window.onresize = function(){ ... }

$(window).resize(function() {
//stop and reset animation in here.
});