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' navigation
http://studiodavidhillman.itsallmememe.com/home/
- For the next / previous sub nav links at the bottom. Rollover to
see the nav appear
http://studiodavidhillman.itsallmememe.com/portfolio/books/liverpool-biennial-international-06/
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’ 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
