We Keep Coding

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

Image flickering with setInterval() function

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 ?

Jquery Mouse Over Movement conflicting with other animate function

im currently working on my first website- but ive come to a slight problem with this piece of jquery... The page is:
http://beelinetest.site50.net/the_arts_and_culture_in_worcester.html
I have a rollover over effect throughout the completed pages on my website, (when you hover over the link, the word slightly moves to the right) this can be better seen on the events programme page.
But on this page ive got a lot of jquery going on... When clicked the word moves to the left off the page. But because of having the mouse over, (moving the word back to the right on release) the word shoots back on screen to its original place.
Please feel free to look into my code, id really appreciate it- i know you guys are great, so thanks in advance! Tom
Here are the two conflicting codes-
$("#exploretext").click(function(){
$(".moveeverythingleft").animate({"left":"-220px"}, 400);
return false;
});
$("#exploretext").hover(function(){
$("#exploretext").animate({"left":"227px"}, 50);
}, function(){
$("#exploretext").animate({"left":"217px"}, 150);
});

This will unbind your hover effect after a click event :
$("#exploretext").on("click",function()
{
$(this).off("hover", "**");
$(".moveeverythingleft").animate({"left":"-220px"}, 400); return false;
});
$("#exploretext").on('hover',function()
{
$("#exploretext").animate({"left":"227px"}, 50); }, function()
{
$("#exploretext").animate({"left":"217px"}, 150);
});
});
You may have to rebind it later, or to bind another, it depends on what you want to achieve.
It may be way easier to use another animate function, using += :
$("#exploretext").animate({"left":"+=10px"}, 50, 'linear');
edit :
I'm reading your code, the markup and the css is a bit of a mess, I think it makes your work harder than it should be.
I would advise you to try first to clean the HTML and the CSS, then to handle the JS part.

what u can do is store the state of the button in some variable like ..
var position = "LEFT OR RIGHT";
then when u send the button to the left change the variable to left.
and in the hover event check the value and then if the position is left then dont execute whole of the event and if the position is right then execute the event.
function OnExploreClick(){
position = 'left';
//ur code
}
function OnUnExploreClick()
{
//put the button to right side// ur code
then position = 'right';
}
function OnHover()
{
if (position == 'right')
{
//execute ur code
}
}

silentScroll will be undone after page is loaded

After my jQuery mobile site is loaded, I like to scroll to the position of a div. Works using this code
function changeViewport(){
var errorMsg = $('.dataerror').first();
if(errorMsg != null) {
var newPosition = errorMsg.offset();
$.mobile.silentScroll(newPosition.top);
}
}
I call the function on $(document).ready, but after calling the function and silentScroll to the position it seems the framework autoscroll back to the top of the page... Anyone know how to prevent this behaviour? (I also tried events pageinit, pageshow...)
Do I have to overwrite a function or trigger another event? Any help or suggestion is welcome :)
cheers.

After struggling with this myself, I seem to have found the cause as well as a workaround. It appears that the animation used in changePage is taking precidence over the silent scroll. You can read more about this here. On the same page, the comments also begin to discuss different events, such as pagebeforeshow or pageaftershow - unfortunately these yielded no results for me.
The workaround I have found was to wrap the .silentScroll in a timeout of a half a second. It looks a bit choppy, but it seems to be working for me. Hope this helps.
Try This:
function changeViewport(){
var errorMsg = $('.dataerror').first();
if(errorMsg != null) {
var newPosition = errorMsg.offset();
setTimeout(function(){$.mobile.silentScroll(newPosition.top)}, 500);
}
}

Scrolling when idle?

Can anyone point me to an example of code for a page that begins to automatically scroll when the user is idle for an amount of time? I think this is slightly beyond my skill set. I think JQuery or something similar might be appropriate but I just can't seem to figure it out. I'm designing a site for the nonprofit I work for and we don't have the money to hire a programmer. I wouldn't ask anyone to code anything for me, just to point me in the right direction. Thank you so much.
Julie K.

Here is something quick and dirty that will do what you want. I currently have it set to 2 seconds idle time, but you can change that as you wish.
var now = new Date();
setInterval(function(){
var nnow = new Date();
if(nnow.getTime() - now.getTime() >= 2000)
$('body').animate({scrollTop: '+=50'}, 2000, 'linear');
}, 2000);
$(document)
.mousemove(function(){ now = new Date(); $('body').stop(); })
.keypress(function(){ now = new Date(); $('body').stop(); });
Edit: added .stop in mousemove and keypress events to stop scrolling immediately when user moves mouse or presses a key, rather than waiting for animation to complete.

jQuery would definitely help here.
You should handle the keyboard and mouse events to catch user activity.
Then, whenever you see activity, call setTimeout to make your code run 2 minutes after the activity. Save the return value of the setTimeout call in a global variable, and call clearTimeout on it before setTimeout to clear the last timeout.
For example: (Using jQuery and the scrollTo plugin)
var timeout = false;
$(document.body).bind('keydown keyup mousemove mouseup', function() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(userIsIdle, 120000); //120,000 milliseconds
});
function userIsIdle() {
$(document.body).scrollTo('100%', 100000);
}

you could use a plugin like this, and set it to use JavaScripts setTimeout() function to trigger it, which could reset every time you detect certain user actions, such as keyDown and Click.

First you have to define what you mean by IDLE, I will assume that the user is not moving mouse for x amount of time.
Here are the steps pseudo js.
var lastTime=0;
var threshold=60000 ; // 1min
var howOftenToCheck = 1000;//1 sec
var inter = 0;
inter = setInterval(function() {
var delta=lastTime-currentTime;
if(delta>threashold){
clearInterval(inter);
window.scrollTo(xpos,ypos);
}
}, howOftenToCheck);
This should give you a general idea.

use the following jQuery functions to scroll the page's body
// Scrolling Down
$('body').animate({
scrollTop: '-=300px'
}, 2000);
// Scrolling Up
$('body').animate({
scrollTop: '+=300px'
}, 2000);

I think onBlur event is what you're looking for, so you can do like this :
<body onblur="$('html, body').animate({scrollTop:0}, 'slow');">
You can change the 0 to the vertical position where you want to scroll to.
Note: this will fire the scrolling when you go to other page or tab or where you can't see the page.