jQuery.browser script or shim for backwards-compat

Question

I'm trying to use quicksand the jquery plugin and I'm getting this error with jquery 1.9.1.

"Uncaught TypeError: Cannot read property 'msie' of undefined"

I know that msie is the flag on the jQuery.browser property jQuery.browser was deprecated since version 1.3 and was removed in jQuery 1.9.0

Which is why this is causing the error. But is there a fix so that quicksand will work again?

Any help or advice would be great!

Thanks in advance!

Answer 1

Note for the Intrepid Developer(s)

A (few) obligatory words on jQuery.browser and jQuery.support:

jQuery.browser contains flags for the useragent, read from navigator.userAgent. We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser may be moved to a plugin in a future release of jQuery.

Rather than using $.browser to detect the current user agent and alter the page presentation based on which browser is running, it is a good practice to use feature detection. To make this process simpler, jQuery performs many such tests and sets properties of the jQuery.support object.

Moral of the story: Update your projects, remove reliance on jQuery.browser, and use feature detection where necessary. To test and find areas where your projects over-rely on deprecated or removed methods or properties, see jQuery-migrate.

Also see Modernizr.js and YepNope.js for alternatives to jQUery feature detection.

---

A jQuery shim file to replace $.browser, courtesy the fancyBox-rails project:

// jQuery 1.9 has removed the `$.browser` property, fancybox relies on
// it, so we patch it here if it's missing.
// This has been copied from jQuery migrate 1.1.1.
if ( !jQuery.browser ) {
  var uaMatch = function( ua ) {
    ua = ua.toLowerCase();

    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
      /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
      /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
      /(msie) ([\w.]+)/.exec( ua ) ||
      ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
      [];

    return {
      browser: match[ 1 ] || "",
      version: match[ 2 ] || "0"
    };
  };

  matched = uaMatch( navigator.userAgent );
  browser = {};

  if ( matched.browser ) {
    browser[ matched.browser ] = true;
    browser.version = matched.version;
  }

  // Chrome is Webkit, but Webkit is also Safari.
  if ( browser.chrome ) {
    browser.webkit = true;
  } else if ( browser.webkit ) {
    browser.safari = true;
  }

  jQuery.browser = browser;
}

https://github.com/hecticjeff/fancybox-rails/blob/master/vendor/assets/javascripts/jquery.browser.js

Answer 2

You are using quicksand plugin that contain code (i.e $.browser) that was removed from jQuery starting with version 1.9.