The Elegant, Unobtrusive Javascript Workaround for "Click to activate and use this control"

Written November 24. 2006, at 02:12 GMT.

Recent versions of Microsoft's Internet Explorer (6+), trace an ugly gray border around all multi-media objects embedded in web pages (Flash, Java applets, Media player widgets, etc.) and require an extra "activation" click before they can be used. This annoying feature was brought on by a stupid patent lawsuit, which Microsoft lost. (First time in years that I side with Microsoft on something.)

Several workarounds exist floating around the Interweb, including one distributed by Adobe (ick!), but they're all really, really, really ugly:

  • Big, fat, and inefficient Javascript code.
  • Require Javascript running to see the multi-media object at all.
  • Require a major overhaul in how you embed multi-media objects in your pages.

This got me interested in writing my own piece of code that would be a) small and fast, and b) get the job done in as elegantly, unobtrusively as possible.

Here's what I came up with at work...

Step 0:

Embed your multi-media objects in your HTML as normal (using <object>, <embed> or <applet>). Leave them as they are. No changes required in your HTML.

Step 1:

Update July 3nd 2007: Posted what is hopefully the last update for a while now, added a workaround for the "IE-never-stops-downloading" bug. The compressed size is up by almost 200 bytes though.
Update June 6th 2007: Finally updated the code to address <embed> and <applet> tags, and to run also in Opera 9, after an helpful comment by David Muńoz. The minified version of the script is still only 395 bytes!
Update Dec. 13th: Changed the script below to make it even smaller and faster, and to solve an issue reported by Martin.

Copy and paste this Javascript code into a file and let's save it as "eolasfix.js".

// Documentation & updates available at:
// http://codecentre.eplica.is/js/eolasfix/test.htm

(function( Eolas_Fixed,
            win, doc,
            getElementsByTagName,
            outerHTML,
            parentNode,
            tags,
            elmsToRemoveOnload,
            x,
            is_ie,
            y,z,elm,childNode,HTML,dummy,eolasfix)
{
  // run only once!
  if (win[Eolas_Fixed]) return;
  win[Eolas_Fixed] = 1;

  eolasfix = function ()
  {
    // for each tag name specified in Array t
    while (tags[++x])
    {
      // find all elements of that type in the document
      // loop through the elements
      y = 0;
      while (elm = doc[getElementsByTagName](tags[x])[y++])
      {
        if (is_ie)
        {
          HTML = '>';
          z = 0;
          // <param> elements don't show up in innerHTML IE
          // so we need to collect their outerHTML.
          while (childNode = elm.childNodes[z++])
              HTML += childNode[outerHTML];

          // create a 'dummy' element 
          dummy = doc.createElement('i');
          // inject it next to `elm`,
          elm[parentNode].insertBefore(dummy, elm);
          // and turn it into an `elm` clone
          dummy[outerHTML] = elm[outerHTML].replace(/>/, HTML);
          // increment y to skip over it
          y++;

          // then hide the original elm
          elm.style.display = 'none';
          // and save it in 'The List of Elements to Remove Later'.
          elmsToRemoveOnload[elmsToRemoveOnload.length] = elm;
        }
        else
        {
          elm[outerHTML] = elm[outerHTML];
        }
      }
    }
  };

  // For IE run the fix straight away (because the defer="defer"
  // attribute has delayed execution until the DOM has loaded).
  // Then assign a window.onload event to purge the old elements.
  is_ie && !eolasfix() && win.attachEvent('onload', function(){
    x=0;
    while(elm = elmsToRemoveOnload[x++])
        elm[parentNode].removeChild(elm);
  });
  // For Opera set an `DOMContentLoaded` event to run the fix.
  win.opera && doc.addEventListener('DOMContentLoaded', eolasfix, 0);

})( '__Eolas_Fixed',
    window, document,
    'getElementsByTagName',
    'outerHTML',
    'parentNode',
    ['object','embed','applet'],
    [],
    -1 /*@cc_on,1 @*/
  );
The first and the last line wrap the function in a Microsoft-only [conditional compilation][1] directive - to make sure only Internet Explorer 6+ runs it.

The code is wrapped in a self-executing anonymous function to avoid polluting the global name space - with the notable exception of one global variable __Eolas_Fixed which is used to make sure the script runs only once (in case it gets linked to more than once within a single web-page).

The rest is hopefully fairly self-explanatory, albeit a bit "kludgy" looking, in part because of IE's quirkiness when it comes to working with <param> elements, and furthermore because I'm optimizing the code for "minification".

Step 2:

Paste the following code-block somewhere (anywhere!) in the HTML of your page:

<script defer="defer" src="[script-folder-path]/eolasfix.js" type="text/javascript"></script>

Note: The code is wrapped inside Microsoft's proprietary conditional comment block, so all other browsers will gladly skip over it. Also: The defer attribute tells Internet Explorer to run the script as soon as the page's HTML has finished loading, to ensure we catch all embedded objects on the page. Opera, on the other hand, gets instuctions to delay execution until onDOMContentLoaded.

Step 3:

There's no Step 3. That's all.

See the online demo if you don't believe me. :-)

Licence

My employer says: Feel free to use this code in any way you like as long as the version version you distrubute includes a comment with an URL pointer to the demo page.


More like this: English Entries, HTML/CSS, Javascript.


Reader Comments (58)

  1. Kiddi Geir replies:

    ţvílík snilld ... ţetta er eitthvađ sem mig hefur lengi vantađ og pćlt í ađ finna en aldrei fundiđ ţví ég vissi ađ ţađ hlyti nú ađ vera hćgt ađ sleppa ţessum border. Ég á eftir ađ nota ţetta óspart from now on!

    Takk fyrir mig.

    November 24. 2006 kl. 12:32 GMT | #

  2. ingvi replies:

    Really nice work! How's the license on using you're code on commercial websites?

    November 24. 2006 kl. 14:59 GMT | #

  3. Már replies:

    Ingvi, sorry, I hadn't really given it much thought. Let me get back to you on this one after the weekend.

    (In my mind the choice is between some sort of free (LGPL-style) or BSD-style licence, or simply placing it in the public-domain.)

    November 25. 2006 kl. 11:09 GMT | #

  4. Már replies:

    So, here's the deal: Feel free to use this code in any way you like as long as the copy you distribute includes a comment with an URL pointer to the demo page.

    November 28. 2006 kl. 09:16 GMT | #

  5. Jón Heiđar replies:

    Nerd. :)

    November 28. 2006 kl. 19:06 GMT | #

  6. Már replies:

    Thank you! ;-)

    November 28. 2006 kl. 20:55 GMT | #

  7. angus replies:

    cheers man.. ive been looking for fix to this for days. the others, like swfobject and ufo, are great - but dont allow for exectution of the standard code block, so are useless for content managers like drupal. nice work!!

    December 4. 2006 kl. 19:32 GMT | #

  8. Wouter replies:

    Thx a lot. It's very compact and works just fine!

    Greetz Wouter

    December 7. 2006 kl. 13:24 GMT | #

  9. Jón Heiđar replies:

    Ţađ var ekkert - ţađ er rétt ađ taka ţađ fram ađ ţetta er eitt mesta hrós sem ég gef öđru fólki.

    Nördar rúla nebbleega.

    December 9. 2006 kl. 18:18 GMT | #

  10. Marten replies:

    Great code! Finally a simple yet elegant approach... and no need to apply big code changes.

    December 12. 2006 kl. 08:22 GMT | #

  11. Marten replies:

    Már,

    I found a problem with your code. Although it might also be a mistake at my end, this is the problem:

    <object id="oVideo" height=240 width=320 style="display:none;width:320px;height:240px" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject">
    <param name="AutoStart" value="True" />
    <param name="uiMode" value="none" />
    <param name="URL" value="somefile.avi" />
    </object>
    

    somefile.avi is an avi file which is bigger then the 320x240 specified for the object. Normally, it will be scaled down to fit the 320x240 window. With your code, this is not the case; the object element gets scaled up to the actual video size. I looked into your code and can't find anything wrong. It seems you respect the attributes within the object-tag (but my DOM knowledge is not that huge).

    I uploaded an example to my webspace: http://www2.drome.nl/users/Mart/ (embedded avi file is ~11MB so it could take some time to load)

    December 13. 2006 kl. 09:05 GMT | #

  12. Már replies:

    Marten, I can't even get your "nofix" video (http://www2.drome.nl/users/Mart/nofix.html) to play in any browser - let alone the "fix" version. The "nofix" page actually completely freezes up IE for me (both version 6 and 7) and eventually causes it to crash.

    Read Elisabeth Castro's article Bye Bye Embed on A List Apart, and try using the Windows Media Player embedding code she provides there.

    December 13. 2006 kl. 09:30 GMT | #

  13. Marten replies:

    Már, Thanks for your quick reply. It's strange it doesn't work, might be the movie encoding (divx)? I put up another video (2.7MB, cinepack codec) without changing the html code, so you might have another look. If this still doesn't work for you, I call it quits ;-) Thanks also for pointing me into the other direction. I will have a look at that code and see if it fits my needs. Greetings from the Netherlands... Marten.

    December 13. 2006 kl. 09:46 GMT | #

  14. Már replies:

    I still can't get your examples to load without crashing IE. Maybe restarting my computer will fix it (I doubt it, though, since it has only been running for a few days), but I'm not in a position to do that right now. And it also crashes my co-worker's IE7.

    No less importantly, your examples don't work at all in neither Firefox, nor Opera, so your video-embedding code is clearly broken.

    December 13. 2006 kl. 10:21 GMT | #

  15. Marten replies:

    Már, it wasn't supposed to work on other browsers (yet!) ;-) I got the code from Elisabeth Castro's article and used this as a base so it should be ok now (I uploaded the new code to my webspace). It works for me in IE and Firefox. Still, when I apply the fix to IE, the movie resizes automaticly to it's original size. Now, I don't want to bother you any more about this problem, so I will find a way to make it work in my environment, but I thought I should let you know that I still have this behaviour... Regards, Marten

    December 13. 2006 kl. 13:25 GMT | #

  16. Már replies:

    Marten, I can now see the behavior you describe. The obvious "dirty" fix would be to add an onresize event handler to the <object> to reset its dimensions. like so:

    var _newObj = _tmpDiv.childNodes[0];
    _newObj.attachEvent("onresize", (function(o,w,h)
      {
        return function(){
          o.style.width  = w+(w.indexOf("%")==-1?"px":"");
          o.style.height = h+(w.indexOf("%")==-1?"px":"");
        };
      })(_newObj, _newObj.width, _newObj.height)
    );
    

    (See temporary example file: fixie-source2.js.)

    I need more time to research this further and - hopefully - come up with a more elegant solution.

    December 13. 2006 kl. 14:32 GMT | #

  17. Már replies:

    After playing around a bit more, I seem to have found a way to optimize the original script quite a bit, with the nice side-effect that it doesn't seem to trigger the resizing bug you were having.

    See temporary example file: fixie-source2b.js

    As soon as I've tested this new version a bit more, I'll update the main script example and demo files accordingly... so stay tuned.

    December 13. 2006 kl. 15:11 GMT | #

  18. Már Örlygsson: Minor Javascript updates

    "Tonight I updated the code provided in a couple of recent posts: Added an optional feature to the tiny IE browser detection script Posted a significant update to my unobtrusive script workaround for IE's "Click to activate" feature, that makes..." Read more

    December 13. 2006 kl. 23:46 GMT | #

  19. Carol replies:

    Thank you so much! I've been trying to get a work around for this for days. Very sweet piece of code!

    January 23. 2007 kl. 20:15 GMT | #

  20. Sean replies:

    Simply AWESOME! this script worked flawlessly where others failed.

    Thanks so much, Sean

    February 2. 2007 kl. 00:56 GMT | #

  21. stewart replies:

    loved your fix for the click to active problem will this fix only work when iv uploaded my site or should it work when i view in browser through dreamweaver mx 2004.

    March 22. 2007 kl. 22:17 GMT | #

  22. Már replies:

    Stewart, I don't have access to a Dreamweaver installation, but I can only assume it will work there too - if the browser is able to load and execute normal Javascript. I'd just give it a try.

    March 23. 2007 kl. 07:32 GMT | #

  23. David (Raspu) replies:

    Hi Már!

    I developed other solution... http://jactivating.sourceforge.net

    May 10. 2007 kl. 01:54 GMT | #

  24. Már replies:

    David, out of simple curiosity, what exactly does your 1.1kb (minified) solution do that my 0.35kb script doesn't?

    May 10. 2007 kl. 09:45 GMT | #

  25. David (Raspu) replies:

    Hi,

    "what exactly does your 1.1kb (minified) solution do that my 0.35kb script doesn't"...

    • It's compatible with Opera browser (the extra activation also is required in Opera 9).
    • It's compatible with Object, Embed and Applet tags (all of them require an extra activation).
    • Version 1.2 "would allow" a future compatibility with another clients (like Gecko or Khtml based browsers) if these require it.

    (sorry about my english, i am chilean)

    May 10. 2007 kl. 16:26 GMT | #

  26. Már replies:

    Heh, little old ignorant me didn't know Opera 9.0 was affected as well.

    Stay tuned for an update - which I'm afraid will look an awful lot like this script by Jesse Skinner - which I didn't find back in November when I first wrote this thing. *Sigh*

    May 11. 2007 kl. 00:07 GMT | #

  27. danjal replies:

    I been looking throw alot of "fixes" for this - yours the best. Good job. And one more thing. Finally a website - that also has a working example... :-)

    June 5. 2007 kl. 23:10 GMT | #

  28. danjal replies:

    Hey again.

    What is very annoying about this workaround - is the fact that if you have many flash objects on your page - IE will not stop loading..... DO any of you guys have a way to tell IE to stop loading? like defer ='get over yourself' ...

    June 14. 2007 kl. 18:51 GMT | #

  29. Már replies:

    @Danjal, I haven't been able to reproduce the behaviour you describe. Could you post a link to a test-page that behaves like that so I can inspect further?

    BTW, I just made a fairly major update to the script... try using the updated version and see if the problem persists.

    June 15. 2007 kl. 09:22 GMT | #

  30. Danjal Joensen replies:

    Hi again.

    Thanks for your last eolasfix-test5.js. update. It worked great. Now IE7 "nonstop loading error" is gone !. Thanks alot - great work. :-)

    June 28. 2007 kl. 07:59 GMT | #

  31. Már replies:

    Thanks for the help testing the workaround Danjal.

    I've now updated the entry above along with the public version of the code. Let's see how this holds up for now.

    July 2. 2007 kl. 11:26 GMT | #

  32. Már replies:

    ...along with more bugfixes/workarounds.

    July 3. 2007 kl. 11:00 GMT | #

  33. chris replies:

    it seems that by not placing the "eolasfix.js" script file in the same directory as the html page, the workaround fails to work (in IE6 anyway). have you experienced this? it sure would be nice to be able to place it in a "scripts" or an "includes" folder. i'm a neat freak like that :)

    July 8. 2007 kl. 02:51 GMT | #

  34. chris replies:

    never mind about my last comment... instead it looks like i was having problems getting the workaround to work with YouTube embed code. everything i've tried doesn't seem to work.

    here's my code:

    July 8. 2007 kl. 03:04 GMT | #

  35. chris replies:

    never mind about my last comment... instead it looks like i was having problems getting the workaround to work with YouTube embed code. everything i've tried doesn't seem to work.

    here's my code:

    July 8. 2007 kl. 03:05 GMT | #

  36. chris replies:

    <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/xx6EQLc1wW4"></param><param value="transparent"></param><embed src="http://www.youtube.com/v/xx6EQLc1wW4" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

    July 8. 2007 kl. 03:07 GMT | #

  37. Craig Pinegar replies:

    Thanks, Mar.

    I wish I could have found this months ago. God bless you and yours.

    Cheers,

    Craig

    July 18. 2007 kl. 07:24 GMT | #

  38. Johan replies:

    Very nice - thanks for making available.

    July 31. 2007 kl. 01:30 GMT | #

  39. David (Raspu) replies:

    Hi Már!

    I'm using Opera 9.22 in Ubuntu Linux, and... surprise!!, my script don't works, yours don't works, SWFObject don't works, Adobe's official fix don't works, UFO don't works, etc.

    żDo you know about it?

    August 3. 2007 kl. 01:09 GMT | #

  40. Már replies:

    David, no I didn't know. It sounds like a software bug to me - something that they might fix in the next version.

    I bet the Opera customer support desk is already swamped with bug reports from those millions thousands hundreds dozins of dedicated Ubuntu Opera users worldwide. ;-)

    August 3. 2007 kl. 01:37 GMT | #

  41. Gyuri replies:

    Hi Már!

    Thanks for this.

    I was checking it with like 10 Embedded videos in a page, and it seems the script handles up to 4-5 elements but the rest show the Click to Activate and use this content :)

    Have you had this?

    Cheers, Gyuri

    August 7. 2007 kl. 21:24 GMT | #

  42. Jamie replies:

    Hi Már

    Your fix works great and I no longer have to Click to activate my Java applet in IE.

    However, the Java applet is being resized slightly - a problem that people described previously. ("After playing around a bit more, I seem to have found a way to optimize the original script quite a bit, with the nice side-effect that it doesn't seem to trigger the resizing bug you were having.")

    What was the fix you found for this problem? It does not seem to be working for me. I cannot download the example file fixie-source2b.js to see how you fixed it.

    Thanks

    Jamie

    September 3. 2007 kl. 10:36 GMT | #

  43. andrew thomas replies:

    Thanks, works so well - great to see nice people are still sharing things!

    September 3. 2007 kl. 22:03 GMT | #

  44. Stephen replies:

    Hi, Thanks for this great script. Just one thing I have noticed and I dont know if maybe I have done something wrong but when I load the page and script for the first time the object will not get embedded into the page. If I refresh the page everything works perfectly. It works every time locally on my pc but when I upload the files I get this glitch on first page load. Obviously if I then clear temp internet files and go back to the page the embed wont work again.

    Am I the only one experiencing this?

    Thanks

    September 6. 2007 kl. 22:34 GMT | #

  45. ridgerunner replies:

    So how/why does the following line work? (for non-IE)

    
      elm[outerHTML] = elm[outerHTML];
    
    I am a little confused...

    September 19. 2007 kl. 22:49 GMT | #

  46. JHouse replies:

    Yeeesssss, finally. Thank you so much. I tried the other "fixes" I found on Google, but none of them did the trick. This one did. Awesome.

    Thanks again.

    October 2. 2007 kl. 08:16 GMT | #

  47. AS Webdesign replies:

    Thanks!! This fix works great :o)

    October 19. 2007 kl. 11:22 GMT | #

  48. william replies:

    Hi, Thanks in advance... but- I'm not as savvy as all of you- uhhmm, what do you do with the file you say to save as "eolasfix.js".? Put it into a folder like 'assets' or 'images', and upload it to the webserver? It must be somewhere to be called up, within the site, right? I've been looking for a good solution, thanks-) By the way, I enjoyed your self-portrait...

    October 23. 2007 kl. 02:07 GMT | #

  49. william replies:

    THANK YOU, Thank you! Got it working- by the way, it's my first use of java scripting- actually like understanding it-)

    Very good, Thanks again!

    October 24. 2007 kl. 18:28 GMT | #

  50. Richard Hughes replies:

    MANY Thanks! I tried a TON of other scripts that didn't work properly. This seems to be the fix I needed.

    Best Regards! Rich

    December 2. 2007 kl. 01:16 GMT | #

  51. Ian replies:

    Hi Már,

    Wonderful stuff! I'm glad I continued to search for an 'alternative' way to solve this problem on my website. I've tried other scripts to workaround it, but to no avail. They were good, but not this good! Your efforts are appreciated, keep up the good work Már.

    December 6. 2007 kl. 13:04 GMT | #

  52. Mel B replies:

    I'm using Dreamweaver's "Insert-Interactive Image" to make my menu and I cannot get this to work. Any thoughts?

    December 29. 2007 kl. 02:40 GMT | #

  53. Mel B replies:

    YAY!!

    they are getting rid of it!

    http://www.adobe.com/devnet/activecontent/articles/devletter.html

    December 29. 2007 kl. 03:14 GMT | #

  54. tupefrabegree replies:

    long porno vids long porno vids teen porno vids teen porno vids weird porno vids weird porno vids soft porno vidios soft porno vidios very soft girls porno very soft girls porno very soft sexy girls porno very soft sexy girls porno fuck sex hard porno fuck sex hard porno

    January 6. 2008 kl. 00:08 GMT | #

  55. Chris replies:

    Inserted code as explained and no luck....any suggestions

    January 17. 2008 kl. 06:15 GMT | #

  56. Chris replies:

    Inserted code as explained and no luck....any suggestions

    January 17. 2008 kl. 06:15 GMT | #

  57. Production Music Library replies:

    This script is EXACTLY what I needed. Thanks very much!

    February 2. 2008 kl. 01:54 GMT | #

  58. Just To Say replies:

    Thanks

    March 15. 2008 kl. 13:18 GMT | #

Ţessum svarhala hefur veriđ lokađ. Kćrar ţakkir til ţeirra sem tóku ţátt í umrćđunni.


 

Flakk um vefsvćđiđ



 

Nýleg svör frá lesendum

  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Dinesh (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Ada (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • notandi (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Geir (Lausnin á efnahagsvandanum)
  • Jenný (Lausnin á efnahagsvandanum)
  • Óli Jens (Lausnin á efnahagsvandanum)
  • Már (Lausnin á efnahagsvandanum)
  • Kjartan S (Lausnin á efnahagsvandanum)

 

 

Yfirlit yfir ţetta skjal

(Atriđin í listanum vísa á ákveđna kafla ofar á síđunni.)