Fixed code. Removes the "Calculating" delay and forces the style onto the tags instead of injecting style so it should show in Firefox/Chrome too.
Code:
// This is the FFXIV Server Launch Date
var BaseDate = new Date("September 22, 2010 00:00:00 GMT");
// Variables
var CurrentDate, LastDate, NextDate;
var i18n = {weeks: ['week', 'weeks'], days: ['day', 'days'], hours: ['hour', 'hours'], minutes: ['minute', 'minutes'], seconds: ['second', 'seconds']};
var i18c = {days: ['', ''],hours: ['', ''],minutes: ['', ''],seconds: ['', '']};
var units = {days: 24 * 60 * 60, hours: 60 * 60, minutes: 60, seconds: 1};
// This function adds the HTML to the banner, then initializes the leve timer.
function setupLevePage() {
var imgTag = document.getElementsByTagName('img')[0]
if (!imgTag) {
// Not loaded yet for some reason, add a timer and try again in a bit.
setTimeout(setupLevePage, 100);
} else {
var tableCell = imgTag.parentNode.parentNode;
var html = '<div style="filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5; padding: 5px; margin: 5px; background-color: #04002a; border: solid 1px #FFFFFF; width: 190px;">' +
'<div style="font-family: Tahoma; font-size: 11px; color: white;">' +
'<table cellpadding="0" cellspacing="0">' +
' <tr>' +
' <td style="width:36px; height: 47px;" valign="top"><img style="position: absolute;" src="http://imgur.com/6nAow.png" width="30" height="47" border="0"></td>' +
' <td valign="top"><div style="position: absolute; width: 150px;"><div style="position: relative; top:2px;">' +
' <div style="font-family: Tahoma; font-size: 11px; color: white; margin-bottom: 4px; font-weight: bold;">Levequest Reset Timer</div>' +
' <table cellpadding="0" cellspacing="0">' +
' <col width="65" />' +
' <tr><td style="font-family: Tahoma; font-size: 11px; color: white;">Last Reset:</td><td style="font-family: Tahoma; font-size: 11px; color: white;"><div id="TimeSince"></div></td></tr>' +
' <tr><td style="font-family: Tahoma; font-size: 11px; color: white;">Next Reset:</td><td style="font-family: Tahoma; font-size: 11px; color: white;"><div id="TimeUntil"></div></td></tr>' +
' </table>' +
' </div></div></td>' +
' </tr>' +
' </div>' +
'</div>';
tableCell.style.backgroundImage = "url('" + imgTag.src + "')";
tableCell.style.height = "245px";
tableCell.style.cursor = "pointer";
tableCell.vAlign = "top";
tableCell.onclick = function () { window.location = "index.php"; };
tableCell.innerHTML = html;
// Initialize
initLeveTimes();
}
}
// Automatically load without fiddling with body onload stuff.
setupLevePage();
// Recalculate!
function initLeveTimes() {
NextDate = new Date(BaseDate);
setTimeout(recalculateLeveTimes, 10);
}
// Calculate current Leve times using a 36 hour loop
function recalculateLeveTimes() {
var i = 0;
CurrentDate = new Date();
while (NextDate < CurrentDate) {
NextDate.setHours(NextDate.getHours() + 36);
}
LastDate = new Date(NextDate);
LastDate.setHours(NextDate.getHours() - 36);
setTimeout(updateLeveTimerDivs, 10);
}
// Update the divs with the calculated text.
function updateLeveTimerDivs() {
CurrentDate = new Date();
var TimeSince = CurrentDate - LastDate;
var TimeSinceSeconds = parseInt(TimeSince / 1000);
var TimeUntil = NextDate - CurrentDate;
var TimeUntilSeconds = parseInt(TimeUntil / 1000);
if (TimeUntilSeconds <= 0) {
initLeveTimes();
} else {
var SinceDiv = document.getElementById('TimeSince');
var UntilDiv = document.getElementById('TimeUntil');
if (SinceDiv) SinceDiv.innerText = getTimeStringCompact(TimeSinceSeconds);
if (UntilDiv) UntilDiv.innerText = getTimeStringCompact(TimeUntilSeconds);
if (SinceDiv) SinceDiv.title = LastDate;
if (UntilDiv) UntilDiv.title = NextDate;
setTimeout(updateLeveTimerDivs, 1000);
}
}
// This function takes a number of seconds and turns it into a formatted string.
function getTimeStringCompact(seconds) {
if (seconds < 1) {
return '00:00:00:00';
}
var hideEmpty = false;
var onlyLargestUnit = false;
var returnArray = [];
var value;
for (unit in units) {
value = units[unit];
if (seconds / value >= 1 || unit == 'seconds' || !hideEmpty) {
secondsConverted = Math.floor(seconds / value);
var i18cUnit = i18c[unit][secondsConverted == 1 ? 0 : 1];
returnArray.push(((secondsConverted + '').length == 2 || unit == 'weeks') ? secondsConverted : '0' + secondsConverted);
seconds -= secondsConverted * value;
if (onlyLargestUnit) {
break;
}
}
};
return returnArray.join(':');
}
I'm too lazy to actually install Firefox/Chrome to check though. Don't see the point of installing multiple browsers when IE8/9 work just fine for me.