Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating a changing Google doodle style header
    primarykey
    data
    text
    <p>I want to schedule a <code>&lt;div&gt;</code> 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.</p> <p>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.</p> <p>Thanks.</p> <p><strong>Edit:</strong> Added code which only works in FF and not in other browsers</p> <pre><code>&lt;div class='header-inner'&gt; &lt;script&gt; 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(&lt;div style='text-align:center; width:968px; margin-left:auto; margin-right:auto; position:relative; top:-0px; z-index:3;'&gt; &lt;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'/&gt; &lt;map id='_Image-Maps_9201209030919307' name='Image-Maps_9201209030919307'&gt; &lt;area alt='' coords='5,212,44,252' href='http://twitter.com/#!/freddieforaday' shape='rect' title=''/&gt; &lt;area alt='' coords='51,213,90,253' href='http://www.facebook.com/FreddieForADay' shape='rect' title=''/&gt; &lt;area alt='' coords='98,212,137,252' href='http://www.youtube.com/user/FreddieForADay' shape='rect' title=''/&gt; &lt;area alt='' coords='238,206,724,246' href='http://www.freddieforaday.com/' shape='rect' title=''/&gt; &lt;area alt='' coords='777,151,963,253' href='http://www.freddieforaday.com/' shape='rect' title=''/&gt; &lt;area alt='' coords='166,79,797,151' href='http://www.freedomrequireswings.com/' shape='rect' title=''/&gt; &lt;/map&gt; &lt;/div&gt;); document.write('&lt;style&gt;#header {display:none;}&lt;/style&gt;'); } &lt;/script&gt; &lt;div class='header section' id='header'&gt;&lt;div class='widget Header' id='Header1'&gt; &lt;div id='header-inner'&gt; &lt;div class='titlewrapper'&gt; &lt;h1 class='title'&gt; &lt;img src='http://2.bp.blogspot.com/-wlqM17mmGtI/UCwqdvlhrzI/AAAAAAAAB64/VUcGl3kFcxE/s1600/title.png' style='margin-bottom:-20px; padding-top:20px'/&gt; &lt;/h1&gt; &lt;/div&gt; &lt;div class='descriptionwrapper'&gt; &lt;p class='description'&gt; &lt;span&gt; &lt;/span&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt; </code></pre> <p>What I have:</p> <pre><code>&lt;div class='header-inner'&gt; &lt;div class='header section' id='header'&gt;&lt;div class='widget Header' id='Header1'&gt; &lt;div id='header-inner'&gt; &lt;div class='titlewrapper'&gt; &lt;h1 class='title'&gt; &lt;img src='http://2.bp.blogspot.com/-wlqM17mmGtI/UCwqdvlhrzI/AAAAAAAAB64/VUcGl3kFcxE/s1600/title.png' style='margin-bottom:-20px; padding-top:20px'/&gt; &lt;/h1&gt; &lt;/div&gt; &lt;div class='descriptionwrapper'&gt; &lt;p class='description'&gt; &lt;span&gt; &lt;/span&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt; </code></pre> <p>What I want to end up with: </p> <pre><code> &lt;div class='header-inner'&gt; &lt;div style='text-align:center; width:968px; margin-left:auto; margin-right:auto;'&gt; &lt;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'/&gt; &lt;map id='_Image-Maps_9201209030919307' name='Image-Maps_9201209030919307'&gt; &lt;area alt='' coords='5,212,44,252' href='http://twitter.com/#!/freddieforaday' shape='rect' title=''/&gt; &lt;area alt='' coords='51,213,90,253' href='http://www.facebook.com/FreddieForADay' shape='rect' title=''/&gt; &lt;area alt='' coords='98,212,137,252' href='http://www.youtube.com/user/FreddieForADay' shape='rect' title=''/&gt; &lt;area alt='' coords='238,206,724,246' href='http://www.freddieforaday.com/' shape='rect' title=''/&gt; &lt;area alt='' coords='777,151,963,253' href='http://www.freddieforaday.com/' shape='rect' title=''/&gt; &lt;area alt='' coords='166,79,797,151' href='http://www.freedomrequireswings.com/' shape='rect' title=''/&gt; &lt;/map&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload