views:

55

answers:

2

Again, I am working with code from my predecessor and am at a loss for this one. It appears to be a sampled navigation script. It is receiving an error in IE stating 'Object doesn't support this property or method'. Here is what I have narrowed the error down to.

The function:

/**
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html&gt;
* 
* @param  f  onMouseOver function || An object with configuration options
* @param  g  onMouseOut function  || Nothing (use configuration options object)
* @author    Brian Cherne <[email protected]>
*/
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};
cfg=$.extend(cfg,g?{over:f,out:g}:f);
var cX,cY,pX,pY;
var track=function(ev){cX=ev.pageX;
cY=ev.pageY;
};
var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);
ob.hoverIntent_s=1;
return cfg.over.apply(ob,[ev]);
}else{pX=cX;
pY=cY;
ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);
},cfg.interval);
}};
var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s=0;
return cfg.out.apply(ob,[ev]);
};
var handleHover=function(e){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;
}var ev=jQuery.extend({},e);
var ob=this;
if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
}if(e.type=="mouseover"){pX=ev.pageX;
pY=ev.pageY;
$(ob).bind("mousemove",track);
if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);
},cfg.interval);
}}else{$(ob).unbind("mousemove",track);
if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);
},cfg.timeout);
}}};
return this.mouseover(handleHover).mouseout(handleHover);
};
})(jQuery);

The document.ready line triggering the error:

var config = {    
         sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)    
         interval: 50, // number = milliseconds for onMouseOver polling interval    
         over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
         timeout: 200, // number = milliseconds delay before onMouseOut    
         out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
    };

    $("ul#topnav li .sub").css({'opacity':'0'});
    $("ul#topnav li").hoverIntent(config);

I am at a loss as to how to resolve this and finally get this section fixed.

The two functions that are defined within document.ready.

function megaHoverOver(){
        $(this).find(".sub").stop().fadeTo('fast', 1).show();

        //Calculate width of all ul's
        (function($) { 
            jQuery.fn.calcSubWidth = function() {
                rowWidth = 0;
                //Calculate row
                $(this).find("ul").each(function() {                    
                    rowWidth += $(this).width(); 
                }); 
            };
        })(jQuery); 

        if ( $(this).find(".row").length > 0 ) { //If row exists...
            var biggestRow = 0; 
            //Calculate each row
            $(this).find(".row").each(function() {                             
                $(this).calcSubWidth();
                //Find biggest row
                if(rowWidth > biggestRow) {
                    biggestRow = rowWidth;
                }
            });
            //Set width
            $(this).find(".sub").css({'width' :biggestRow});
            $(this).find(".row:last").css({'margin':'0'});

        } else { //If row does not exist...

            $(this).calcSubWidth();
            //Set Width
            $(this).find(".sub").css({'width' : rowWidth});

        }
    }

    function megaHoverOut(){ 
      $(this).find(".sub").stop().fadeTo('fast', 0, function() {
          $(this).hide(); 
      });
    }
A: 

Previously:

The problem is almost certainly opacity, which is not supported in IE. Check out this nice quirksmode article on cross-browser opacity issues.

Correction: As @patrick rightly points out, and backs up with a source code reference to boot, jQuery is smart enough to automatically deal with IE's own special brands of opacity handling. Whatever the OP's problem is, this is not the answer.

Ken Redler
The only `opacity` I see is in a jQuery call, where it is supported. http://github.com/jquery/jquery/blob/master/src/css.js#L51
patrick dw
@patrick -- Does jQuery clean this up even if he's passing in a map, rather than .css('x','y')? If so, then I stand corrected. I really ought to get out and use IE more.
Ken Redler
@Ken - Yes, jQuery accepts a map simply for the sake of setting multiple properties. Everything translates equally. Although I'd hate to say anything that would compel you to use IE *more*. ;o)
patrick dw
@Patrick - Don't worry, I'm focused primarily on NCSA Mosaic compatibility these days. Anyway, I've updated this answer with your correction, and am leaving the incorrect original for posterity.
Ken Redler
Ken +1 on your correction. (Someone else down voted you.)
patrick dw
A: 

I'm able to run that code without errors (see http://jsfiddle.net/veHEY/). It looks like the issue might be in the megaHoverOver and megaHoverOut functions that you're passing in through the configuration object. Do you have the code for those functions?

bdukes
BDukes, I will post the functions in an edit so it's not so messy and it will actually fit.
Slevin
Slevin
Firebug returned this error now:$("ul#topnav li").hoverIntent is not a function
Slevin
I'm not receiving any error on that page or in the updated jsFiddle (http://jsfiddle.net/veHEY/3/)...
bdukes