Wednesday, August 26, 2009

Adobe InContext Editing problem with SIFR

I recently had an opportunity to try out InContext Editing on a client project. Of course, 5 minutes after hooking it up I ran into a problem. If you happen to be using sIFR to add nice typography to your site, you will notice two problems.
  1. First, the sIFR Flash content appears to be in front of the InContext Editing interface;
  2. Second, the sIFR replaced text is not editable. If you make an editable region around sIFR replaced text, you get an error when you edit the page.
Luckily, there is a simple solution to the problem. If you open up the sifr.js file you will immediately notice that the Javascript is compressed in such way that it is pretty unfriendly. However, since luck is on our side, the only line you need to edit is human-readable. Scroll to the bottom of the file and you will see a line that looks like this:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac && (!sIFR.UA.bIsWebKit || sIFR.UA.nWebKitVersion >= 100)) {

That IF statement checks to make sure sIFR is ready to be setup. In our case what we want to do is make sure that that condition checks to see if you are in InContext Editing. We can tell by looking at the top.document.location to see if the page that is currently in the location bar is the ice/ide.html page. Changing the condition above to:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac && (!sIFR.UA.bIsWebKit || sIFR.UA.nWebKitVersion >= 100) && top.document.location.toString().indexOf("ice/ide.html") <= 0){

Doing so will cause sIFR to be enabled unless you are in the InContext Editor...problem solved.