Question

I want to schedule a <div> to appear for users at midnight at their location. So if a user in New York is on the site and it’s September 4th for them they won’t see it, but users in Australia will where it is past midnight on September 5th. It would also have to disappear at 23:59 for those in Australia.

Is there any way to do this through HTML/javascript? I am wondering how Google get their doodles to appear at midnight because this would be for a similar thing with my site header image. I am on a Blogger platform.

Thanks.

Edit: Added code which only works in FF and not in other browsers

<div class='header-inner'>
<script>
var today = new Date(),
d = today.getDate(),
m = today.getMonth() + 1,
y = today.getFullYear(),
date = d + '/' + m + '/' + y,
specialDate = '5/9/2012';

if (date == specialDate) {
document.write(<div style='text-align:center; width:968px; margin-left:auto; margin-right:auto; position:relative; top:-0px; z-index:3;'>
<img alt='' border='0' height='258' id='Image-Maps_9201209030919307' src='http://2.bp.blogspot.com/-7EbtRf3eD6k/UBfBJKNkG8I/AAAAAAAABww/FDr_YNqs6zM/s1600/freddieforadayheader.png' usemap='#Image-Maps_9201209030919307' width='968'/>
<map id='_Image-Maps_9201209030919307' name='Image-Maps_9201209030919307'>
<area alt='' coords='5,212,44,252' href='http://twitter.com/#!/freddieforaday' shape='rect' title=''/>
<area alt='' coords='51,213,90,253' href='http://www.facebook.com/FreddieForADay' shape='rect' title=''/>
<area alt='' coords='98,212,137,252' href='http://www.youtube.com/user/FreddieForADay' shape='rect' title=''/>
<area alt='' coords='238,206,724,246' href='http://www.freddieforaday.com/' shape='rect' title=''/>
<area alt='' coords='777,151,963,253' href='http://www.freddieforaday.com/' shape='rect' title=''/>
<area alt='' coords='166,79,797,151' href='http://www.freedomrequireswings.com/' shape='rect' title=''/>
</map>
</div>); 
document.write('<style>#header {display:none;}</style>'); 
}
</script>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<img src='http://2.bp.blogspot.com/-wlqM17mmGtI/UCwqdvlhrzI/AAAAAAAAB64/VUcGl3kFcxE/s1600/title.png' style='margin-bottom:-20px; padding-top:20px'/>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'>
<span>
</span>
</p>
</div>
</div>
</div></div>

What I have:

<div class='header-inner'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<img src='http://2.bp.blogspot.com/-wlqM17mmGtI/UCwqdvlhrzI/AAAAAAAAB64/VUcGl3kFcxE/s1600/title.png' style='margin-bottom:-20px; padding-top:20px'/>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'>
<span>
</span>
</p>
</div>
</div>
</div></div>

What I want to end up with:

    <div class='header-inner'>
<div style='text-align:center; width:968px; margin-left:auto; margin-right:auto;'>
<img alt='' border='0' height='258' id='Image-Maps_9201209030919307' src='http://2.bp.blogspot.com/-7EbtRf3eD6k/UBfBJKNkG8I/AAAAAAAABww/FDr_YNqs6zM/s1600/freddieforadayheader.png' usemap='#Image-Maps_9201209030919307' width='968'/>
<map id='_Image-Maps_9201209030919307' name='Image-Maps_9201209030919307'>
<area alt='' coords='5,212,44,252' href='http://twitter.com/#!/freddieforaday' shape='rect' title=''/>
<area alt='' coords='51,213,90,253' href='http://www.facebook.com/FreddieForADay' shape='rect' title=''/>
<area alt='' coords='98,212,137,252' href='http://www.youtube.com/user/FreddieForADay' shape='rect' title=''/>
<area alt='' coords='238,206,724,246' href='http://www.freddieforaday.com/' shape='rect' title=''/>
<area alt='' coords='777,151,963,253' href='http://www.freddieforaday.com/' shape='rect' title=''/>
<area alt='' coords='166,79,797,151' href='http://www.freedomrequireswings.com/' shape='rect' title=''/>
</map>
</div>
    </div>

Answer 1

In the end, I opted for…

<script type='text/javascript'>
var today = new Date(),
d = today.getDate(),
m = today.getMonth() + 1,
y = today.getFullYear(),
date = d + '/' + m + '/' + y,
specialDate = '5/9/2012';

if (date == specialDate) {
document.getElementById("doodle").style.display = "block";
document.getElementById("defaultheader").style.display = "none";
} 
else {
document.getElementById("doodle").style.display = "none";
document.getElementById("defaultheader").style.display = "block";
} 
</script>

I then put my custom doodle code inside

<div id='doodle'>

and my default everyday header inside

<div id='defaultheader'>

It works in all browsers and is simple to customize.

Big thanks to David Thomas for all his help!