Category Archives: jQuery

Using jquery.bgpos.js with jQuery 1.8

Today, I spent way too much time working on a front-end problem to a code base that I wasn’t very familiar with.  This project’s animated navigation menu stopped working when upgrading from jQuery 1.7 to jQuery 1.8, and we needed jQuery 1.8 because of another dependency.  After digging my way through the code, I finally found that the problem was occurring because Alexander Farkas’ jquery.bgpos.js jQuery plugin was not compatible with jQuery 1.8.

Since the internals of jQuery’s animation code has changed from 1.7 to 1.8, the plugin needed to be updated as well.  I’m pasting the entirety of the change here so that, hopefully, maybe, someone else doesn’t go through the same frustration that I went through today.  I’ve made the necessary changes bold and italic in the following code block.  I can’t guarantee this code would work with jQuery versions less than 1.8 ?

/**
 * @author Alexander Farkas
 * v. 1.02
 *
 * Edited by Nelson Wells for jQuery 1.8 compatibility
 */
(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
            if (fx.pos === 0 && typeof fx.end == 'string') {
                var start = $.css(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
            }
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
 
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9.]+)(s|)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9.]+)(px|%|em|pt)s(-?[0-9.]+)(px|%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
    });
})(jQuery);

jQuery change event on checkbox

A lot of times, you’ll want to call a javascript function when a checkbox is changed from unchecked to check and vice versa. Up until the release of jQuery 1.4, the obvious way to do it (the jQuery .change() event) did not work properly across all versions of Internet Explorer. Instead, you had to check for the .click() event. This was an accessibility problem because it did not fire when a user changed a checkbox with the space bar instead of by clicking. Well, now we can rejoice. The following code snippet works exactly how you think it would across browsers, including IE.

Read more »