We Keep Coding

JavaScript: Keep scrolling down page

I'm pretty new to JavaScript. I want to scroll to the very bottom of a website that continually loads more text when you scroll down (like on a Facebook page).
I know the code window.scrollTo(0,document.body.scrollHeight) will scroll to the bottom, causing more of the page to load, but not yet all of it. I was wondering how to execute this until the actual bottom of the page has loaded, or ~100 times.
I tried a for loop, but it didn't scroll more than once. Then I tried a for loop with setTimeout set to 2000 ms (or 2 sec) which also did not work for some reason.
I'm also worried that the page will try to run my code all at once before loading more of the content.
Thanks in advance!

I figured it out, inspired by some other code I found online. I did:
function scrolldown() {
setTimeout(
function()
{
window.scrollTo(0,document.body.scrollHeight);
scrolldown();
}, 2000
)
}
scrolldown()
Still unsure why the delayed for loop did not work though.
The unsuccessful for loop attempt was:
for(var i=0; i<100; i++){
setTimeout(
function(){window.scrollTo(0,document.body.scrollHeight);}, 2000
)
}

You can achieve same using scrollBy function :
function scrolldown() {
setTimeout(
function(){
window.scrollBy(0,50);
scrolldown();
}, 1000)
}
scrolldown()
while window.scrollBy(x,y) used to scroll x & y from Top Left of the page.

Wait before starting JavaScript function

I'm trying to play a sound every time a user gets a new notification. The way I am loading the notifications on my page is simple:
(function($)
{
$(document).ready(function()
{
var $container = $("#noti");
$container.load("notify.php");
var refreshId = setInterval(function()
{
$container.load('notify.php');
}, 1000);
});
})(jQuery);
This works by updating a div container with whatever number the PHP code sends out. it retries every second (probably not the most efficient way, but it works).
I have another piece of code that checks when the div content changes, then creates an alert box (which I will change to playing a sound when the script is done):
var myElement = document.getElementById('noti');
if(window.addEventListener) {
// Normal browsers
myElement.addEventListener('DOMSubtreeModified', contentChanged, false);
} else
if(window.attachEvent) {
// IE
myElement.attachEvent('DOMSubtreeModified', contentChanged);
}
function contentChanged() {
// this function will run each time the content of the DIV changes
alert("js is working");
}
This script works, however it also creates an alert or the first loading of the notifications. This is because it starts of as an empty div, then it loads the data, which sets off this alert script. The only way I could think about going round this is delaying the script from loading for a couple of seconds whilst the AJAX script does its business.
Does anyone know a way I could delay this second script from doing anything for the first few seconds after page load, or perhaps a better way about going round this?

Instead of doing that, use a custom event which you trigger when load finishes:
var refreshId = setInterval(reloadContainer, 1000)
function reloadContainer() {
$container.load('notify.php', function success() {
$container.trigger('loaded')
})
}
$(myElement).on('loaded', contentChanged)

How to synchronize setTimeout and mobile.navigate using jQuery Mobile?

I'm creating a small quiz, mobile app using jQuery Mobile, and I'm displaying a 3 second GIF at certain points. Though, because it is shown many times, I don't want to bother the user each time, and if he/she clicks anywhere on the page it goes to the next page, but I also have set up a setTimeout, which waits for three seconds, meaning of the GIF to display completely and then moves to the next page. As you can see this makes a problem. If I click the GIF, it moves to the next page, and then if I again move to the other page, after three seconds are passed it sends me back to the previous page, due to the setTimeout. I have the following code:
EDIT :
$(document).on("pagechange", function(event, ui) {
var clicked = false;
// Here comes some if-else statements checking which page is currently active
else if ($.mobile.activePage[0].id == "correctGIF") {
correct++;
nextpage = hashtag.concat(page, 'Correct');
$('#correctGIF').append('<img src="images/Correct1.gif">');
$('#correctGIF').click(function() {
clicked = true;
$.mobile.navigate(nextpage);
alert("alert from click");
});
setTimeout(function() {
if (!clicked) {
$.mobile.navigate(nextpage);
alert("alert from timeout");
}
}, 3000);
}
So, I need to somehow synchronize it. If there is a click it should ignore the setTimeout part, and if there is no click it should wait for three seconds for the GIF to finish, meaning should activate the setTimeout part. Also please note that this GIF is displayed many times during the quiz, not just once. Any ideas about this?

Have you tried this approach:
$(document).ready(function () {
$('#correctGIF').off('click').on('click', function () {
alert('navigate from click');
console.log('navigate from click');
if (!$('#correctGIF').hasClass('clickedImageClass')) {
$('#correctGIF').addClass('clickedImageClass');
}
});
setTimeout(function () {
if (!$('#correctGIF').hasClass('clickedImageClass')) {
alert('navigate from timeout');
console.log('navigate from timeout');
}
}, 3000);
});
JsFiddle demo here: http://jsfiddle.net/e35pn/13/

How to stop jQuery delay timer based animation?

So I'm building this modal / timed animation with slide navigation from scratch.
I have a function for the buttons that navigate the slides, and also a function to animate the frames every 5 secs. My problem is I'm not sure how to "break" the delay function if the user decides to take over by clicking the navigation buttons. As soon as the user clicks any of those buttons the delay based animation function needs to stop working.
// Timer for Animating Frames
// Need a kill timer function
var animateFramesTimer = function(){
$('#tour_1')
.delay(5000).fadeOut('fast', function() {
$('#tour_2')
.fadeIn('fade').delay(5000).fadeOut('fast', function() {
$('#tour_3')
.fadeIn('fade').delay(5000).fadeOut('fast', function() {
$('#tour_4')
.fadeIn('fade').delay(5000).fadeOut('fast', function() {
$('#tour_modal').fadeOut('fast');
// END
});
});
});
});
}
animateFramesTimer();
So I run animateFramesTimer and if a certain button is clicked I need the function to stop working, I tried a while loop which seemed like the correct path to go, but it kept breaking in the browser :(
var autoAnimate = true;
while(autoAnimate){
// delay animation
}
Do you know of a better way to accomplish this?

$('[id^="tour_"]').stop(true, true); // kills current animations
animateFramesTimer = function() {}; // removes function

Automate html in Javascript/jQuery

I'm currently preparing a cool video presentation on my html web page. At the end of it, I want to be able to click on the video and be taken to a page - however I only want the link to come into effect at a certain time.
I've done some research and I can't find anything about this.
As an example, let's say that I want to make a link on something...
This link will go somewhere after 15 seconds
How can I make it so that <a> tag doesn't work for 15 seconds with jQuery or JavaScript? (JavaScript preferred but it doesn't really matter!). Remember - I don't want that whole line of code to suddenly appear - prior to the link working that should just be text!
Thanks!

Here delay is set to 3 seconds (3000 milliseconds in call to setTimeout). Change it to 15000 to make it 15 seconds
$(document).ready(function() {
setTimeout(convertTextToLink, 3000);
});
function convertTextToLink() {
$('#thanks').html('Thanks for watching. You may now proceed.');
}
Html
<h1>Hello</h1>
<p>here are your vids</p>
<div id="thanks">Thanks for watching</div>

var waiting = true;
//set waiting to false after 15 seconds
setTimeOut(function() { waiting = false },15000);
$('#automate').click(function(e) {
if(waiting === true) {
e.preventDefault(); //prevent the link from firing
}
});