Hehee... will you look a that? I totally forgot to finisht the Script Tag. I don't even have a closing '>'. I guess that's what I get for using Notepad while on vacation. My hotel connection here isn't super conducive to programming. Thanks for noticing that. I'll get it fixed.

it SHOULD be:


<script language="javascript" src="settings/ie/files/IEScript.js"></script>
</head><script language=javascript>

I hate to bump an ancient post, but am having trouble getting this to work. I got this working if I put the javascript directly into the layout file, but the moment I put it in an external js and source that in, nothing shows on the page.

I got this fixed with the help of someone on another forum.

What's interesting is that the timer counts down in real time on both IE6 and IE7 when I change between pages, such as the Admin, Roster, Forums, etc. However, with Firefox3, it only shows on the initial load and then disappears when I start viewing another page.

I ended up ditching this javascript. Too many errors, and it still had issues even after someone helped me fix it. If there was no event scheduled, it threw up errors in IE.

Wow, I am just browsing through and I see all the input on this. glad some people found it useful.

As for your problem Jedis just use an if/else to check to see if the string is empty.

place this just after the "document.write()" in my code.

if(document.getElementById("raidingtimer").innerHTML != '') {

// place all the remaining code here

}

Unfortunately I never used this code myself, so I have no idea what the value of "document.getElementById("raidingtimer").innerHTML" would be if there was nothing scheduled.

So, looking at the code I see an <a href=""> is used in the countdown. If nothing is scheduled that may sill be there but blank. So if the above doesn't work try this just after the "var maincontent" line

if(maincontent.getElementsByTagName('a').innerHTML != '') {

//place all the remaining code here

}

hope that helps

PS. looking over that code that was back before I knew jack about javascript. I may take and rewrite it to clean it up as well make it more versatile and cross browser compatible.

That would be awesome if you do take the on project of updating it.

I'm going to leave it off my guild's site for now. It's a cool thing to have on there, but I'm done fighting with it. There was something else I had to do too in order to fix another error. Something about not having a function named the same as a div or something. And I needed to put the word 'var' in front of all of the variables to get rid of another error.

It worked great in Firefox, didn't show any errors at least. But with IE, it was finicky and displayed different javascript errors, depending on which version of IE I was using at the time.

Recently, to make exactly this functionality easier to deal with, I've added some commands so that you don't have to deal with the issue of parsing the countdown output, I've added a few new commands for you guys to work with.

Here's the example

Use this HTML on your page:

<span id=countdown><!--System:CountdownSeconds--></span>
<span id=countdownuntil></span><br />
<span id=nextevent><!--System:NextEventNameOnly--></span>

Then put this javascript on your page (likely near the bottom):

<script language=javascript>
	var total_seconds;
	function startcountdown()
	{
		var sectext = dge("countdown").innerHTML;
		if(sectext=="")
			return;
		secs = parseInt(sectext);
		total_seconds = secs;
		calc_countdown();
	}

	function calc_countdown()
	{
		var secs = total_seconds;
		var relationship = "until";
		
		if(secs < 0)
		{
			relationship = "since";
			secs = Math.abs(secs);
		}

		days = Math.floor(secs/(24*60*60));
		secs -= days*24*60*60;
		hours = Math.floor(secs/(60*60));
		secs -= hours*60*60;
		mins = Math.floor(secs/60);
		secs -= mins*60;
		dge("countdownuntil").innerHTML = relationship;
		dge("countdown").innerHTML = sprintf("%d day(s), %d:%02d:%02d",days,hours,mins,secs);
		setTimeout("calc_countdown()",1000);
		total_seconds--;
	}

	startcountdown();
</script>

This works in pretty much everything (tested as far back as IE5.5 and it works). You can see it in action on http://www.poopinashoe.com

<span id=countdown><!--System:CountdownSeconds--></span>
<span id=countdownuntil></span><br />
<span id=nextevent><!--System:NextEventNameOnly--></span>

How do I get the output to appear all on one line? It's getting cut off.

"0 days, 0 hours, 58 minutes, and 11 seconds" is all that shows and the rest isn't there. It needs to all go on one line to display correctly on my site.

Also, can it hide the numbers until it's formatted? Right now it shows a large number until the javascript loads to change it to something else.

Remove the <br> tags. Those are line-breaks. That should fix that.




Sure. You would want to add

style='display:none' to the <span> tags, then add

to the javascript, in the "startcountdown()" function the following:

dge("countdown").style.display='';
dge("countdownuntil").style.display='';
dge("nextevent").style.display='';

Yeah, taking out the br tag was the first thing I tried. I thought the span or div was pushing them to a new line.

I'm trying to implement the new timer described a couple posts above. The timer works, but the stuff after that is missing. I think this is the relevant code... Take a look at my site to see what it's doing.

<span id=countdown style='display:none'><!--System:CountdownSeconds--></span>
			<span id=countdownuntil style='display:none'></span>
			<span id=nextevent style='display:none'><!--System:NextEventNameOnly--></span>
			
		<script language=javascript>
			var total_seconds;
			function startcountdown()
			{
				var sectext = dge("countdown").innerHTML;
				dge("countdown").style.display='';
				dge("countdownuntil").style.display='';
				dge("nextevent").style.display='';
				
				if(sectext=="")
					return;
				secs = parseInt(sectext);
				total_seconds = secs;
				calc_countdown();
			}

			function calc_countdown()
			{
				var secs = total_seconds;
				var relationship = "until";
			
				if(secs < 0)
				{
					relationship = "since";
					secs = Math.abs(secs);
				}

				days = Math.floor(secs/(24*60*60));
				secs -= days*24*60*60;
				hours = Math.floor(secs/(60*60));
				secs -= hours*60*60;
				mins = Math.floor(secs/60);
				secs -= mins*60;
				dge("countdownuntil").innerHTML = relationship;
				dge("countdown").innerHTML = sprintf("%d day(s), %d:%02d:%02d",days,hours,mins,secs);
				setTimeout("calc_countdown()",1000);
				total_seconds--;
			}

			startcountdown();
		</script>

CSS:

#countdown
{
	position:absolute;
	left:40%;
	bottom:8px;
	font-size:10pt;
	text-align:center;
	font-weight:bold;
	z-index:400;
}

Chops, any chance you had a moment to look at this?

Thanks

Still need help with this.. it's hiding behind the show stats part on left side of site.

Looking into it now.

Alrighty, looking at your code, you actually have that stuff inside the <div id=background> tag.

You'll want to place it inside just the "body" tag.

Furthermore, you'll likely want to make a surrounding <div> and place that one, since a <span> is mostly an inline formatting tag.

Ok, I did all of that and it's just showing the time now... 'until and the name of the event is missing.

<div id=count>

<span id=countdown><!--System:CountdownSeconds--></span>
<span id=countdownuntil></span>
<span id=nextevent><!--System:NextEventNameOnly--></span>

</div>
 
<div id=background>
snip....

At the end of the layout file I have this:

<script language=javascript>
		var total_seconds;
		function startcountdown()
		{
			var sectext = dge("countdown").innerHTML;
			if(sectext=="")
				return;
			secs = parseInt(sectext);
			total_seconds = secs;
			calc_countdown();
		}

		function calc_countdown()
		{
			var secs = total_seconds;
			var relationship = "until";
				
			if(secs < 0)
			{
				relationship = "since";
				secs = Math.abs(secs);
			}

			days = Math.floor(secs/(24*60*60));
			secs -= days*24*60*60;
			hours = Math.floor(secs/(60*60));
			secs -= hours*60*60;
			mins = Math.floor(secs/60);
			secs -= mins*60;
			dge("countdownuntil").innerHTML = relationship;
			dge("countdown").innerHTML = sprintf("%d day(s), %d:%02d:%02d",days,hours,mins,secs);
			setTimeout("calc_countdown()",1000);
			total_seconds--;
		}

		startcountdown();
</script>

#countdown
{
	position:absolute;
	left:40%;
	top:295px;
	bottom:8px;
	font-size:10pt;
	text-align:center;
	font-weight:bold;
	z-index:400;
}

Please help me get this working and I'll promise I'll never bug you about it again! I'm not sure about the CSS stuff. I played with the 'top' line to get it centered right from the top of the page. Dunno about the 'left' part and the rest of it.

If you click a link in the top menu, it shows up for a split second in the upper left corner of the site but then poofs.

Alrighty, you'll also want to manually position that div in the CSS.

something like:

#count
{
position:absolute;
text-align:center;
top:100px;
left:0px;
width:100%;
height:30px;
text-align:center;
z-index:1000;
}

That would place the container div 100 pixels from the top, 30 pixels high, and center the countdown.

Once you do this, make sure you remove the position attributes (position, left, top, bottom, z-index, etc) from the #countdown CSS, since that would be unnecessary (you're already manually positioning the container div).

Thanks Chops. It's working great now. I see I have much to learn... Maybe I'll take a web development class...

Nah. Most of this stuff is actually just CSS stuff.

The basic thing for divs and spans (which was also quote confusing for me at first), is this:

A span is for inline formatting. You want to format a few words or letters in a line, you use a span (like <span style='color:red;font-weight:bold' .

A div is a container with a height, width, and can be placed. Without positioning or height/width, it acts like a paragraph (the html <p , but with the positioning, it uses what's called the box model. It's a box on it's own and is regularly used as a container for other elements and formatting.

I would recommend this book: The Ultimate CSS Reference

This is actually the book I use, even still for looking stuff up. It has a basic tutorial in the beginning, and the rest is a reference manual. CSS concepts are pretty simple, so the tutorial doesn't need to be terribly long (maybe 40-50 pages).

If you're serious about web stuff, I strongly recommend it.