Little Helper

This is more about building a jQuery plug in than it is about this particular plug in. Below you see that the code is small. Try clicking on the links on this page to see what happens. Then try turning off JavaScript and reloading the page. Now you understand what this plug in does. Note that the page is still useable without JavaScript.

/*global jQuery */
/*jslint devel: true, sloppy: true */
(function ($) {
    /**
     * Look for in-page references and turn them into modal boxes.
     * usage: $('a[href^="#"]').lilHelper();
     */
    $.fn.lilHelper = function () {
        return this.each(function () {
            var ref = $(this).attr('href');
            if (ref && ref.charAt(0) === '#') {
                $(ref).hide();
                $(this).click(function (theEvent) {
                    alert($(ref).html());
                    theEvent.preventDefault();
                });
            }
        });
    };
}(jQuery));

To Do

• Strip markup from help before alerting. DONE 2011-11-27
• Use jQuery UI's dialog instead of alert. (then we don't need to strip markup.) DONE 2011-11-29
• For efficiency, avoid calling $(this) and $(ref) more than once. Thanks Reddit adfmz and user24. DONE 2011-12-06 (Actually only replaced $(ref) as replacing $(this) seemed to fail to attach the click event handler correctly.)
• Use hide() instead of setting display to none. Thanks Redditor badsyntax. DONE 2011-12-06
• Use fancier selector instead of checking in code for "#". Thanks Redditor badsyntax. DONE 2011-12-06
• Check that the link actually points to something within the same page. Thanks Redditor YmMotHimself. DONE 2011-11-27

Another One

Here's another plugin for transposing music. See it in action in a sample Songbook.

/*global jQuery */
/*jslint sloppy: true */
(function ($) {
    /**
     * Transpose up or down by the specified number of half steps.
     * Looks for and replaces all the chords (e.g. class="chord") in the document.
     * e.g. $('.chord').transpose(-2);
     * NOTE (or BUG): Chords must be upper case. Minor chords must be of the form Am, not a.
     */
    $.fn.keytranspose = function (theHalfSteps) {
        var harmonicas = 'G A BC D EF ', /* lowest to highest conventionally. Halfs are Ab, Bb, Db, Eb, and F# */
            chords = ['G', 'A\u266d', 'A', 'B\u266d', 'B', 'C', 'D\u266d', 'D', 'E\u266d', 'E', 'F', 'F\u266f'],
            aChord = /[A-G][#b\u266d\u266f]?/;
        return this.each(function (theIndex, theElement) {
            var h = this.innerHTML,
                m = h.match(aChord),
                x;
            if (m) {
                x = harmonicas.search(m[0][0]);
                if (-1 < x) {
                    if (m[0].match('.[#\u266f]')) {
                        x += 1;
                    }
                    if (m[0].match('.[b\u266d]')) {
                        x -= 1;
                    }
                    x += theHalfSteps;
                    while (x < 0) { /* JavaScript doesn't do modulo negative numbers. */
                        x += harmonicas.length;
                    }
                    x %= harmonicas.length;
                    this.innerHTML = h.replace(m[0], chords[x]);
                }
            }
        });
    };
}(jQuery));

jQuery is a popular cross browser JavaScript library.

These comments are for JSLint, a JavaScript code checker at jslint.com. They set parameters for checking this code.