I am creating a swipe page system using the library touchSwipe.js.
With the method I have, I can swap between pages however, I cannot figure out to go back to previous page properly.
Right now if I swipe right and left few times the counting system goes out summing the swipes.
How can I make the counting system properly in order to move between pages?
var swipeRight = 0;
var swipeLeft = 0;
var swipePage = 0;
function swipe1(event, direction, distance, duration, fingerCount) {
if (direction == "left") {
swipeLeft++;
if (swipeLeft == 5) {
swipeLeft = 0;
}
}
if (direction == "right") {
swipeRight++;
if (swipeRight == 5) {
swipeRight = 0;
}
}
swipePage = swipeLeft - swipeRight;
if (swipePage == 0) {
$("html, body").animate({
scrollLeft: 0,
}, 1500);
swipeLeft = 0;
swipeRight = 0;
}
if (swipePage == 1) {
$("html, body").animate({
scrollLeft: $("#hwwPage").offset().left
}, 1500);
}
if (swipePage == 2) {
$("html, body").animate({
scrollLeft: $("#projPage").offset().left
}, 1500);
}
if (swipePage == 3) {
$("html, body").animate({
scrollLeft: $("#digiPage").offset().left
}, 1500);
}
if (swipePage == 4) {
$("html, body").animate({
scrollLeft: $("#contPage").offset().left
}, 1500);
}
console.log(swipeRight + "+" + swipeLeft);
console.log(swipePage);
}
I have fixed your code: you don't really need swipeleft and swiperight i think. Just increase or decrease the swipePage value depending on the swipe direction:
var swipePage = 0;
function swipe1(event, direction, distance, duration, fingerCount) {
if (direction == "left")
if (swipePage > 0)
swipePage++;
if (direction == "right")
if (swipePage < 4)
swipePage--;
var pageIds = ["",
"#hwwPage",
"#projPage",
"#digiPage",
"#contPage"
];
$("html, body").animate({
scrollLeft: $(pageIds[swipePage]).offset().left
}, 1500);
}
Related
I'm trying to disable scroll counter after user scrolls up or down and while animation executing.
I tried with timeouts but nothing worked. Timeout waited for 800ms with scrolling, but counter was still incerasing in the background.
I'm trying to achieve this functionality: https://alvarotrigo.com/fullPage/
My results so far: https://objemnarave.si/voda/index.php?lang=en
$('html').on('wheel', function(event) {
if (event.originalEvent.deltaY > 0) {
//scroll down
counter++;
//Check if counter is larger that section number, then execute animation
if (!(counter > maxSections)) {
$('html, body').animate({
scrollTop: $( $(".sect-"+counter) ).offset().top
}, 800);
}
} else {
//scroll up
counter--;
//Check if counter is smaller than previous section
if (!(counter < 1)) {
$('html, body').animate({
scrollTop: $( $(".sect-"+counter) ).offset().top
}, 800);
}
}
if (counter <= 0) {
counter = 1;
}
else if (counter >= 13) {
counter = maxSections;
}
console.log(counter);
});
It's possible to disable scroll counter in the backround while
animation is executing?
I'm creating a presentation using HTML for a project I'm working on. The presentation will be full-page slides and I want to implement a script with jQuery so that when the arrow keys are pressed, it scrolls smoothly between slides. Left being previous slide and right being next slide obviously.
I wrote a script but it only works the first time. I'm very new to jQuery and I can't seem to fix it.
<script type="text/javascript">
$(document).keydown(function(e){
if (e.keyCode == 37) {
$('.slide').prev().ScrollTo({
duration: 2000,
easing: 'linear'
});
}
if (e.keyCode == 39) {
$('.slide').next().ScrollTo({
duration: 2000,
easing: 'linear'
});
}
});
</script>
see this example: http://jsfiddle.net/kevalbhatt18/0tue685a/
$(document).keydown(function (e) {
// console.log($('[class ^=slide]'))
if (e.keyCode == 37) {
if ($('#container').find('.scroll').prev()[0]) {
$("html, body").animate({
scrollTop: $($('#container').find('.scroll').prev()[0]).offset().top
}, 1000);
console.log($($('#container').find('.scroll').prev()[0]).addClass('scroll'))
console.log($($('#container').find('.scroll')[1]).removeClass('scroll'))
} else {
$("html, body").animate({
scrollTop: $($('#container').children()[$('#container').children().length - 1]).offset().top
}, 1000);
$($('#container').children()[$('#container').children().length - 1]).addClass('scroll')
$($('#container').find('.scroll')[0]).removeClass('scroll')
}
}
if (e.keyCode == 39) {
if ($('#container').find('.scroll').next()[0]) {
$("html, body").animate({
scrollTop: $($('#container').find('.scroll').next()[0]).offset().top
}, 1000);
$($('#container').find('.scroll').next()[0]).addClass('scroll')
$($('#container').find('.scroll')[0]).removeClass('scroll')
} else {
$("html, body").animate({
scrollTop: $($('#container').children()[0]).offset().top
}, 1000);
$($('#container').children()[0]).addClass('scroll')
console.log($($('#container').children()[0]))
$($('#container').find('.scroll')[1]).removeClass('scroll')
}
}
});
I think the problem is that $('.slide') does not select the slide you are on, it selects ALL the slides that match the selector. You could try something like
<script type="text/javascript">
var current_slide = $('.slide').first();
$(document).keydown(function(e){
if (e.keyCode == 37) {
current_slide = current_slide.prev();
current_slide.ScrollTo({
duration: 2000,
easing: 'linear'
});
}
if (e.keyCode == 39) {
current_slide = current_slide.next();
current_slide.ScrollTo({
duration: 2000,
easing: 'linear'
});
}
});
</script>
What I want to achieve is a simple scroll to function, which always will scroll to same point regarding scrollTop position.
I thought using window.scroll will be a good approach here, cause I am able to read current scrollTop value, as I sad it's not workin, on some browsers I am not able to scroll(IE), on others (Chrome, Firefox) after clicking tag connected to this func. I got auto scroll behaviour, a little bit up and then a little bit down.
I don't want to use scrollTo plugin or others cause it's the only place on my page with such funcionality.
$(window).scroll(function () {
var y = $(window).scrollTop();
console.log(y);
var mainBanner = $('header').height();
if (y > 1 && y < mainBanner) {
$('#slideUpHead').click(function(){
$("html, body").animate({ scrollTop: mainBanner - y}, 600);
});
}
else if(y < 1){
$('#slideUpHead').click(function(){
$("html, body").animate({ scrollTop: y + mainBanner}, 600);
});
}
else {
}
});
here's my second approach, partially working:
myScroll = function (){
var mainBannerH = $('header').height();
var y = $(window).scrollTop();
if (y > 1 && y < mainBannerH) {
$("html, body").animate({ scrollTop: mainBannerH - y}, 600);
}
else if(y < 1){
$("html, body").animate({ scrollTop: y + mainBannerH}, 600);
}
else {
console.log("It's not working properly");
}
};
$('#slideUpHead').click(myScroll);
For the time being the following solution works just fine, thanks to Ahmad I have changed my approach and get scrollTop position a little bit differently, not 100% sure why but it works.
myScrollTo = function (){
var mainBannerH = $('header').height();
var myPos = $('html,body').scrollTop();
if ( myPos > 1 && myPos < mainBannerH) {
$("html, body").animate({ scrollTop: mainBannerH - myPos}, 600);
}
else if(myPos < 1){
$("html, body").animate({ scrollTop: myPos + mainBannerH}, 600);
}
else {
console.log("It's not working properly");
}
};
$('#slideUpHead').click(myScrollTo);
I try to use the jQuery for my header animation, the animation slows down after I added:
else if (headeranimated && $(this).scrollTop() > 1200)
else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000)
I have to wait a couple of seconds for the second part of animation. Is there anything wrong with this code?
Thank you
// header animation
var headeranimated2 = false;
var headeranimated = false;
var headeranimated3 = false;
$(window).scroll(function() {
if ($(window).width() > 800) {
if (!headeranimated && $(this).scrollTop() > 500) {
$('#headerpattern').animate({
left: "-40%"
}, 800);
headeranimated = true;
} else if (headeranimated && $(this).scrollTop() > 1200) {
$('#headerpattern').animate({
top: "-20%"
}, 200);
headeranimated2 = true;
} else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000) {
$('#headerpattern').animate({
top: "0"
}, 200);
headeranimated2 = false;
headeranimated3 = true
} else if (headeranimated3 && !headeranimated2 && $(this).scrollTop() < 400) {
$('#headerpattern').animate({
left: "0"
}, 800);
headeranimated = false;
headeranimated3 = false;
}
} else {
if (!headeranimated && $(this).scrollTop() > 500) {
$('#headerpattern').animate({
top: "-8%"
}, 1200);
headeranimated = true;
} else if (headeranimated && $(this).scrollTop() < 400) {
$('#headerpattern').animate({
top: "0"
}, 800);
headeranimated2 = false;
}
}
});
well.. you are calling the scroll listener which occurs evry moment while you are scrolling. but you also play an animation which is relatevly slow to scroll. when you call the scroll listener by scrolling, you create multiple nimations calls which try to play all at once (and that is why it slows down the ui).
the solution: if animation still played - don't scroll
var animScroll;
$(window).scroll(function()
{
if (animScroll) return;
if ($(window).width() > 800)
{
if (!headeranimated && $(this).scrollTop() > 500)
{
animScroll = true;
$('#headerpattern').animate({ left: "-40%"}, 800, function()
{
animScroll = false;
});
headeranimated = true;
}
// rest of code
A scroll even is an event the is emitted continuously while scrolling, so it will be triggered multiple times a second while you are scrolling.
Whenever you call .animate for an element, the animation is added to a queue. And the animations are executed one after the other, in the order they where added to the queue. As your animations have a duration of in a range of 200 to 1200 you might result in an animation queue that has a duration of several seconds.
One solution would be to call .stop() before you call .animate:
$('#headerpattern').stop().animate(....)
But this might break your desired effect.
Another solution would be to check if there is an animation that is currently running and if so, then do not start a new animation. But this will have some kind of stop and go or delay effect.
i've added this script that scroll down 100% with mouseweel at once
$(document).ready(function () {
var divs = $('.mydiv');
var dir = 'up'; // wheel scroll direction
var div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
dir = 'down';
} else {
dir = 'up';
}
// find currently visible div :
div = -1;
divs.each(function(i){
if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
div = i;
}
});
if (dir == 'up' && div > 0) {
div--;
}
if (dir == 'down' && div < divs.length) {
div++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 200);
return false;
});
$(window).resize(function () {
$('html,body').scrollTop(divs.eq(div).offset().top);
});
});
But i need to add something on it so the scrolling look smooth , how can i do that ?
Fiddle
You can either specify a duration for your animate function or an easing function to have a different animation behavior.
You can find easing functions and instruction to use theme here :
jQuery Easing Plugin
SOLUTION:
#user3127499 already provided you a working FIDDLE.
He changed the time to 1000 from 100
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 1000);
And added a 1000 delay here:
$('html,body').scrollTop(divs.eq(div).offset().top.delay(1000));
There is a plugin for that:
You will counter many other challenges while recreating the wheel, why don you you simply use this plugin named Scroll Section.
DEMO