We Keep Coding

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)

Refresh multiple elements in a div

I am using the the following function to load content in a div and refresh the content in that div every 10 seconds:
$(function () {
var timer,
updateContent;
function resetTimer() {
if (timer) {
window.clearTimeout(timer);
}
timer = window.setTimeout(updateContent, 10000);
}
updateContent = function () {
resetTimer();
$.get('modules/b.php', function (data) {
$('#main').html(data);
});
};
updateContent();
$(document.body).on('mousemove keydown', resetTimer);
});
I have a contact form in the loaded content, that I, for obvious reasons, would like to exclude from the refresh. Is this possible, or is it otherwise possible to declare the divs that I would like to refresh?

1) You can save the values you need before the ajax call, and set them again after. 2) If this messes with the user cursor, you can use absolute positioning and not have the entry box be a descendant of #main. 3) Or the obvious way: you can restructure the call where you are not updating #main, but only what you need.
Other than that, there is not a way to magically exclude an item from the html overwrite.

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

jQuery: Timeout/Delay with a notification function?

I wrote the following simple function that takes two parameters mostly coming from another function returned with json from the server.
var timing = 10000;
function notificationOutput(type, message) {
console.log('output now!');
var note = $('.notification');
note.css('display', 'none');
if ( type == "success" ) { note.removeClass('warning').addClass('success'); }
if ( type == "warning" ) { note.removeClass('success').addClass('warning'); }
note.find('.message').html(message);
note.slideDown( function() {
note.delay(timing).slideUp();
});
}
All it does is simply sliding down a bar from the top of my page putting out a message (either success or warning). The timing variable is for the notification-bar to stay for 10 seconds. So when the function is triggered I want the bar to slideDown(), hold that position for 10seconds and than slideUp() again.
However right now when the function is triggered there is a weird timeout happening till the notification bar appears. That means when the function is fired the console.log() output I have in there right now is logged immediately in my JS-console but the slideDown() takes a few seconds longer to appear! Why is that?
I want the slideDown() to happen immediately (at the same time as the output now is logged in the console). Why is there a delay happening?
Thanks for your help!

Nothing obvious there. I would try trimming the code down until it slides down as expected. Remove the callback, remove the html-set, remove the success/warning class-setters, select the note-element before outputting to the console, replace the slide with an immediate show, etc.
Also try calling .stop(true,true) on the note first: note.stop(true,true).slideDown();. This is in case it is busy with some other animation and the slide down is being queued.

Try this
note.slideDown().delay(timing).slideUp();

i think that the problem might be in the easing function used by the slideDown which is swing by default (which is logaritmic). try using linear and maybe try using a faster slidedown time
note.slideDown(400, 'linear').delay(timing).slideUp(400, 'linear');

You are not passing a value for duration to slideDown. Try:
note.slideDown(1000, function() {
note.delay(timing).slideUp();
});

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