Knowing what's on your page

So in work the other day I was asked to help a colleague with an interesting error he was experiencing. In IE he would find on usually the second page load of the site IE would bomb out with an exception: "Internet Explorer cannot open the Internet site", "Operation aborted".

Now I had seen this error before and usually it was down to people forgetting or even not knowing that they had to wait for the DOM to finish loading before trying to fire off JavaScript that manipulates or uses the DOM.

Of course most of us know we can solve this by using event listeners to attach functions to load on the window.load event or my personal favourite by using some sort of .onDOMReady method. Just like the one in jQuery or YUI.

Now in this case it looked like my colleague had set up his JavaScript properly, it was using the YUI onDomReady so this wasn't the issue, so where was the problem. We ended up turning to his JavaScript JSLint'n it to see if there was something I had missed but still the code eventually validated and we still had the IE error.

So we scratched our heads and then by chance I noticed that the page with the error had a flash movie embedded into it. Now I'm very much in the camp of not liking how many developers embed flash into a page and I always use UFO (Unobtrusive Flash Object. It was at this point my colleague mentioned that he was also using UFO after seeing me use it in a few projects, as it allowed him to put alt content in place for non Flash peeps. It was at this point I realised what had happened.

In case your not fully knowledgeable on UFO, "UFO is a DOM script that detects the Flash plug-in and embeds Flash objects (files with the .swf extension)." What you can then do is replace the contents of one Div Container, say one which contains alternative content for non flash users, with a Flash object. It does this using JavaScript and I find it to be the only way of allowing flash on any sites that I work on.

Now as this JavaScript manipulates the DOM, i.e remove the contents of our Flash Div and then put our Flash object into it, it must run once the DOM is ready otherwise we run the risk of trying to manipulate the DOM before it's even ready. This is what our page was trying to do.

Now I mentioned earlier that my colleague had wrapped his JavaScript functionality into a onDomReady, now what he didn't check and I initially missed was what else was in the page and what other JavaScript was loading. In this case his new functionality was causing the page to load a little slower which meant that the UFO code, which wasn't wrapped in a nice onDomReady, was firing before the DOM had finished loading. Such that the Flash DIV wasn't actually available at the point that the UFO code was trying to run.

So we simple moved the UFO method call into our onDomReady function and we were sorted. This example clearly shows that especially when writing JavaScript you need to be aware of what else is on your page and in particular what else is interacting with it. Before writing some JavaScript that does X Y and Z take alook at the page or even site and see what else is running / loading. Not only will this allow you to ensure your code doesn't break or break anything else but you will also find if there is some code you may want to reuse.

For example I often find myself writing JavaScript that uses the YUI library as this is what i have used most however recently I was writing some new functionality for a site and started to use YUI as its what I use most, got the functionality working on my example page, then went to put it into the site and found that it was already using JQuery. I then had to go back and quickly change my code so that it used JQuery instead of YUI as using more than one JavaScript library in my opinion is stupid and means that the end user has to download far more and it will end up with page load times being sacrificed.

So when writing JavaScript ensure you know whats going on in your page before writing your code, otherwise you may end up with a situation like my colleague did or you may end up re writing you code like I did. And you may find that your work load is actually reduced as you may be able to reuse code that's already in the page.

Return of the Flash Object

Well today I had another run in with multiple flash objects within a page of a site. However today it wasn't flagged by using IE6, it was IE7. The problem I was experiencing was, that the page loaded up fine with it's various flash animation, but if you refreshed the page IE7 crashed out. What made matters worse was that it was only happening on one of our IE7 test machines, annoying, at this point I knew it had to be down to the version of flash. This test machine was using Flash Player 6 and after some web trawling I stumbled upon the following: If you are running Internet Explorer and Flash Player version 6.0.21, 6.0.23, or 6.0.29, the browser will crash if you call GetVariable or SetVariable (or a number of other methods that are built into the Flash Player plugin). However this doesn't seem quite right, as it was only happening on a reload, I am still puzzled, but for now I have taken the cheats way out. I looked at Adobe's penetration stats of its various flash players and came to the conclusion that flash player 6 is only used by 1% of majorly developed country's. So decided to up the required Flash to version 7 within my UFO detection script, which miraculously cured the bug. But I am not satisfied with this, it is a cop out and a cheats way out. I need to find out whats doing it, I know that if you try to look at the revision numbers of flash player 6 the lower revisions cause the browser to crash, but this should happen on every load, not upon a refresh. So needless to say I am looking into this further, if anyone has any ideas or advice let me know so I can cure this problem and then share the information on here.

A Follow On

After my last post about my woe's with Flash and my misuse of UFO I have just caught up with my blog readings to read the latest on A List Apart. In particular Bobby van der Sluis has wrote a nice article on the various methods of embedding Flash objects. Well worth a read. However the bit i found most interesting is that he is teaming up with Geoff Stearns to create ultimate JavaScript library for embedding Flash content. - SWFFix This looks very good and I will definitely keep a close eye on it.

Flash but not of the Gordon variety

We all like a bit of Flash, not too much so that it ends up taking over your entire page and looking like something hideous from the 90's where we all thought the more flash the better. But just enough to add to enhance your page. This week I have had the pleasure of using flash for some interactive maps and for some animated buttons on a home page. Now the first issue I, and I'm sure a lot of other people, have is how you should embed these flash objects into your code. Now rather cleverly I have just mentioned the two ways, embed or use objects, but this post isn't about the method you use but rather my experience with 's Bobby van der Sluis UFO. Now I have used UFO a few times in the past and never had any problems, in fact to be honest its always been a painless experience. yesterday though proved to me that sometimes things just happen and when they do it sucks :( I managed to find myself in the rather odd situation where one of my pages worked totally fine in Firefox, IE7, Safari and Opera but in our favourite browser, IE6 It totally crashed the browser after loading the header. When I mean crash I mean IE eats your memory alive and consumes as much virtual memory as possible and then chews up your PC and spits it at you. Nice. I straight away knew it was due to the fact I had multiple flash objects on the page and some how it was memory leaking. A few Google searches later and after revisting the UFO site I found this enlightening bit of information.

Q How do I fix a "Line 56: Out of Memory" error, when unloading a page in Internet Explorer using Flash Player 9 and multiple SWFs using ExternalInterface? A This is a Flash Player 9 bug I instantly thought this was the problem as it sounded roughly about right and could easily be transferred on to my issue. I implemented the javascript fix and thought off we go lets try this again. One quick refresh later and I was again out of virtual memory and a PC that was as good as a feather paperweight. So back to the drawing board for me, I decided that there must be something daft, lets go through and disable all the flash objects within the page and then activate each one, and see if the problem is specific to one object. Due to the ultimate law that is Sod's law it so happened to be that the last flash file I activated was the one that pushed it over the edge and into the ever downward spiral. To cut a long story a paragraph shorter so that I can go get some sleep I had found a very blatant bug that I should have spotted sooner. Within the ID attribute of the 6'ths flash div container a naughty whitespace had appeared, instead of flashcontainer6 the code had flash container6. Amazingly though was the fact that no other browser was put off by this and ran fine, it was only IE6 that fell on its face. Now to be honest I havn't looked into the matter further to find out why this was the case, my suspicions lie in the way IE6 handles DOM but then as it's using javascript to create the flash object maybe its the javascript engine in IE6 working with the DOM. So take note, if you ever have your IE6 browser crash when trying to run a flash file using UFO, or maybe even SWF, check your ID tags for whitespace!