Archive for the 'Front-end' Category

Element.Update(), flash and IE7

Published by liquid 5 months, 1 week ago in Front-end. 1 Comment351 views

Yesterday I ran into an issue with IE7 again (well, I assume not too many of you are surprised, ehh).

When I was trying to move an element in the DOM (actually update) with an other element’s innerHTML including a flash object, the movie (.swf) forgot to load. Right clicking on the flash file you can see the following message, greyed out:

“Movie not loaded”

This is an example snippet of the code:

<div id="video">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="184" height="140" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="bgcolor" value="999999" /><param name="quality" value="high" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="src" value="/videos/15.swf" /><embed type="application/x-shockwave-flash" width="184" height="140" src="/videos/15.swf" allownetworking="all" allowscriptaccess="always" quality="high" bgcolor="999999"></embed></object></div>
<script type="text/javascript">
$("otherElement").update($("video").innerHTML);
</script>

Using IE7, Prototype 1.5 and Flash Player 9 on Windows XP.

This problem does not seem to occur in normal browsers (like Safari or Firefox), they load the movie file perfectly. I thought it would be good to share with others, maybe you guys know a workaround, or I can warn others before they will have to face the same problem.

Safari 3.1 and Prototype conflicts

Published by liquid 6 months, 2 weeks ago in Front-end. 0 Comments456 views

Apple has shipped the new version of Safari last week, which has enhanced usage of JavaScript. From now on Safari 3.1 natively supports getElementsByClassName, which is good, Safari can process and execute this function even faster than before. The upcoming version of Firefox also implements native support. Good. Performance upgrades are always good, and even more welcome nowadays in our ‘ultra-interactive’ web of 2.0 applications.

But on the other side, this causes issues for Prototype-based websites, there is a conflict between the native and the Prototype methods, which both have the same name.

For example if you are accessing a bunch of elements like this:

$('foo').getElementsByClassName("bar").each(Element.hide);

It will not behave like it did before. Hmm. You do not need to scream and shout now, until the Prototype team comes out with a solution you can still use this syntax:

$$("#foo .bar").each(Element.hide);

Easy, huh? So be aware that your sites may be broken for Safari users and replace the affected lines with the workaround mentioned above.