Category Archives: Javascript

Dynamic creation of Flash content

Here’s a subject that gets a lot of press in the web development world.

Given the popularity of music and movies on the web, developers need to be able to deliver dynamically created and configured players as a matter of course.

There are a couple of challenges in this. For instance, creating DOM Objects with Javascript isn’t too hard, but creating DOM Embeds is a real nightmare, not least because IE won’t let you append an Embed to any other element, and because IE likes you to re-initialise these objects when you update their parameters.

Then you have the Eolas v. Microsoft issue, which is why you have to click twice on Flash objects in IE before they work.

Finally, you have to deal with all the various browser plugins that attempt to act on media content before any of their competitors, which makes them get up to all sorts of crazy behaviour.

From what I’ve seen, developers approach the dynamic Flash conundrum in one of two ways: they either try and accomplish everything with very long, hopelessly complex innerHTML strings, or they use the SWFObject Javascript library kindly provided by Geoff Stearns who is a Flash engineer with Youtube.

http://blog.deconcept.com/swfobject/

Having tried both myself, I would have to say that SWFObject is the only way to fly.

Its simple to use, its free, its stable in pretty much every browser and it starts Flash objects with a single click in IE, which is really sweet.

You can see it in action on the homepage of www.downloadmusic.ie.

All of the music buttons in the chart are created with SWFObject, but better still, the music buttons in the BATTLE BOX are dynamically created with AJAX and SWFObject. Creating Flash objects with AJAX is all but impossible without SWFObject.

Use it and spend more time with your kids (and thanks to Geoff).

Debugging Javascript with Firebug

Javascript interests me for 2 reasons:

Firstly, in involves a different mindset, in that its client focused, rather than server focused, as is the case with most scripting languages.

Secondly, because its client focused, it involves challenges in terms of browser variations that simply don’t exist with server-side scripting.

The upshot of this is that you have to code Javascript with extended terms of reference, or in other words, ensuring that something works is only half the battle; you also have to ensure that it works everywhere.

That’s why you really need a good debugger, and why the Firebug Add-on for Firefox is a must have for any developer with an interest in Javascript and/or AJAX.

There are a number of issues to deal with when debugging Javascript. Firstly, errors in your Javascript code occur in your browser, so (paradoxically) that can’t be displayed in your browser window like PHP errors, which the PHP parser on your server can create for you and send to you in the HTTP conversation. That’s why Javascript errors generally end up as an icon in your status bar, which, particularly in the case of IE, are as good as useless.

Then there are the errors that are errors in some browsers but not in others, which indicate a use of the DOM which is not necessarily incorrect, just not universally supported.

This is where Firebug comes into its own. Firebug basically lifts the bonnet on everything that is going on behind the scenes in your Firefox browser. For instance, if Firefox makes an XMLHttpRequest as part of some AJAX functionality, Firebug will show what the response was generated by that request.

Firebug will also show you a hierarchical representation for the entire DOM of any given page, and allow you to expose every property and attribute, including CSS attributes, of any DOM element simply by right-clicking on that element in your web page.

Furthermore, Firebug will let you analyse the performance of your page, by clocking the load time if every HTTP request, including images, css files, javascript files and whatever else you page calls.

All of this is achieved in an easily accessed and ergonomic interface which fits neatly into your window when active and into your status bar when inactive.

Of course, the question is how does this help with IE, in that Firebug isn’t available for IE and that errors can occur in the IE DOM that don’t show up in Firefox. An example of this would be where Firefox allows you to set a DOM event like ‘onClick’ with the setAttribute function whereas IE doesn’t (IE is probably more correct in this regard; Firefox is just being nice).

One answer to this question could be: “Why not get an IE Javascript debugger?”, but as with the answer to most IE development questions, you’re going to have to get our your credit card, which is a really big ask when you know that Firebug is Open Source and probably a far better debugger than anything you can buy for IE.

A better answer is that you can use Firebug/Firefox in parallel with IE. Basically, this involves testing pages in IE and Firefox at the same time. Where universal errors occur, Firebug will pick them up and allow you to fix them for both broswers, and where browser specific errors occur, you can at least examine what is going on via the Firebug interface, which, most of the time will point you to where your browser specific error is occuring.

Another point to bear in mind is that IE 7 is a lot closer to Firefox/Mozilla than any other IE browser when it comes to DOM and Javascript issues, so having Firebug in the bag is just about a no-brainer at this stage.

You can get Firebug (and read a bit more) from here:

http://www.getfirebug.com