We Keep Coding

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

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

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

Refresh a certain div

Can anyone give me advice on how to make a div refresh.
I'm making a chess game and I want the div to load every time the other player posts data into the database. My game is almost finished the thing is, when you move a piece, Player 2 wont see the move that Player 1 made, when Player 2 refreshes the browser he/she can now see that the Player 1 has moved a piece.
How can I achieve this automatically?
I'm using jQuery and Ajax.

something like:
<script type="text/javascript">
window.onload = setupRefresh;
var interval = 1000;
function setupRefresh() {
setTimeout("refreshPage();", interval); // milliseconds
}
function refreshPage() {
//get game state using ajax and update div
}
this will refresh every second (== 1000ms, change to what you want/need), you need to implement the stuff in refreshPage()

Try this,Auto Load and Refresh Div every 10 Seconds with jQuery.
cant answer more without showing what you already done?

Hope something like this might help you... :)
$(document).ready(function(){
setInterval(targetDiv, 1000);
});
function targetDiv(){
$.ajax({
url: "/refresh_your_div_function",
//Other code u need to perform
}).done(function() {
//Your code
});
}

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

setInterval update ajax column unless mouseover

I have a column in my web design, which is periodically refreshed by a JS function "refreshColumn()" and updated by AJAX.
setInterval('refreshColumn()',60000);
function refreshColumn() {
..make call with AJAX and load response to element...
document.getElementById('myColumn').innerHTML = xmlhttp.responseText;
}
This is okay, however, it's not very practical when my user is actually using that column and it refreshes on them!
Is it possible to modify what I have already, to incorporate an 'onmouseover' event that will stop the function from running the AJAX and refreshing the column, and 'onmouseout' allows the script to refresh again?

You would use a timeout instead of an interval, and just clear it on mouseover and reset it on mouseout.
Live Demo
var timeout = setTimeout(refreshColumn,60000);
function refreshColumn() {
// ajax call ect. reset the timeout
timeout = setTimeout(refreshColumn,60000);
}
element.onmouseover = function(){
clearTimeout(timeout);
}
element.onmouseout = function(){
timeout = setTimeout(refreshColumn,60000);
}