Please test my JavaScript widget

Starglider · Post by **Starglider** » 2007-08-17 02:22pm

Darth Wong wrote:The thing seems to work anyway, so I must be missing something.

You're not, it only works by accident (specifically, the first attempt to set die 11 fails, and that stops the rolling slightly after it is supposed to stop).

That second test should be 'sixes2'. I changed the first routine when I split out the timer references, then I copied that to the second routine and forgot to change the variable name.

Sorry about that, careless of me, I wanted to get on with reading all the new threads so I rushed it out.

Post by **The Yosemite Bear** » 2007-08-17 02:54pm

Fails in SBC/Yahoo rip-off of IE7

which is basically IE7 with a new skin, and a few extra functions.

Starglider · Post by **Starglider** » 2007-08-17 03:46pm

Darth Wong wrote:PS. About the HTML, those lower-case tags and seemingly superfluous slashes in the input and img tags are actually required for XHTML Strict validation.

The problem with that is that your doctype is HTML4, specifically:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

not say

Code: Select all

<?xml version="1.0" encoding="ISO 8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

which all our pages are. As such I wouldn't expect your (original) document to pass XHTML strict anyway.

That said you seem to have changed the link to an XHTML one since I first downloaded it, and the new page is not working in IE either, probably because you are not declaring your vars as globals.

I would suggest preloading the dice images as well, either in Javascript or via hidden <img> elements, as it would avoid the dice row briefly disappearing in Firefox when you first roll the dice.

phongn · Post by **phongn** » 2007-08-17 03:50pm

Yeah, but if you use the <?xml header it can cause some older browsers (IE6) to go into legacy mode.

Post by **Darth Wong** » 2007-08-17 03:55pm

Starglider wrote:The problem with that is that your doctype is HTML4, specifically:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
not say
Code: Select all
<?xml version="1.0" encoding="ISO 8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
which all our pages are. As such I wouldn't expect your (original) document to pass XHTML strict anyway.

The old creationtheory.org webpages are HTML4, but if you look at the headers on the http://www.stardestroyer.net/Creationism-New/ website under construction, they're all XHTML Strict, and they do validate.

That said you seem to have changed the link to an XHTML one since I first downloaded it, and the new page is not working in IE either, probably because you are not declaring your vars as globals.

I'm starting to wonder how you downloaded it the first time, because it was XHTML from the beginning.

I would suggest preloading the dice images as well, either in Javascript or via hidden <img> elements, as it would avoid the dice row briefly disappearing in Firefox when you first roll the dice.

Yeah, that makes sense. I tried your JavaScript in a revised temporary version of the page at http://www.stardestroyer.net/Creationis ... -new.xhtml but I haven't tried preloads yet.

Starglider · Post by **Starglider** » 2007-08-17 03:58pm

phongn wrote:Yeah, but if you use the <?xml header it can cause some older browsers (IE6) to go into legacy mode.

The <?xml?> part is only really required for putting XHTML through some general (and picky) XML processing tools, or are a standards compliance nut.

I have put a corrected version of the script I made into your XHTML document here (I also added image preloading and a hack* to make it work in really old versions of IE, though I doubt that will be needed):

http://www.bitphase.com/starglider/dice/Page03.xhtml

* Specifically;

Code: Select all

var die=document.all?document.all(id):document.getElementById(id);

...which is needed for IE4 - but then you may not care about anyone antiquated enough to still be running IE4.

Starglider · Post by **Starglider** » 2007-08-17 04:04pm

Darth Wong wrote:I'm starting to wonder how you downloaded it the first time, because it was XHTML from the beginning.

Yeah I was wondering that, then I tried downloading it again in IE6 (which I normally only use for compatability testing - but I had it open to see why your original script wasn't working in IE). I kid you not - it changed the doctype declaration and forced almost (but not quite) all of the tags to uppercase, as well as mangling your HTML layout and using the page title as the filename instead of the original filename. Try it (if you have IE6 sitting around) - it's impressively awful coding (well, maybe not by Microsoft standards - if you've ever seen the HTML Word puts out in 'save as HTML' mode, I doubt Cthullu himself could do a better job of inducing insanity).

The second time I downloaded it I used Firefox and it worked fine, no mangling.

Post by **Darth Wong** » 2007-08-17 04:17pm

I can't believe Microsoft put out IE6 and was happy to leave that out there for how long? 5 years? There are whole websites devoted to working around IE6 CSS bugs alone.

Starglider · Post by **Starglider** » 2007-08-17 04:24pm

Darth Wong wrote:I can't believe Microsoft put out IE6 and was happy to leave that out there for how long? 5 years?

Until Firefox began to take market share there was no business incentive to update it - IE isn't a revenue earner (well, other than by setting Microsoft search as the default search and MSN as the default homepage). In fact if Firefox hadn't been around, IE7 would be Vista-only and exist only so Microsoft could say 'look at the extra web browsing features you get in Vista'. As it is the only reason IE7 doesn't work on Windows 2000 is because Microsoft is trying to force those users to buy a copy of Vista.

Post by **Darth Wong** » 2007-08-17 04:25pm

Starglider wrote:...which is needed for IE4 - but then you may not care about anyone antiquated enough to still be running IE4.

IE4?

My attitude toward NS4 and IE4 is to just ignore them

Feil · Post by **Feil** » 2007-08-17 08:25pm

Works fine on FF2 on WinXP.

Post by **Darth Wong** » 2007-08-19 05:26pm

What's the best way to preload images? I've heard that if you do it in the header, then if the webserver is slow to deliver an image, the whole webpage is held up: the user sees nothing but a blank screen until every single image is loaded. I've used webservers enough to know that it's not uncommon for one image to be held up for some reason. With just six dice maybe that's not a big issue, but I've since added a shitload of similar widgets all over the Probability pages for the poker examples, and there's more than 50 of those (playing cards).

Then again, maybe I should just accept that the screen jumps a bit when people click "start". It would certainly be less annoying than holding up the entire page for a bunch of preloads.

Starglider · Post by **Starglider** » 2007-08-19 06:19pm

Darth Wong wrote:What's the best way to preload images?

I usually just have an <IMG> tag with ' style="visibility:hidden" '. The other main way is to create image objects in Javascript; that lets you do something when the onLoad() event fires for that image (e.g. show a little progress bar), but that seems superfluous in this case).

Then again, maybe I should just accept that the screen jumps a bit when people click "start". It would certainly be less annoying than holding up the entire page for a bunch of preloads.

I implemented image preloading on this version of your page; the relevant part of the HTML is this;

Code: Select all

</head>
<body>
<div style="visibility:hidden">
 <img src="die1.gif" />
 <img src="die2.gif" />
 <img src="die3.gif" />
 <img src="die4.gif" />
 <img src="die5.gif" />
 <img src="die6.gif" />
</div>
<div id="header">

	<h1 style="margin:0">Creationism versus Science</h1>

which seems to work fine, though I suppose you could move that hidden div to the end of the page if you were really worried about it slowing page loading.

Post by **Beowulf** » 2007-08-19 06:21pm

You can load them up using javascript. This seems to be a decent article on the technique.

Post by **Darth Wong** » 2007-08-20 06:13pm

OK, I added image preloads to the page. The hidden div actually takes up a bit of screen space even though it's not visible, but it's not too bad. It just looks like there's an extra line-break at the end of the page. I couldn't use a Javascript onload command because the site uses a custom CMS with no facility to add customized onload statements for different pages, and I didn't want to bother coding that ability.

InnocentBystander · Post by **InnocentBystander** » 2007-08-20 07:15pm

Use display:none rather than visibility:hidden so the div doesn't take up any space.