Category Archives: Javascript

Internet Explorer, Flash, Alignment Gotcha

I ran into a rather annoying issue the other day related to content alignment in Flash; as usual, this problem exists exclusively in Internet Explorer. To be more specific, it is an issue with how the Flash Player ActiveX control is written.

If you are aligning content in Flash that uses the Stage width or height as a variable (e.g., you want to center a MovieClip) and you do it on initialization (i.e., in code and on the first frame), you may run in to this issue. Here is an image demonstrating what you might see:

Note that in the “before” screen, the content is centered horizontally, while in the “after” screen, the content is only half-visible and appears to be “centered” on the left margin.

If you run a test – output the Stage width to a text field, you’ll see that the width will be returned as 0.

As far as I know, there are two solutions to this problem. If you’re embedding your Flash using swfObject, then make sure that you omit the “scale” attribute. For example, modify the following:

var params = {
    bgcolor: "#000000",
    menu: "false",
    scale: "noScale",
    allowFullScreen: true
};

To something that looks like this:

var params = {
    bgcolor: "#000000",
    menu: "false",
    allowFullScreen: true
};

Alternatively, if you absolutely need that attribute. You can create an “EnterFrame” event listener that detects when the Stage width is greater than 0 and then remove the listener. Here’s an example in ActionScript 2:

this.onEnterFrame = function() {
    if (Stage.width > 0) {
        init(); // Pass to initialization function
        this.onEnterFrame = null; // Clear enterFrame listener
    }
}

“Press SPACEBAR or ENTER to activate and use this control”

Three days ago (April 11) Microsoft released an Internet Explorer update in response to the patent battle between Microsoft and Eolas. After installing the update, Internet Explorer (not other browsers, fortunately) users will be required to “activate” embedded objects and plug-ins before they can interact with them. Here’s what sucks, most users will receive this update automatically via Windows Update. Embedded objects and controls affected are:

  • Adobe Reader
  • Apple QuickTime Player
  • Macromedia Flash
  • Microsoft Windows Media Player
  • Real Networks RealPlayer
  • Sun Java Virtual Machine

In order to activate these objects, users are required to press the space bar, enter key, or use the mouse to click on the item. Anyone that’s tested the Internet Explorer 7 beta will have noticed similar behavior within that browser. According to w3schools browser statistics, over 60% of web users browse using Internet Explorer, meaning within the next few days approximately 60% of visitors to Flash websites, or sites using embedded media will be required to activate the media before being able to use it; because of this, some users may assume that the website is broken.

Here’s the good news: Microsoft has posted a solution for web developers that would like to avoid their content being blocked. Essentially, in order to avoid this problem all that a web developer needs to do is embed the object via external script files. Those who have opted for Unobtrusive Flash Object placement within their websites will not be affected, because their content is already embedded in this manner.

What’s ironic about this entire situation is that it actually forces developers to use a more standards compliant approach, go figure.

Javascript Favelet: Outline

Whenever I produce I website I am always thankful for the Firefox Web Developer Toolbar extension; it’s an incredible convenience. One particular feature that I use constantly is “Outline”. This feature is great for seeing the locations of various elements on any page. But I’ve always wished that there was an equivalent feature/extension for Internet Explorer. Well, to my knowledge, there isn’t, but I’ve thrown together a little script (Javascript, to be exact) that outlines (virtually) any given element in colors of my choice. Here’s the script:

function outline(){
var tagArray=['p','a','div'];
var colors=['red','green','blue'];
for (var i=0; i<tagArray.length; i++){
var tags = document.getElementsByTagName(tagArray[i]);
for (var j=0; j<tags.length; j++){
var tag = tags[j];
tag.style.border = ['1px solid '+colors[i]];
}
}
}

Obviously the code is not that complex, but it can be incredibly useful. One particularly nice thing about it is that one could place a fairly large amount of elements into the arrays.

Here’s a bookmark that I use anytime I want to call this script into action: Bookmark me. Using it this way is far more convenient, in my opinion. Well, I hope someone finds this useful; enjoy.