Hi Wizzud,
Figured it out. Two things:
1) I screwed up fixEvent() when I copied its logic from jQuery, the
statement
var e = document.documentElement
overrode the event variable. But that bugger simple got me lost in
finding the real problem.
2) jQuery selector hover binding vs direct mouse events in tags.
I have a few test suites and I didn't realize the different with the
ones using a jQuery hover bind vs a direct onMouseOver/Out event
setting. Maybe you can give me some tips here.
For my new "wcTipster" plugin, its original and main purpose was to
create a single hover handler to handle a large load requirement, 400+
<a> tags in a tree that binds slow with jQuery. FF is fast, but IE is
terrible here.
So for this setup, the plugin function is basically this:
function wcTipsters(fnShow,fnHide) {
...
var ready = false;
this.start = function() { ready = true; }
this.handleHover = function(ob,e) {
if (!this.ready) return;
...
if (e.type == "mouseover") fnShow.apply(ob,[e]);
if (e.type == "mouseout") fnHide.apply(ob,[e]);
...
}
}
and to implement it with a server-side created page with 400+
elements, I do:
<script type='text/javascript'>
$(window).load(function() {
wctipster.start();
});
// expose wctipster instance for the A tag mouse events
var wctipster = new wcTipster();
</script>
and the body will have 400+ tags with the direct events assigned:
<a href="...." class="wcpreview"
onMouseOver="wctipster.handleHover(this,event);"
onMouseOut="wctipster.handleHover(this,event);"
>xxxx</a>
To allow for smaller loads where speed isn't an issue, I made
wcTipster a jQuery plugin like so:
//==========================================
// This provides a jQuery wrapper plugin for wcTipster
//==========================================
(function($) {
$.fn.wcTipster = function(f,g) {
var tip = new wcTipster(f,g);
this.bind("mouseover",function(ev) { tip.handleHover(this,ev);})
this.bind("mouseout", function(ev) { tip.handleHover(this,ev);});
tip.start();
return this;
};
})(jQuery);
and implement it in smaller load pages:
<script type='text/javascript'>
$(window).load(function() {
$('a.wcpreview').wcTipster(});
});
</script>
The problem was that my fnShow() callback was designed to use
event.pageX/Y and they were only available when the jQuery did the
hover binding.
With the direct mouse event, this jQuery event fix up action was
lost.
So to resolve it, I changed this.handleOver() to fix up the event:
this.handleHover = function(ob,e) {
...
e = fixEvent(e);
...
}
Phew! So this resolves it for IE when I'm using rthe direct mouse
tag events. The typo just throw me off :-)
Thanks for your interest to help out.
--
HLS
On Oct 13, 5:24 am, Wizzud <[EMAIL PROTECTED]> wrote:
> Can you make a test page available that demontrates this problem?
> And what version of IE has the problem?
>
> On Oct 13, 6:47 am, Pops <[EMAIL PROTECTED]> wrote:
>
> > I am not sure how I missed this early in my plugin development, but I
> > see it now.
>
> > For my new hover plugin, I noticed jQuery was extending the event
> > structure with extra mouse information such as:
>
> > event.pageY and event.pageX
>
> > and that this extended event is passed to my show and hide handlers.
>
> > Well, to make a story short, after working out my plugin logic for
> > screen and viewport dimensions, compensating for scrolls, etc, testing
> > it under IE, I see that the event pass to me show handler does not
> > have the extended information.
>
> > In other words, in my function callback:
>
> > function handleShow(e)
> > {
> > var mX = e.pageX;
> > var mY = e.pageY;
> > ...
>
> > }
>
> > Under IE, the mouse X/Y variables are undefined.
>
> > To fix it, I had to copy some "fix" method logic in jQuery that checks
> > and sets the event.pageX/Y properties, like so:
>
> > function fixEvent(e)
> > {
> > // Calculate pageX/Y if missing and clientX/Y available
> > // note: IE seems to be the only one that needs this because
> > // jQuery will add it for others. Don't know why not
> > // for IE.
> > if ( e.pageX == null && e.clientX != null ) {
> > var e = document.documentElement, b = document.body;
> > e.pageX = e.clientX + (e && e.scrollLeft || b.scrollLeft || 0);
> > e.pageY = e.clientY + (e && e.scrollTop || b.scrollTop || 0);
> > }
> > return e;
>
> > }
>
> > function handleShow(e)
> > {
> > e = fixEvent(e)
> > var mX = e.pageX;
> > var mY = e.pageY;
> > ...
>
> > }
>
> > Again, I don't know how I missed this early on because I was testing
> > IE and FF as I was doing my work. But in the final analysis, this
> > is the behavior I am seeing under IE only.
>
> > Why would jQuery not set the extended event info with IE?
>
> > Thanks in advance.
>
> > --
> > HLS
