blog . sebastian martens

swfInputs: Solving Mozilla + Transparent Mode + Win + Special Chars within inputs

As you probably know the Flash Player uses three different types of modes an Flash movie is embedded in the browser window. Its is set via the wmode parameter in the embed or param tag.

  <param name="wmode" value="transparent" />
  <embed wmode="transparent" ...

With the transparent mode you can influence the relation between the Flash movie an the surrounding HTML. If the set the wmode to window the Flash movie will always lay on top of the rest of the page. This is absolutly helpfull if your application is “standalone”, means the only center of user interaction or if you have an full window application ( at least with full screen ).
But often you have other HTML elements around the Flash movie which are at the same level of user interaction and might be as important as the Flash movie ( Best example might by fly-out menus which has to overlay all other content. Or maybe confirm messages which are not realized by the JavaScript confirm-dialog ). If you use wmode window html elements will always behind the Flash movie (setting the html z-index has no effect ), so there is no real interaction between HTML/JavaScript an the Flash movie. For this you need wmode equals transparent.

How to handle massive ExternalInterface calls (JsCallStack)

We use the ExternalInterface of the Flash Player to let JavaScript resize the HTML-Container of the Flex application. Our App loads dynamic content via XML and builds a list of entries. But we would like the user to use the standard browser scrollbar and not a scrollbar within the flex application. So we have to resize the HTM-Container of the Flex application, depending on its actual loaded content. Each time a new entry is added to the list, we call an JavaScript method from the Flex app via ExternalInterface to resize the HTML. This is done by using the resize-Event of Flex.

But sometimes the resize event is called up to 100 times within a second. In this cases some browsers ( sorry, but the IE seems to be ok ) didn’t get all JavaScript calls we made via ExternalInterface and some of our calls weren’t handled ( the container was not resized and our Flex list was cutted off ).

Preset a Selection within Input or TextArea

I wrote this very little pice of code several times now, because i lost it each time again. Hopefully i find it next time here…
So what to do if you want to preset an selection within an input or textarea, just to support your users a little ( which they will never recognize – of course, they are users and do expect these things ). We’re lucky, Mozilla and IE also have little methods for that:

Rendererror on IE6 + AJAX with multiple selects

Who ever has to support the old IE6 and is not able to ignore or to bann users with this browser (or is part of an active resistance de:”Webmaster-Aufstand-gegen-alte-Internet-Explorer” ), has to hack around things quiet often.
One big problem is that the IE6 has some render problems when you manipulate content in the DOM tree. If this happens to earlie you maybe get boxs which are cut off or your footer may have an wrong position because the IE didn’t update the box size in which you updated your content.