How to change the CSS of a DIV after 5 seconds?

You can start a timer for 5 seconds and execute the call back function. Your codes are the same, not sure what you want to change but you can achieve that using myfunction.

var timer = new Timer();
timer.interval(5000)
.addCallback(myfunction)
.start();

@raysonlee:

When you speak of 'myfunction'...would the call look something like this:

var timer = new Timer();
timer.interval(5000)
.addCallback(myfunction)
.start();

myfunction = function(){
blah blah blah
}

right, what do you want to change for the DIV?

@raysonlee:

Wanted to change the div's background color and contents.

Take a look at this example I wrote using jQuery:
http://jsfiddle.net/E3hyu/9/

Refer to sample here http://www.ezineasp.net/post/Javascript-Code-to-Change-Div-Object-innerHTML.aspx for changing innerHTML and background-color with Javascript.

<div id="change_me" style="width:500px; background-color:#000000;">
...test...
</div>

appears to be identical to

<div id="change_me" style="width:500px; background-color:#000000;">
...test...
</div>

so the client will probably observe no change at all.  Why bother?

@Ray_Paseur:

Hi Ray...the non-change in my DIV examples above was just a typo.  The change should be to the background to prove the concept.

OK, I get it.  The answer from Roads_Roads at ID:37092596 looks particularly apt.

All the best,
~Ray

@ALL:

OK - this script does basically what I want but, I'd like to modify it.  The script visually shows the countdown on the screen.  I don't need it to do that.

It allows me to set a time 'i', pause increment 'p', and a specify a second function after the countdown completes 'f'.

All i need this script to do is just countdown and fire the second function without visually representing anything on the screen.  Can anyone help me modify this script to count down without showing anything on the screen, then fire the second event?



function startCountDown(i, p, f) {
// store parameters
var pause = p;
var fn = f;
// make reference to div
var countDownObj = document.getElementById("hidden");
if (countDownObj == null) {
// error
alert("div not found, check your id");
// bail
return;
}
countDownObj.count = function(i) {
// write out count
countDownObj.innerHTML = i;
if (i == 0) {
// execute function
fn();
// stop
return;
}
setTimeout(function() {
// repeat
countDownObj.count(i - 1);
},
pause
);
}
// set it going
countDownObj.count(i);
}

updatePassword2 = function(){ // Updates the contents of a div            
  var url = 'scripts/users.php';
  var pars={action:'check', password:'', nuid:''};
  new Ajax.Updater('password_update', url, {method:'get', parameters: pars});
}

perfect. thanks.