Using jQuery's .each feature when page is constantly updating - javascript

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);

Related

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.

How to flip thru all pages and back in Jquery Datatable

In my Jquery datatable I'm programmatically navigating to the pages with setinverval function.
setInterval(function () {
table3.page('next').draw('page');
}, 5000)
This works fine but stops at last page. Once it reaches to the last page, I want it to go back to the first page and do the whole process again.
I guess I need to find out the count of pages then once it reaches that, go go page 1. But I have not have good luck on how to accomplish this.
this is what I came up with:
http://live.datatables.net/fobalaxe/1/edit
$(document).ready( function () {
var table = $('#example').DataTable({paging:true});
setInterval(function(){browse(table);} , 5000);
});
function browse(table){
if(table.page() >= table.page.info().pages - 1){
table.page('first').draw('page');
}
else {
table.page("next").draw('page');
}
}

Code being multiplied and all instances are running

My website works in a way so that any links clicked do not load a new page but however trigger a .load() event into a div named "content".
Everything has been nice and dandy but now I have run into a small problem.
On one of the content pages, I have the following code:
$('.count').each(function () {
$this = $(this);
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});
The code works... it works very well. But when I load that same page again, it seems like the code is running twice because the seconds are going down by 2 at a time. Then when I load it again, it's going down by 3 seconds at a time. Another load, and it goes down by 4 seconds at a time. I load it a couple more times and it goes down faster then I can read.
I tried giving the .count divs their own unique id's (the .remain div is nested inside the .count div), even when pages are subsequently loaded the id is still entirely different and this did not fix my problem. I also tried putting clearInterval(countdown) right before the function but that just made it stop working entirely. Any suggestions?
And yes I know the countdown doesn't currently stop when it reaches 0.
Try this:
var countdown;
$('.count').each(function () {
$this = $(this);
if (!countdown)
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});

How can I add a page indicator to this jquery div carosel I made?

I put together this quick carousel that I'm using to cycle through different divs that contain graphs and other various data. I would like to have something indicating which "page" or div you are currently viewing.
Here is an example of what I'm currently doing to iterate through the divs.
http://jsfiddle.net/d6nZP/64/
My plan is to have a row of dots that have either a active or none active state depending on which page is indicated in the row. But even a basic page counter would work at this point.
Any help would be greatly appreciated, Thanks!
here is a simple pager for your carousel, enjoy it ;)
http://jsfiddle.net/d6nZP/65/
Created something you can use http://jsfiddle.net/BadBoyBill/8yHmy/
$("div[id^=marquee]:gt(0)").hide();
function startTimer(){
i = setInterval(rotate, 2000);
return i;
}
var intID = startTimer();
function stopTimer(){
clearInterval(intID);
}
function rotate(){
reference = $("div[id^=marquee]:visible").hide().next("div[id^=marquee]");
reference.length ? $(reference).fadeIn() : $("div[id^=marquee]:first").fadeIn() ;
dot = $(".indicator-on[id^=indicator]").removeClass("indicator-on").next("a[id^=indicator]").addClass("indicator-on");
dot.length ? $(dot).addClass("indicator-on") : $("a[id^=indicator]:first").addClass("indicator-on");
}
$("div[id^=marquee]").each(function(){
$("#indicators").append("<a href='#' id='indicator' class='indicator'></a>");
$(".indicator:first").addClass("indicator-on");
});
$("a[id^=indicator]").click(function(e){
var index = $("a[id^=indicator]").index(this);
//alert(index);
$("div[id=marquee]").hide();
$("div[id=marquee]").eq(index).show();
$("a[id=indicator]").removeClass("indicator-on");
$("a[id=indicator]").eq(index).addClass("indicator-on");
stopTimer();
intID = startTimer();
e.preventDefault();
});
$("a[id=indicator], div[id=marquee]").mouseenter(function(){
stopTimer();
//alert("mouseenter");
}).mouseleave(function(){
stopTimer();
intID = startTimer();
//alert("mouseexit");
});
The easiest way to do this would be to put something in the content divs themselves that acts as a counter, i.e. in the first div put "1/3", in the next "2/3", etc. That method, of course, would have the disadvantage of not being very responsive to change. A better option is to keep a separate variable that keeps track of which element is visible, then when the "next" button is clicked, the variable is incremented, then a check is run to see if that index exists. If not, you loop back the beginning. The opposite, of course, with the previous button.

jQuery page fadeIn() only working on index page

Thanks everyone, for the quick help! Script now works. I've updated the site and code below. Maybe someone can find this code useful. :)
I've gotten the page (http://www.katmcgo.com) to fade in as desired using jQuery. However, it only fades in on the index page -- all subsequent pages load as normal.
I have the following script in the header of each page (including the sub-pages that are not fading in); it is included in each page using PHP:
$(document).ready(function() {
function fadePage() {
// Target the tags you want to effect with the fade
var fadingTag = "section";
var fadingTag2 = "hr";
var delay = 0; // Initialize delay - Should start at 0
var delayStagger = 600; // Delay stagger - Time between elements fading in
var fadingNum = document.getElementsByTagName(fadingTag).length; // Find out how many elements you need to hide
// Get and fix the overall document height before it disappears (which will happen when elements are hidden)
var pageHeight = $(document).height() + "px";
$("#wrapper").css("height", pageHeight);
// Hide all targeted tags
$(fadingTag).css("display", "none");
$(fadingTag2).css("display", "none");
// Fade each targeted tag in, one by one
for (var i = 0; i < fadingNum; i++){
$($(fadingTag).get(i)).delay(delay).fadeIn(delayStagger);
$($(fadingTag2).get(i)).delay(delay).fadeIn(delayStagger);
delay += 350;
}
}
fadePage();
});
I've been racking my brain as to why this is happening, and doing searches to the find the answer, but coming up with nothing...
This page is in the early stages, so I'm just doing dev in Firefox and Safari... fade works in both, but only on the first page. Any help would be greatly appreciated.
install firebug in firefox. your getting an undefined element[0] on all pages except index.php.
Edit:
wrap your s3Slider call inside an if statement checking if the element exists.
if( $('#slider').length ) {
$('#slider').s3Slider({
timeOut: 3500
});
}
Alternatively you could not output that code from the server if your not on the index page.
You have an error coming from s3Slider.js on all of your subsequent pages. Probably because the slider element does not exist on those pages, but the plugin is still being called.
The fade script probably works fine.

Categories