3

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!

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
bryanlewis
  • 577
  • 3
  • 10
  • 27

2 Answers2

5

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

Community
  • 1
  • 1
Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • This works nicely. For some reason it gives the transition on the li a weird dip though while in transition... :-/ will see if I can fix this problem. – bryanlewis Mar 21 '13 at 06:43
  • As @Musa commented above, there is [jQuery-migrate](https://github.com/jquery/jquery-migrate), which is a collection of functionality tests for what's been removed from previous versions. You could run this with quicksand and try to determine where the offending part is, and recode it. That might work better for you (see [`core.js`](https://github.com/jquery/jquery-migrate/blob/master/src/core.js) for where the `$.browser` bit is). You could try some older versions (the above is from jQuery-migrate 1.1.1). – Jared Farrish Mar 21 '13 at 06:51
  • Right, I'm linking to it with... and its working nicely but for some reason causes a dip while transitioning. Not for sure why. looking into the css – bryanlewis Mar 21 '13 at 06:53
  • On a side note, are you aware of how SO works with accepting answers (one per question) and upvoting good answers? – Jared Farrish Mar 21 '13 at 07:05
  • I've been on here only a few times. I know to upvote the correct answers. – bryanlewis Mar 21 '13 at 07:07
  • EDIT: Nevermind, I see you found it. `:)` If you asked a question, it's encouraged that you accept the best or correct answer if one is available. This is the means for users to gain rep. You accept an answer (one per question can be accepted) by clicking the outlined checkmark next to the top, left of the answer. – Jared Farrish Mar 21 '13 at 07:09
0

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

Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90
  • correct. I'm wondering if the plugin author will update the plugin or fix this issue. Or if there is a work around. – bryanlewis Mar 21 '13 at 06:31
  • 1
    That's a restatement of what the OP says they already know? The question is how to bypass or shim it so it does work, or (I guess) update the plugin? – Jared Farrish Mar 21 '13 at 06:31
  • @bryanlewis - Did you check the quicksand plugin page or project site? – Jared Farrish Mar 21 '13 at 06:32
  • @JaredFarrish yes, https://raw.github.com/razorjack/quicksand/v1.3/jquery.quicksand.js still is throwing the error though :-/ – bryanlewis Mar 21 '13 at 06:33