Develop Reference

autoscroll jquery with infinite scroll loop

I have a page that I would like to have it auto scroll as soon as the full page is loaded, scroll to the bottom and basically automatically loop to the start of the page (essentially loading the same page underneath it) to make it an infinite loop. I have the following script with does this but it breaks after a few scroll top/bottom. So far I'm using jQuery to help. I found this snippet on another StackOverflow post but cannot find it.
function scroll(element, speed) {
element.animate({ scrollTop: $(document).height() }, speed,'linear', function() {
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
});
}
setTimeout(function() {
scroll($('html, body'), 900000)
}, 3000);

I was able to solve it using a more simple method:
window.onload = function () {
var Delay = $(document).height() * 65;
var DelayBack = $(document).height() * 5;
function animateBox() {
$('html, body')
.animate({scrollTop: $(document).height()}, Delay, 'linear')
.animate({scrollTop: 0}, DelayBack, animateBox);
}
setInterval(animateBox, 100);
}

I feel like your issue is related to this line...
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
Try changing it to the following to make it a callback and not an immediate invocation:
$(this).animate({ scrollTop: 0 }, 3000, function(){ scroll(element, 4000); });

fetch data using php and ajax apply scroll function to window event
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
$.ajax({
type:'POST',
url:'getdata.php',
data:'id='+lastID,
beforeSend:function(html){
$('.load-more').show();
},
success:function(html){
$('.load-more').remove();
$('#postList').append(html);
}
});
}
});
});

jQuery activate function when user scrolls to specific section

I have been using progressbar.js to animate path fills, which is going quite well, however I have ran into a issue where the animation / function is playing as soon as the user loads the page.
The plan is for the function to run when the user scrolls to the section where its contained.
JSFiddle - https://jsfiddle.net/y12e8uks/1/
I have tried using $(window).scroll event, however im having a few issues implementing that into the existing function.
Any help would be great on this!
Thanks.

Try with this:
var bar = new ProgressBar.Path('#heart-path', {
easing: 'easeInOut',
duration: 1400
});
$(window).scroll(function() {
var hT = $('#container').offset().top,
hH = $('#container').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'linear',
step: function (now) {
$(this).text(Math.ceil(now));
$(this).append("%");
}
});
});
}
});

Moving object Left To Right

In my game I am going to add obstaceles that move left to right across the <div id="outline"></div>
I've used setInterval(){...} with the .animate() In it, and it seems to work only issue is after a little bit of time it leaves the ouline, Below is some code and a link.
$(document).ready(function() {
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900);
}, 900);
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900);
}, 1000);
});
Link.

change to this on your "-=220px":
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900);
}, 900);
to match 900 time interval, it's offset by 100.

If you want to know. There's another way do what you want without use setInterval, in this case you have to wait the animation ends in order to start the reverse animation.
$(document).ready(function() {
animate(false);
});
function animate(reverse) {
$("#CObject").animate({
'marginLeft' : (reverse) ? "-=220px" : "+=220px" //moves left
}, 900, function() {
// Run when animation finishes
animate(!reverse);
});
}
This way you can be sure that animation will finish before start anything else

Without setInterval:
$(document).ready(function() {
function loop() {
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900, 'linear', function() {
loop();
});
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900, 'linear', function() {
loop();
});
}
loop();
});
fiddle
create a loop function with the animation and then just call it when the animation finishes.

To ensure that the animation is complete, I would just have each direction animation call the other one when it completes. If you look at the API for animate, you'll see the fourth parameter is for a function that will be called when the animation is finished. http://api.jquery.com/animate/
$(document).ready(function() {
animateRight();
});
function animateRight() {
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900, 'swing', animateLeft);
}
function animateLeft() {
$("#CObject").animate({
'marginLeft' : "-=220px" //moves right
}, 900, 'swing', animateRight);
}
Here is the fiddle: http://jsfiddle.net/cgdtfxxu/

Why does scrollTop only scrolls half way down?

I have an error on a jQuery snippet and I am no jQuery expert. I have a scrolling div which will auto scroll with the following function.
// When DOM is fully loaded
jQuery(document).ready(function ($) {
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $(document).height() - $('.shooter-scroller').height()
}, fast, function () {
$(this).animate({
scrollTop: 0
}, speed);
});
}
speed = 15000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
I need to do 2 things with this script but would LOVE some help if people can help at all.
For some reason the scrolling stops halfway down the div and doesnt show all the content in the div and I would like to get the scroll to reset back to the top of the content once it has got to the bottom. Is this possible at all?
Any help would be amazing!
Fiddle: http://jsfiddle.net/andysimps1985/gn1a2kn7/1/
Thanks in advance.

You need to change
$(document).height() - $('.shooter-scroller').height()
to
$('.shooter-scroller').prop('scrollHeight')
That will give you the correct height.
See this jsfiddle (note: I changed the speed for a clearer result)

To get to the bottom you have to give the scrollTop as the element's height.
// When DOM is fully loaded
jQuery(document).ready(function ($) {
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop("scrollHeight")
}, fast, function () {
$(this).animate({
scrollTop: 0
}, speed);
});
}
speed = 15000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
This gets the scroll height.

How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations.
I need to do something like this...
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
but to run those two at the same time. The only thing I could think of would be using setTimeout once for each animation, but I don't think it is the best solution.

yes there is!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});

That would run simultaneously yes.
what if you wanted to run two animations on the same element simultaneously ?
$(function () {
$('#first').animate({ width: '200px' }, 200);
$('#first').animate({ marginTop: '50px' }, 200);
});
This ends up queuing the animations.
to get to run them simultaneously you would use only one line.
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
Is there any other way to run two different animation on the same element simultaneously ?

I believe I found the solution in the jQuery documentation:
Animates all paragraph to a left style
of 50 and opacity of 1 (opaque,
visible), completing the animation
within 500 milliseconds. It also will
do it outside the queue, meaning it
will automatically start without
waiting for its turn.
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
simply add: queue: false.

If you run the above as they are, they will appear to run simultaenously.
Here's some test code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

While it's true that consecutive calls to animate will give the appearance they are running at the same time, the underlying truth is they're distinct animations running very close to parallel.
To insure the animations are indeed running at the same time use:
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'});
$('#first,#second').dequeue('my-animation');
});
Further animations can be added to the 'my-animation' queue and all can be initiated provided the last animation dequeue's them.
Cheers,
Anthony

See this brilliant blog post about animating values in objects.. you can then use the values to animate whatever you like, 100% simultaneously!
http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/
I've used it like this to slide in/out:
slide : function(id, prop, from, to) {
if (from < to) {
// Sliding out
var fromvals = { add: from, subtract: 0 };
var tovals = { add: to, subtract: 0 };
} else {
// Sliding back in
var fromvals = { add: from, subtract: to };
var tovals = { add: from, subtract: from };
}
$(fromvals).animate(tovals, {
duration: 200,
easing: 'swing', // can be anything
step: function () { // called on every step
// Slide using the entire -ms-grid-columns setting
$(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
}
});
}

Posting my answer to help someone, the top rated answer didn't solve my qualm.
When I implemented the following [from the top answer], my vertical scroll animation just jittered back and forth:
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
I referred to: W3 Schools Set Interval and it solved my issue, namely the 'Syntax' section:
setInterval(function, milliseconds, param1, param2, ...)
Having my parameters of the form { duration: 200, queue: false } forced a duration of zero and it only looked at the parameters for guidance.
The long and short, here's my code, if you want to understand why it works, read the link or analyse the interval expected parameters:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
Where 'autoScroll' is:
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
Happy coding!