I am creating a splitscrolling website and it's working great. But i have one problem, when the user stops scrolling it fires a function called alignWhenIdle and what this does is align the columns so they become "one".
Now that is working nicely but i can't seem to target a specific part of the column that aligns. let's say when the number 2 column aligns ( see image ) i want to be able to fire an animation. I tried using a callback but that fires a function every time the columns are aligned.
This is my JS:
(function ($) {
var top = 0;
var contentHeight, contents, totalHeight;
var locked = false;
var timeout;
var align = function () {
var pos = (top + $(window).scrollTop());
var snapUp = 0 - (pos % contentHeight) < (contentHeight / 2);
var multiplier = snapUp
? Math.ceil(pos / contentHeight)
: Math.floor(pos / contentHeight);
var newTop = contentHeight * multiplier;
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200);
locked = false;
};
var reset = function () {
contentHeight = $('.right').height();
contents = $('.right > .content').length;
totalHeight = contentHeight * (contents - 1);
top = (0 - totalHeight);
};
var scrollRight = function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
};
var alignWhenIdle = function (delay) {
clearTimeout(timeout);
timeout = setTimeout(align, delay);
};
$(document).on('ready', function () {
reset();
scrollRight();
});
$(window).on('scroll', function () {
locked = true;
scrollRight();
});
$(window).on('mouseup', function (e) {
if (locked) {
align();
}
});
$(window).resize(function () {
locked = true;
reset();
scrollRight();
alignWhenIdle(300);
});
$(window).on('mousewheel', function (e) {
alignWhenIdle(300);
});
$(window).on("keyup", function (e) {
alignWhenIdle(300);
});
})(jQuery);
http://jsfiddle.net/ev3B8/
Any help is much appreciated,
Cheers
See http://jsfiddle.net/5T9Y8/
Scroll till the column 2 and see result...
In the method align I've added a callback:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
$(".animate").animate({ marginLeft: "200px" },300);
});
Works well, did you need exactly that?
EDIT
You should just check for some condition.
E.g. based on this solution Check if element is visible after scrolling you can build this:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
if (isScrolledIntoView(".animate")) $(".animate").animate({ marginLeft: "200px" },300);
});
See updated solution here http://jsfiddle.net/5T9Y8/1/
This is only one way, I'm really sure there is a way to do it even better. E.g. you can calculate the current elements which are shown and then just find the things only inside of them.
I tried using a callback but that fires a function every time the columns are aligned.
Use one method for functioning only once instead of on.
Related
I would like to scroll up or down the window while the mouse is over a specific element.
What I have so far basically works but it's not "smooth". It starts and stops on and on, not looking nice. Do you have any idea how to make a more constant smooth scrolling?
This is my code:
doScroll = 0;
$(".helperDown").mouseenter(function() {
scrollHandler = setInterval( function() {
console.log('scrolling down...');
if(doScroll == 0) {
doScroll = 1;
$("html, body").animate({scrollTop: fromTop+50}, 200, 'linear', function() {
doScroll = 0;
});
}
}, 200);
});
$(".helperDown").mouseleave(function() {
clearInterval(scrollHandler);
});
.helperDown is the area where the mouse has to be in to start scrolling. fromTop is always recalculated after a scroll event.
You can not start a series of animation and expect a smooth scrolling. What you need is to start one animation only by pre-calculating the distance this animation will cover. Also, jQuery has a nice wrapper for mouseenter and mouseleave -combined. It's the hover() function with two functions as its parameter. The following code block will solve your issue.
Also, this plnkr has both the up and down scroll feature:
https://plnkr.co/edit/WoneJ8?p=preview
$(function () {
// change this value as per your need
var distancePerSec = 1000;
$(".helperDown").hover(function () {
var h = $("body").height();
var targetScrollTop = h - $(window).height();
var distanceToTravel = targetScrollTop - $(window).scrollTop();
var animationDuration = (distanceToTravel / distancePerSec) * 1000;
$("html, body").animate({
scrollTop: targetScrollTop
}, animationDuration, 'linear');
}, function () {
// stop the animation
$("html, body").stop();
});
})
I made a bar chart only with CSS and a animation from low to up that works well, however I want to run only when trigged by scroll.
Somehow the animation after trigged by the scroll does not stop, it keeps running.
look in the inspect element the latest bar.
jquery
// Bar Chart Animation
function barChart(){
$("#demographicsBars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000, function() {
$('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit');
});
});
};
// Scroll Call Animation
$(window).scroll(function () {
$('.viewerDemographics').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
barChart();
} else {
}
});
});
jsfiddle
It's because you're asking it to.
http://jsfiddle.net/g6r1vngh/1/
Tell JS it hasn't been drawn
// Bar Chart Animation
var barChartDrawn = false;
Set it to true when it runs
function barChart(){
barChartDrawn = true;
Don't do any of those calculations, or run the function, if it's true
$(window).scroll(function () {
if (barChartDrawn) return;
I am trying to make this function works only when the screen size is above 1024px.
//Parallax background image
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};$(window).bind('scroll', update); update();
Here is what I have tried to do:
//Parallax background image
var velocity = 0.5;
$(window).on("ready resize", function() {
if ($(window).width() < 770) {
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};});$(window).bind('scroll', update); update();
I really don't know what I am doing wrong...
You haven't stated what the problem you're coming across is. If it's "my code doesn't work", then perhaps you should check your syntax first. Your braces are messed up.
//Initialize velocity and empty update function
var velocity = 0.5;
var update = function () {};
//When window is ready (content loaded) OR resized, execute the following function
$(window).on("ready resize", function () {
if ($(window).width() >= 1024) { //Check if window width is 1024px wide or larger
update = function () { //Set update to run this function when executed.
var pos = $(window).scrollTop(); //Get scrollbar position https://api.jquery.com/scrollTop/
//For each element with 'parallax' class, execute the following function
$('.parallax').each(function () {
var $element = $(this); //Get the current parallax-classed element
var height = $element.height(); //Save the current height of this element
//Set the CSS of this parallax-classed element set the background position
$(this).css('background-position', '40% + ' + Math.round((height - pos) * velocity) + 'px');
});
};
} else { //Execute if screen width is < 1024px
update = function () {}; //Set update to do nothing
}
});
//When window is scrolled through, run the update function
$(window).bind('scroll', update);
//update();
Last line is unnecessary, as resize will handle function value, and scroll will handle the execution.
You were missing a + or - within the background-position setting.
So for example, if the result of your Math.round() was "30", then Javascript would interpret that line as $(this).css('background-position', '40%30px'); which obviously would cause issues. I'm sure you wanted it to say something like $(this).css('background-position', '40% + 30px');.
I have a vertical photo viewer
and i need a scroll effect is once a page height when mouse wheel down.
so i have following code
$(document).ready(function() {
$(window).scroll(function () {
var H = $(window).height();
var st = $(this).scrollTop();
$("html, body").animate({ scrollTop: H + st }, 500, function () {
console.log("finish scroll");
});
});
});
But when i scroll once, it will repeat again and again until to the bottom.
How can i solve this problem?
Thanks in advance.
I used a counter and a timer so that the counter waits half a second after the scroll has finished..
http://jsfiddle.net/beardedSi/p45rH/1/
$(document).ready(function () {
var H = $(window).height(),
go = true;
console.log(H);
//just for visual, set the height of boxes to be same as window height
//to check it is all working
$('.box').css('height', H + "px");
function scroller() {
$("html, body").animate({
scrollTop: '+=' + H
}, 400, function () {
console.log("finished");
setTimeout(function () {
go = true;
}, 400);
});
}
$(document).on('scroll', function (e) {
e.preventDefault();
if (go) {
go = false;
scroller();
}
});
});
The problem is the animation make a scroll event too. so you have a scrolling loop.
To resolve that, you can add a flag.
It's not the best way to solve your problem but you can do this => http://jsbin.com/qagayopu/2/edit
Using either pure Javascript or jQuery, how do I scroll the page so that the nth row in a table is centered on the page?
Some examples I've seen that have this sort of feature usually require that the element I scroll to uses an id as the selector, but since the table has a dynamic amount of rows and may be paged, I'd rather not go this route of having to give each <td> tag an id.
Is the easiest way to just calculate the position of the td relative to the top of the document and scroll the window using setInterval until the middle of the window is >= to the position of the nth <td> tag?
I suppose some pseudo-code of the way I imagine it working would be:
function scrollToNthTD(i) {
var position = CalculatePositionOfTR(i);
var timer = setTimeout(function () {
ScrollDownALittle();
if( CenterOfVerticalWindowPosition > position)
clearInterval(timer);
}, 100);
}
Latest update (no-jquery for for modern browsers)
var rows = document.querySelectorAll('#tableid tr');
// line is zero-based
// line is the row number that you want to see into view after scroll
rows[line].scrollIntoView({
behavior: 'smooth',
block: 'center'
});
Demo at http://jsfiddle.net/r753v2ky/
Since you can use jQuery here it is..
var w = $(window);
var row = $('#tableid').find('tr').eq( line );
if (row.length){
w.scrollTop( row.offset().top - (w.height()/2) );
}
Demo at http://jsfiddle.net/SZKJh/
If you want it to animate instead of just going there use
var w = $(window);
var row = $('#tableid').find('tr').eq( line );
if (row.length){
$('html,body').animate({scrollTop: row.offset().top - (w.height()/2)}, 1000 );
}
Demo at http://jsfiddle.net/SZKJh/1/
Don't use jQuery - it slows down sites!
var elem = document.getElementById("elem_id");
elem.scrollIntoView(true);
You can do something like this
function CalculatePositionOfTR(){
return $('tr:eq(' + i + ')').offset().top;
}
function ScrollDownALittle(position){
$('html, body').animate({
scrollTop: position
}, 2000);
}
function scrollToNthTD(i) {
var position = CalculatePositionOfTD(i);
var timer = setTimeout(function () {
ScrollDownALittle(position);
if( CenterOfVerticalWindowPosition > position)
clearInterval(timer);
}, 100);
}
Give this a shot:
/*pseudo-code*/
$("td.class").bind("click", function() {
var y = $(this).position().top,
h = $(window).height();
if(y > h/2) {
$("body").animate({
scrollTop: y - h/2
}, 2000);
};
});
aka-g-petrioli
I have corrected the followings from your answer.
$('#control button').click(function(){
var w = $(window);
var row = table.find('tr')
.removeClass('active')
.eq( +$('#line').val() )
.addClass('active');
if (row.length){
w.scrollTop( row.offset().top - row.offset().top/5);
}
});
This will help you to scroll accurate position.