fd Blog

Daniel Hilgarth on software development

Fixing Octopress When Using jQuery

Another quick one:

After I fixed the problems with the GitHub plugin, I discovered that the little arrow at the top of the page between the content and the sidebar - the one that allows you to remove the sidebar - no longer existed.

Looking at the JavaScript console showed this error somewhere in modernizr:

TypeError: Object 0 has no method ‘charAt’

Googling brought up a closed Modernizr issue that provided the solution:

Apparently, the map method of jQuery is different than the one of Ender.js and since I added jQuery its method seems to be used.

Fixing it was as easy as replacing the relevant part of the testFeatures method inside source/javascripts/octopress.js with the code provided by Ryan Seddon.

Unfortunately, not only the map method is different, each also is. You will basically have to fix every occurance of each. There are two cases:

  1. Only one parameter is specified: .each(foo). Change that to .each(i, foo).
  2. Two parameters are specified: .each(foo, bar). Change that to .each(bar, foo).

Finally, you will have to upgrade Modernizr, because the method addTest - that is used by the code from Ryan - didn’t yet exist in the version currently used by Octopress, which is v2.0.4.

Modernizr allows you to download custom builds that only contain the features you need.
I didn’t know which features Octopress needs, but luckily, the current version - which can be found at source/javascripts/modernizr-2.0.js - contained a link at the top: http://j.mp/m1H1Y1.
This opens the download website of modernizr with only the relevant options selected. You just have to download the custom build and replace the existing file with it.

After these changes I had no more problems and Octopress was running smoothly again!
Maybe I should have just switched to Octopress 2.1 which comes with jQuery out of the box… Oh well.