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.
Related
I have a HTML which is very long. I would like to auto-scroll the content on load. My requirements are:
Go to top when page opened.
Scroll to the utmost bottom.
Here's what I tried:
function pageScroll() {
window.scrollBy(0,7000);
scrolldelay = setTimeout('pageScroll()',1000);
}
This works well but I want it to be faster and also I would like a replacement of 7000.
These are the values which should work best in my opinion
function pageScroll() {
window.scrollBy(0, 3060) //don't set a timeout function
}
pageScroll()
I've been trying to get to find a solution for this all day but can't think of a good one that I can get working.
Basically, I made some jQuery/javascript code that runs an each() loop for certain items on a web page. This works well, but the page it runs on updates when you scroll to the bottom, adding more results. At the moment, my script can only go through as many items as there are loaded on the page. I would love for it to be able to go through all of them that are loaded, then scroll to the bottom and go through all the new results and continually repeat this process.
I've tried a lot of different solutions but can't seem to make one that works well.
Any help would definitely be appreciated.
Thanks :)
Edit:
Here are some of the concepts I've tried so far:
Place the code in a while loop and add an offset so it skips all of the items its already gone over
var a = 0;
var offset = 0;
while (a == 0) {
jQuery('.Grid-cell .js-stream-item .ProfileCard').each(function (i, ele) {
if (i >= offset) {
//Run script
}
});
offset = offset + 18; //18 is how many new items are added each time
setTimeout(function () {
jQuery('html, body').animate({scrollTop:$(document).height()}, 'fast'); //To scroll to the bottom
}, 5000);
}
Place code in while loop but no offset
(Similar to previous but offset removed since I figured it could just runover the ones already done)
This one was a bit more experimental since I was getting desperate after the previous attempts failed. Basically, I added a hidden checkbox, then I put my script and the each loop inside of a function. Then whenever the checkbox was clicked it would run the function which ran my script and once the each loop was complete it would scroll to the bottom of the page and click the checkbox to make the function go again
$( ".Footer-copyright" ).append( "<input type='checkbox' class='functionclass' style='display:none' value='no' />" );
jQuery(".functionclass").on("click", function() {
myfunction();
})
function myfunction() {
jQuery('.Grid-cell .js-stream-item .ProfileCard').each(function (i, ele) {
//Run script
});
jQuery('html, body').animate({scrollTop:$(document).height()}, 'fast');
jQuery(".functionclass").click();
}
jQuery(".functionclass").click();
So I believe I've found a solution to my issue. It's not exactly the cleanest solution ever, but it seems to get the job done. Basically, I've put the task inside of a setInterval() function and so it will now complete the task every 5 seconds and will scroll to the bottom after 15 tasks. This allows it to get an updated list of all of the elements every time it runs. Here is the code for anyone curious:
var i = 0;
task = setInterval(function(){
var elements = jQuery(".Grid-cell .js-stream-item .ProfileCard"); //Gets all of the elemnts
var element = jQuery(elements[i]); //Gets the element for the attempt number
//Completes task
if (i % 15 === 0){
jQuery('html, body').animate({scrollTop:$(document).height()}, 'fast'); //Scrolls to bottom when attempt number is divisible by 15
}
i++;
}, 5000);
So I have this function which scrolls down to the bottom of the page, and to the bottom of the scrollable div #log:
function gotoConsole() {
var console = document.getElementById('log');
window.scrollTo(0,document.body.scrollHeight);
window.setInterval(function() {
console.scrollTop = console.scrollHeight;
}, 250);
}
It does the job, it scrolls down to the page and scrolls to the bottom of the div. But the problem is; The div keeps on going down, I cannot scroll up.
The gotoConsole() function is called only once after the user clicks on a button.
What is the problem with this function? I cannot use jQuery for this.
I think that you may be misunderstanding setInterval. setInterval() will repeat infinitely unless you specifically clear it using clearInterval.
I believe what you're after is setTimeout - it functions very similarly to setInterval, though rather than repeating, it only runs once.
function gotoConsole() {
var myConsole = document.getElementById('log');
window.scrollTo(0,document.body.scrollHeight);
window.setTimeout(function() {
myConsole.scrollTop = myConsole.scrollHeight;
}, 250);
}
Side note:
Setting a variable to console is a major red flag.
When writing/debugging JavaScript, your best friend is very often going to be
console.log(). When you set a variable to the same name, you lose the ability to reference console within that scope without doing window.console.log() which is a cumbersome annoyance.
I have made a carousel and using JavaScript setInterval() function for rotate image with fixed interval in carousel. Here's the script that I had used:
var timeOut = 4000;
function showSlide() {
//....script for showing image
}
function pauseSlide() {
setInterval(function(){showSlide();}, timeOut);
}
jQuery(document).ready(function() {
pauseSlide();
});
Now the problem is when I have change the browser tab and after few minute back again to carousel browser and what I seen carousel running too faster rather than default time interval, images going to change fast suppose 0 time interval. Please help me with how I can sort this out.
You must get rid of the first interval before starting another, or you start getting more than one interval working simultaneously (i.e. why you start seeing it go "faster")
Do this
var timeOut = 4000;
var interval = 0;
function showSlide() {
//....script for showing image
}
function pauseSlide() {
clearInterval(interval);
interval = setInterval(function(){showSlide();}, timeOut);
}
jQuery(document).ready(function() {
//NOW you can do multiple pauseSlide() calls
pauseSlide();
pauseSlide();
pauseSlide();
pauseSlide();
pauseSlide();
});
From what I know in newer versions of both firefox and chrome, background tabs have setTimeout and setInterval clamped to 1000ms to improve performance. So I think that your issue might relate to that.
Maybe this will help : How can I make setInterval also work when a tab is inactive in Chrome?
Image changing faster than expected may indicate that you have more than one call to pauseSlide(), in one way or another.
Is document ready the only place you call the function ? Any code in showslide or anywhere triggering a document ready event ? If you put an alert() in pauseSlide(), does it popup more than once ?
I have a page with a horizontal width of 4000px
How would i go about creating an event that starts as soon as the page loads and cycles from the far right to left of the page? I want to show all the content and get the user back to the start if you get me
Ideally coded in javascript but will accept CSS3 (if it can be done)
Thanks Guys,
DIM3NSION
Based on your responses i have tried to get this working, but with no avail.
Help much appreciated
<script type='text/javascript'>
$(document).ready(function(){
function start(){
document.body.scrollTo(4000, 0);
var x=4000;
var t= setInterval(function(){ x-=50
if (x<=0){ clearInterval(t); document.body.scrollTo(0,0); return; } document.body.scrollTo(x, 0); }, 20) }
});
</script>
The jQuery scrollTo plugin does exactly what you need. See it in action. Combined with the setTimeout or setInterval function, you could easily achieve your goal.
I'm not sure if this would work for an entire page, but it could be slicker than using the built in browser scrollbars, and easier to set up, to boot: http://logicbox.net/jquery/simplyscroll/
There's probably some errors in this code, since I'm typing it on my phone, but something like this should work. Just stick it in a window.onload function.
function start(){
window.scrollTo(4000, 0);
var x=4000;
var t = setInterval(function(){
x-=50; // or whatever
if (x<=0){
clearInterval(t);
window.scrollTo(0,0);
return;
}
window.scrollTo(x, 0);
}, 20)
}