JQuery 'not defined error' - not working in chrome.

JQuery 'not defined error' - not working in chrome.

I've just started work with a company using jQuery on their website.

They've had issues with their submenu which uses hoverintent.  In Chrome, the sub menu doesn't appear while in Firefox and IE - it does.


I ran it through the Google Chrome JS tool and it seems that the error is coming out on the first line (function), being classed as not defined.   This is from jquery.hoverIntent.js:

  1. (function($) {
        $.fn.hoverIntent = function(f,g) {
            // default configuration options
            var cfg = {
                sensitivity: 7,
                interval: 100,
                timeout: 0
            };
            // override configuration options with user supplied object
            cfg = $.extend(cfg, g ? { over: f, out: g } : f );

            // instantiate variables
            // cX, cY = current X and Y position of mouse, updated by mousemove event
            // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
            var cX, cY, pX, pY;

            // A private function for getting mouse position
            var track = function(ev) {
                cX = ev.pageX;
                cY = ev.pageY;
            };

            // A private function for comparing current and previous mouse position
            var compare = function(ev,ob) {
                ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
                // compare mouse positions to see if they've crossed the threshold
                if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
                    $(ob).unbind("mousemove",track);
                    // set hoverIntent state to true (so mouseOut can be called)
                    ob.hoverIntent_s = 1;
                    return cfg.over.apply(ob,[ev]);
                } else {
                    // set previous coordinates for next time
                    pX = cX; pY = cY;
                    // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
                    ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
                }
            };

            // A private function for delaying the mouseOut function
            var delay = function(ev,ob) {
                ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
                ob.hoverIntent_s = 0;
                return cfg.out.apply(ob,[ev]);
            };

            // A private function for handling mouse 'hovering'
            var handleHover = function(e) {
                // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
                var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
                while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
                if ( p == this ) { return false; }

                // copy objects to be passed into t (required for event object to be passed in IE)
                var ev = jQuery.extend({},e);
                var ob = this;

                // cancel hoverIntent timer if it exists
                if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

                // else e.type == "onmouseover"
                if (e.type == "mouseover") {
                    // set "previous" X and Y position based on initial entry point
                    pX = ev.pageX; pY = ev.pageY;
                    // update "current" X and Y position based on mousemove
                    $(ob).bind("mousemove",track);
                    // start polling interval (self-calling timeout) to compare mouse coordinates over time
                    if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

                // else e.type == "onmouseout"
                } else {
                    // unbind expensive mousemove event
                    $(ob).unbind("mousemove",track);
                    // if hoverIntent state is true, then call the mouseOut function after the specified delay
                    if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
                }
            };

            // bind the function to the two event listeners
            return this.mouseover(handleHover).mouseout(handleHover);
        };
    })(jQuery);   

















































































There may be a conflict with the slideshow (which uses mootools), but I don't see why as the slideshow is brought in via an iframe from a seperate html page with it's own scripts. 

jQuery is not my forte, so I'm not 100% how to rectify this issue and would highly appreciate any help from you experts.