Following Prototype Through The LightWindow

So I've finally got the new layout mostly working. It's a combination of the XML layout from my book blog and the original style sheet from the HTML version of this blog. In other word, if you were to take a look behind the curtain you'd find that it's a real mess! Anyway now that I have something that kind of works I can slowly tweak it and tidy things up, hopefully, without anyone noticing.

There were a few problems with the conversion to the new layout, but one in particular, caused me no end of problems and so I thought I'd explain the problem and detail the solution. As a bonus if you read through this you might just understand the title of this post!

One of the reasons for upgrading the blog template was that I couldn't use any of the widgets with the HTML layout, and I wanted to be able to add a blog list and the followers widget. So once I'd replicated the old layout I started to play with the widgets. The blog list worked a treat and so you can now see the last post from my other blogs under the "I'm Also..." heading, but when I added the followers widget I just got a blank space. I knew the problem wasn't with the followers widget as such as it was working fine on one of my other blogs. Given that behind the scenes most of the widgets use a fair amount of JavaScript I assumed, rightly as it turned out, that one of the scripts I was loading was interfering with the followers widget. The problem was which one.

As well as any JavaScript loaded by any of the other widgets on the page or added by Blogger I also load nine other JavaScript files in the head section of the template. These provide support for embedding QuickTime videos and Google Maps, providing syntax highlighting on code snippets and the fancy popup display when you click on an image. Some of these are a single JavaScript file, others require multiple files to be specified, and some even dynamically load extra files as needed. Not knowing which of these was the problem I started by removing everything and low and behold the followers widget appeared correctly.

So I added back the JavaScript includes one at a time until the followers widget disappeared. This led me to the culprit -- prototype.js. Apparently "Prototype is a JavaScript Framework that aims to ease development of dynamic web applications". Now I don't use Prototype directly within the layout but it is used by the LightWindow script that I use for showing the large version of photos. I didn't know exactly what the problem was so I tried upgrading to the latest version of Prototype (v1.6) but that didn't help. I then tried the release candidate for the next version and the followers widget appeared. Unfortunately the LightWindow script didn't work properly -- I think there is an issue determining the correct size to scale the image to but I couldn't track down the bug to fix it myself. So...

I then went hunting to see if this was a known problem that I could fix in some other way. Of course not knowing how the followers widget works internally didn't help. Anyway after a lot of false starts I eventually found that adding the following JavaScript to the page just before the followers widget fixed the problem (it really does have to be just before the followers widget or it doesn't seem to help, I added it, inside script tags, at the end of the archives widget to get it in the right place):

window.JSON = {
    parse: function(st) {
        return st.evalJSON();
    },

    stringify: function(obj) {
        return Object.toJSON(obj);
    }
};

Apparently the problem stems from a bug in prototype that messes up the JSON parser used by the followers widget.

So if you find your followers widget disappears after adding a new widget or some JavaScript to your layout it might be worth seeing if this fixes the problem before you spend two days trying to hunt down the solution.