AJAX problems in IE

Oliver Brown
— This upcoming video may not be available to view yet.

One of the things I’m working on right now (at work interestingly enough) uses a fairly simple JavaScript function that takes a url and an element id and replaces the content of that element with whatever the url returns.

This worked well until I started getting an odd error from IE - Unknown runtime error. Firefox and Opera both handled this fine. After some fiddling I discovered the problem was the type of element I was replacing into - Internet Explorer doesn’t like you replacing the innerHTML of certain elements.

So far I’ve found TR and TBODY don’t work (and I’d guess THEAD and TFOOT too).

StepMania

Oliver Brown
— This upcoming video may not be available to view yet.

Think of this as an introductory post into something I may mention more in the future. This way I can just send people here instead of explaining everything from scratch every time :P

Ever heard of Dance Dance Revolution (Dancing Stage in Europe)? Well it’s a funky arcade game you control by “dancing”. Arrows scroll up the screen and when they reach the top you press the corresponding button.

The really cool thing is a an open source PC version of it called StepMania. Generally StepMania has more features and allows you to add as many songs as you want (assuming you can get the media files and step charts). In fact there are arcade machines around that are actually a computer running StepMania inside a DDR cabinet (which is a little overwhelming to play because of the sheer number of songs available.

Looking good in every browser

Oliver Brown
— This upcoming video may not be available to view yet.

Okay, “every” is overstating it. The site has always looked how it should in Firefox (and Mozilla variants) and Opera as well as almost right in Internet Explorer. And although I didn’t look in depth it seemed fine on Safari when I used a friend’s Mac.

Well now it looks how it should in IE too. Although I did have to do a pretty nasty hack of sorts (but I remain XHTML compliant).

IE supports “conditional comments”. They’re HTML comments in a specific format which IE interprets as special. Overall this is quite a clever idea since the other browsers see them as normal tags and technically my site isn’t using any no standard markup.

The dodginess in IE (if you hadn’t noticed or don’t use IE) is that the graphic behind the Google links bar was 1px to the left. So all I did was put a style definition inside an IE conditional comment to nudge it to the right: <!--[if IE]><style> #linksbar { background-position: 1px 0 } </style><![endif]-->

Apparently you can do cleverer things with the comments like so conditionals on specific version of IE but that’s getting a little silly and if you want that much control it’s probably better to do it on the server so you don’t send every version of a page to every browser…

For more information, check out conditional comments on Quirks Mode.

Going mobile

Oliver Brown
— This upcoming video may not be available to view yet.

Screenshot of OliverBrown in Opera SSR

Screenshot of OliverBrown in Opera SSR

Following my recent discovery of Opera Mini I fiddled around with stylesheets trying to make the site presentable on mobile phones (well ones running Opera at least). And I seem to have success. The image on the left is how it the page appears in Opera’s small screen mode using the “handheld” stylesheet I defined. That’s about 240px wide but it displays okay at anything down to 176px (the screen width of the Nokia N70). Since the modifications are only to the stylesheet the page is still the same size as before (which is rather bloated) Of course if you use Opera Mini this isn’t a problem since it formats and compresses the page before it gets to your phone. For anyone wanting to do something similar, here are some of the things I did specifically:

  • Lower the font size. I’m not sure whether proportional fonts are ideal here - I just set body { font-size: 10px }.
  • Remove the adverts. Most of the adverts are fixed sizes that are too big for mobile phones. Large ad networks probably won’t pay for mobile visitors anyway. Remove them by giving them a display: none CSS attribute.
  • Set a maximum size for images. All the images have max-width: 95% to stop them needing to scroll.
  • Cut down the margin and padding for basically everything. Especially lists.
  • Hide redundant navigation. Most sites have multiple menus that aren’t necessary and a pain to scroll through. In my case I scrapped the calendar.
  • Resize form elements especially textareas. I’m not sure whether it’s practical to try and post from a mobile phone but I don’t want it to be impossible.
  • Use a sans-serif font - they’re more readable at small sizes. More subjective and only an issue really if you can’t read the serif font.

A final note (in case you didn’t guess): the page is using normal XHTML. Not XHTML Basic, cHTML or WML. Although I haven’t tested it on a real phone Opera claims it will display it fine (which could mean it only works in Opera Mini - but it’s free and apparently better than any other mobile browser out there). cellphones, mobile phones, mobile browsing, browsers

Comment spam 4

Oliver Brown
— This upcoming video may not be available to view yet.

First of all I should point out that I think I now have 4 posts called “Comment spam”. I just got 200 spammy comments in 12 hours. Luckily most of them are coming from the same IP address so they were easy to deal with.

Fahrenheit Indigo Prophecy

Oliver Brown
— This upcoming video may not be available to view yet.

I just bought one of the games I mentioned a couple of weeks ago (actually I bought both but I’m only talking about one right now): Fahrenheit (Indigo Prophecy in America). You should probably read the other post first.

To summarise, the game is well cool. You don’t need fast reflexes or a large amount of skill as such but you do need to be able to think fast. A lot of the time you have a time limit to do something which is three times longer than you actually need - but it includes the time needed to work out what to actually do. Failing to do something isn’t always as bad as you think since the story seems quite flexible: there are times when you realise just what an impact your past actions have on the story.

The story itself has a lot of depth. While trying to solve the murder (alternately controlling the murderer and two detectives) you also have to deal with relationships of the main characters which adds more to the game than you’d think. In fact there are a lot of mundane task to you have to complete that are surprisingly fun.

Graphically the game isn’t that impressive, at least intrinsically. But the clever use of split screen during important events adds a certain style and grandeur to it. The sound for the most part is simple but many moments have an eerie sound track reminiscent of Silent Hill just to heighten tension.

This game will probably appeal most to point-and-click adventure lovers and anyone who loves story over action. But I strongly suggest everyone have a look at it (if you’re in the UK get it from Game; you have 10 days to take it back if you don’t like it :P).

Random traffic according to Analytics

Oliver Brown
— This upcoming video may not be available to view yet.

Firstly, after using it for a week I’ve concluded Google Analytics is good. I can’t reasonable access any of it on a dial-up connection but that should be an increasingly small problem. (Increasingly small? Almost as good as “it’s looking more and more less likely”.)

One thing it reveals is random search engine traffic I get for almost no reason. I posted about the April fools gag on GameFAQs and I’m now on the second page of Google if you search for GameFAQs. The funny (although understandable) bit it is that it’s my internal search page for GameFAQs that is actually in the results.

Language learning ideas - bringing it all together

Oliver Brown
— This upcoming video may not be available to view yet.

This post, like many of my others on the topic ramble a bit. You have been warned :P

Any regular readers I might have will know how much I like Pimsleur products for learning experience. I believe the basic idea can be greatly enhanced with computers. I did in fact try a short time ago but suffered from a lack of voice talent which is where speech synthesis could be useful.

Synthesised voices can be imported into the current system (which at the moment I wouldn’t be able to demonstrate since the voices need to be licensed if they are to be distributed) just by recording them to audio. This solution would allow maximum support since any browser with audio capabilities could use the system.

There is an advantage to using the IE plugin though (or any other system supporting SALT) - speech recognition. It should be entirely possible to actually have a browser based system that checks your pronunciation which would instantly make it better than any system out there.

Quite why none of the companies that create these synthetic voices have tried to develop a system like this I don’t know…

Cepstral voices

Oliver Brown
— This upcoming video may not be available to view yet.

I just thought I’d provide examples of the higher quality voices available for speech synthesis.

They aren’t perfect but they’re a lot better than the voices that come with Windows XP.

Cepstral voice demos

One year anniversary

Oliver Brown
— This upcoming video may not be available to view yet.

Ooooh, the blog has been up for a whole year :D