Re: IE mouseenter, mouseleave problems

[Niall Mccormack]

Cool - I'll try that just now.

Cheers
Niall


On 5 Nov 2008, at 00:52, jonlb wrote:

I ran into the same kind of problem with a drop down menu not working
quite right in IE. It seems that the mouseleave function in IE fires
when your mouse moves out of the <a> link. You should be able to
prevent it by moving the "hiddennavright" into the h2 that preceeds it
(where your <a> link is) and then actually have the mouseenter event
fire when it enters the h2, and the mouseleave event fire on the same
h2.

I didn't actually test this but it's the same basic thing I did to fix
my other issue.

I hope that helps or at least gets you pointed in the right direction.

jonlb



On Nov 4, 3:26 am, Niall Mccormack <[EMAIL PROTECTED]>
wrote:

Hi there,

Being a designer and flash developer I'm pretty new to the world of
css and javascript and I need some assitance.

I'm building a simple website for my friends company, and am using
mootools for some simple animation.

I'm using it on the following pages:

  - For the dropdown 'portfolio' 
navigationhttp://studiodavidhillman.itsallmememe.com/home/

  - For the next / previous sub nav links at the bottom. Rollover to

see the nav appearhttp://studiodavidhillman.itsallmememe.com/portfolio/books/liverpool- ...

The effects all work perfectly in Safari and Firefox but they don't

work properly in IE. The navigations slides / fades in ok, but as soon

as the mouse cursor leaves the button the navigation animates out.
This shouldn't happen due to the way I have the 'mouseenter' and
'mouseleave' events setup.

Here's the sample code for the fading menus on the portfolio page.

HTML
<div class="subnav" id="subnavright" >
        <h2><a href="/portfolio/books/stanley-spencer/"
id="subnavnextbutton">Next<img src="/images/general/arrow-right-
on.gif" width="17" height="11" /></a></h2>
        <div class="hiddennav" id="hiddennavright" >
                <ul>

<li><h1><a href="/portfolio/books/stanley- spencer/">Stanley

Spencer</a></h1></li>

<li><h1><a href="/portfolio/books/the-state- hermitage/">The State

Hermitage</a></h1></li>

<li><h1><a href="/portfolio/books/the- splendour-of-iran/">The

Splendour of Iran</a></h1></li>

<li><h1><a href="/portfolio/books/the- sixties-art-scene-in-

london/">The Sixties&#146; Art Scene in London</a></h1></li>

<li><h1><a href="/portfolio/books/terence- donovan-the-

photographs/">Terence Donovan: The Photographs</a></h1></li>
                </ul>
        </div>
</div>

Javascript
window.addEvent('domready', function() {
        var hiddennavright = $('hiddennavright');
        var hiddennavleft = $('hiddennavleft');

        $('subnavnextbutton').addEvent('mouseenter', function(e) {
                e.stop();
                hiddennavright.fade(1);
        });

        $('subnavright').addEvent('mouseleave', function(e) {
                e.stop();
                hiddennavright.fade(0);
        });

        $('subnavprevbutton').addEvent('mouseenter', function(e) {
                e.stop();
                hiddennavleft.fade(1);
        });

        $('subnavleft').addEvent('mouseleave', function(e) {
                e.stop();
                hiddennavleft.fade(0);
        });

        hiddennavright.fade('hide');
        hiddennavleft.fade('hide');

});

I've been very impressed with MooTools and it's built in functionality

so far. I find it a lot easier to use than scriptaculous that's for
sure.

Any help would be appreciated.

Cheers
Niall