A small twist on using syntaxhighlighter

Ronnie wanted to add syntax highlighting to his Blogger blog. I just did it with syntaxhighlighter and there are quite a few guides on how to do it (thanks to them all - they helped a lot).

But there's a twist on how I do it. I wanted to use some good client-side performance rules and to enable all supported languages, so I did the following:

I. Minimize HTTP requests by combining all JS files into one, with 'shCore.js' first (the others depend on it)

cat shCore.js shBrushCSharp.js shBrushCpp.js ... > syntaxhighlighter-1.5.1-all.js

II. Minify the JS and CSS with the YUI Compressor (to compare JS minifiers check out Arthur Blake's CompressorRater, and also check out Art of Scaling's CSS Minifier)

java -jar yuicompressor-2.3.6.jar syntaxhighlighter-1.5.1-all.js --type js -o syntaxhighlighter-1.5.1-all.min.js
java -jar yuicompressor-2.3.6.jar SyntaxHighlighter.css --type css -o SyntaxHighlighter-1.5.1.min.css

I'm currently hosting the files at the Google Page Creator, but that means I don't implement 2 more important steps: adding a far-future "Expires" header and gzipping. If anyone knows of a free (or very cheap) host that offers this I'd be grateful to know.

ActiveX RDP taking %100 CPU on IE6

Here's a sneaky bug we've had (credits to colleagues Corin and Leeor for solving this one), thought I'd share.

When pointing IE6 at a page with the MS RDP ActiveX control the browser would freeze and consume %100 CPU once we navigated away. It turns out that IE6 doesn't like the ActiveX control and the jqModal jQuery plugin on the same page.

jqModal includes a workaround for the IE z-index bug (a.k.a the "bleed-through" bug, fixed in IE7) by positioning an iframe right behind the dialog if using IE6. For various reasons we disabled this behavior on IE6 (and we live with the bleed-through), but the '<iframe>' was still being created inside jqModal - just not added to the document. Not creating it at all solved the bug.

Here's the (quick and dirty) patch against jqModal 2008.07.06 +r13, disabling the bleed-through fix.

Change

var s=0,H=$.jqm.hash,A=[],ie6=$.browser.msie&&($.browser.version == "6.0"),F=false,
i=$('<iframe src="javascript:false;document.write(\'\');" class="jqm"></iframe>').css({opacity:0}),

To

var s=0,H=$.jqm.hash,A=[],ie6=false,F=false,
i=$(''),

A proper diff is here.

jQuery Validation and default messages

Here is how we specify errors messages for the jQuery Validation plugin by Jörn Zaefferer: For built-in validators we modify $.validator.messages, as Jörn shows here.

$.extend($.validator.messages, {
  required: "Required",
  email: "Email not valid",
  ...
});

(we fill the actual messages in server-side processing, we don't hard-code them in the JS) For custom validators we... add custom validators.

$.validator.addMethod(
  "shouldBeGreen",
  function(value, element) {
    return this.optional(element) || /green/.test(value);
  },
  "Not green"
);

Now we can specify 'shouldBeGreen' in an input's class. That's it. Pretty simple, but it took us a while to figure it out so I hope this helps somebody.

jQuery Validation and the Google Toolbar

I am one of many happy users of the jQuery Validation plugin by Jörn Zaefferer, but I had some trouble with the Google Toolbar's auto-fill feature. When enabled, it adds a tooltip to text input fields it didn't auto-fill that says:

Your Google Toolbar can fill this in for you. Select AutoFill

One of the ways to tell the validation plugin which error message to show is by... setting the 'title' attribute, so when the Toolbar is installed all the error messages are "Your Google Toolbar can...."

Jörn has addressed the Google Toolbar issue since version 1.0, but in a way that doesn't let me use my preferred method of customizing the validation error messages.

So now there's a trac ticket including a patch with a new 'ignoreTitle' option that fixes this (if you don't use 'title' yourself).

[Edit: 26 October, 2008] Jörn has commited my patch, you can get the latest jQuery Validate plugin with Subversion:

svn co http://jqueryjs.googlecode.com/svn/trunk/plugins/validate

[Edit: 3 November, 2008] Only 'jquery.validate.js' contains the patch in svn - the minified and packed versions don't. Use the YUI Compressor or the CompressorRater to minify them yourself. Thanks to Ilan Berkner for catching this.

[Edit:21 November, 2008] Here's a direct link to the file

[Edit:8 December, 2008] Version 1.5 of the Validation plugin now contains this patch.