Hi

I'm new to mootools, could anyone help me on this?
i got on mouseenter and mouseout works on IE 8, but on Firefox, it only works just once

I don't know whether i's the css or the mootools code that went wrong

I've attached some files here too if you want to test


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="templates/masterTEST.css" />
<script type="text/javascript" src="templates/mootools-1.2.2-core-nc.js"></script>  
<script type="text/javascript" src="templates/mootools-1.2.2.2-more.js"></script>  
<script type="text/javascript" src="templates/siteTEST.js"></script>  
<title>Testpage</title>
</head>

<body>
            <div id="skrolly">
                <div id="letters">
                    <div class="letters-title-bran">A</div>
                    <div class="letters-desc-bran">
                    DESCRIPTION HEADER<br />
                    <span style="font-size:10px;">Small descriptions on the topic</span>
                    </div>
                </div>
                <div id="letters">
                    <div class="letters-title-adve">B</div>
                    <div class="letters-desc-adve">
                    DESCRIPTION HEADER<br />
                    <span style="font-size:10px;">Small descriptions on the topic</span>
                    </div>
                </div>
                <div id="letters">
                    <div class="letters-title-desi">C</div>
                    <div class="letters-desc-desi">
                    DESCRIPTION HEADER<br />
                    <span style="font-size:10px;">Small descriptions on the topic</span>
                    </div>
                </div>
                <div id="letters">
                    <div class="letters-title-webd">D</div>
                    <div class="letters-desc-webd">
                    DESCRIPTION HEADER<br />
                    <span style="font-size:10px;">Small descriptions on the topic</span>
                    </div>
                </div>
                <div id="letters">
                    <div class="letters-title-phot">E</div>
                    <div class="letters-desc-phot">
                    DESCRIPTION HEADER<br />
                    <span style="font-size:10px;">Small descriptions on the topic</span>
                    </div>
                </div>
            </div>   
        
<script type="text/javascript" src="templates/afterscriptsTEST.js"></script>  
</body>
</html>

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background: #FFF;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	height: 100%;
}
h1 {
	font-size: 30px;
	font-weight:bold;
	line-height:80px;
	letter-spacing:-3px;
	text-align:center;

}
h2 {
	font-size: 0.9em;
}
.par {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height:22px;
	width:350px;
	height:400px;
	padding:60px 0px 0px 120px;
}
li {
	list-style-type:square;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height:14px;
	margin-right:15px;
	text-align:center;
}
img { border:none; }
a:link{
	border:none;
	text-decoration:none;
}
a:hover{
	border:none;
	text-decoration:none;
}
#container{
	width:780px;
	height:577px;
	margin-left: auto ;
	margin-right: auto ;
	text-align:left;
}
#container-inside{
	width:680px;
	height:577px;
	margin-left: auto ;
	margin-right: auto ;
	text-align:left;
	position:relative;
	float:left;
	overflow:hide;
}
#skrolly {
	width:680px;
	height:577px; 
	text-align:left;
	position:relative;
	float:left;
	overflow:hidden;
	display:block;
}
#skrolly a, #skrolly a:hover,#skrolly a:visited{
	font-family: Arial, Helvetica, sans-serif;
	line-height:2em;
	text-decoration:none;
	overflow:hidden;
	height:20px;
	color:#000000;
}
#navigation {
	font-size:12px;
	min-height:370px;
	height:auto !important;
	height:370px; 
	text-align:right;
	position:absolute;
	float:right;
	right:0;
	top:0;
}
#navigation a, #navigation a:hover,#navigation a:visited{
	font-family: Arial, Helvetica, sans-serif;
	line-height:25px;
	text-decoration:none;
	overflow:hidden;
	height:20px;
	color:#000000;
}
#readthis a, #readthis a:hover,#readthis a:visited{
	text-decoration:none;
	overflow:hidden;
	color:#000000;
}
#readthis {
	left:70%;
	top:60%;
	position:absolute;
	float:right;
	z-index:999;
}
#aboutus {
	width:580px;
	height:620px;
	color:#FFFFFF;
	margin-top:-10px;
	background-color:#F8971D;
}
#letters {
	margin-bottom:5px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	overflow:hidden;
}
.letters-title-bran {
	font-size:200px; 
	color:#F8971D;
	line-height:145px;
	cursor:pointer;
	float:left;
	margin-top:0px; 
	margin-left:30px;
	display:inline;
}
.letters-desc-bran {
	font-size:15px; 
	color:#000000; 
	line-height:140px;
	font-weight:normal;
	visibility:hidden;
}
.letters-title-adve {
	font-size:200px; 
	color:#F8971D;
	line-height:145px;
	cursor:pointer;
	float:left;
	margin-top:0px; 
	margin-left:30px;
	display:inline;
}
.letters-desc-adve {
	font-size:15px; 
	color:#000000; 
	line-height:140px;
	font-weight:normal;
	visibility:hidden;
}
.letters-title-desi {
	font-size:200px; 
	color:#F8971D;
	line-height:150px;
	cursor:pointer;
	float:left;
	margin-top:0px; 
	margin-left:85px;
}
.letters-desc-desi {
	font-size:15px; 
	color:#000000; 
	height:150px;
	font-weight:normal;
	visibility:hidden;
}
.letters-title-webd {
	font-size:270px; 
	color:#000000;
	line-height:200px;
	cursor:pointer;
	float:left;
	margin-top:0px; 
	margin-left:85px;
}
.letters-desc-webd {
	font-size:15px; 
	color:#000000; 
	height:200px;
	font-weight:normal;
	visibility:hidden;
}
.letters-title-phot {
	font-size:100px; 
	color:#F8971D;
	line-height:80px;
	cursor:pointer;
	float:left;
	margin-top:0px; 
	margin-left:310px;
}
.letters-desc-phot {
	font-size:15px; 
	color:#000000; 
	height:80px;
	font-weight:normal;
	visibility:hidden;
}

and the Javascript :

$$('div.letters-title-bran').addEvent('mouseenter', function() {
	$$('div.letters-desc-bran').setStyle('visibility','visible');
	$$('div.letters-desc-bran').fade('in');
});
$$('div.letters-title-bran').addEvent('mouseout', function(event) {
	$$('div.letters-desc-bran').fade('out');
});

$$('div.letters-title-adve').addEvent('mouseenter', function() {
	$$('div.letters-desc-adve').setStyle('visibility','visible');
	$$('div.letters-desc-adve').fade('in');
});
$$('div.letters-title-adve').addEvent('mouseout', function() {
	$$('div.letters-desc-adve').fade('out');
});

$$('div.letters-title-desi').addEvent('mouseenter', function() {
	$$('div.letters-desc-desi').setStyle('visibility','visible');
	$$('div.letters-desc-desi').fade('in');
});
$$('div.letters-title-desi').addEvent('mouseout', function() {
	$$('div.letters-desc-desi').fade('out');
});

$$('div.letters-title-webd').addEvent('mouseenter', function() {
	$$('div.letters-desc-webd').setStyle('visibility','visible');
	$$('div.letters-desc-webd').fade('in');
});
$$('div.letters-title-webd').addEvent('mouseout', function() {
	$$('div.letters-desc-webd').fade('out');
});

$$('div.letters-title-phot').addEvent('mouseenter', function() {
	$$('div.letters-desc-phot').setStyle('visibility','visible');
	$$('div.letters-desc-phot').fade('in');
});
$$('div.letters-title-phot').addEvent('mouseout', function() {
	$$('div.letters-desc-phot').fade('out');
});

Not shure why it dosn't work. But I'll give you one tip though.
In stead of

$$('div.letters-title-bran').addEvent('mouseenter', function() {
	$$('div.letters-desc-bran').setStyle('visibility','visible');
	$$('div.letters-desc-bran').fade('in');
});
$$('div.letters-title-bran').addEvent('mouseout', function(event) {
	$$('div.letters-desc-bran').fade('out');
});

try writing

$$('div.letters-title-bran').each(function(item) {
        item.addEvents({
                mouseenter: function() {
                        var div_letters_desc_bran =  $$('div.letters-desc-bran');
	                div_letters_desc_bran.setStyle('visibility','visible');
        	        div_letters_desc_bran.fade('in');
                },
                mouseout: function() {
	                $$('div.letters-desc-bran').fade('out');
                }
        });
});

And so on. Calling $$ takes time. Try avoiding doing it to many times.

thanks for the suggestion.. that's a good way to write the code, only iterate once..

on firefox the mouse keeps flickering until i come to the center of the letter..

a friend of mine says that maybe i have to do a removeEvent thing, but i'm not sure how to do that

After an hour of trying, i found out [some] solution for this

instead of using class, i changed them into ids
with some css hacks, it works

I still haven't make the js compact, but you'll get the idea

HTML CHANGES

from this

<div class="letters-title-bran">A</div>
                    <div class="letters-desc-bran">
                    DESCRIPTION HEADER<br />
                    <span style="font-size:10px;">Small descriptions on the topic</span>
                    </div>

to this

<div id="letters">
                    <div id="letters-title-bran">A</div>
                    <div id="letters-desc-bran">
                    DESCRIPTION HEADER<br />
                    <span style="font-size:10px;">Small descriptions on the topic</span>
                    </div>
                </div>

CSS CHANGES
From this

.letters-title-bran {
	font-size:200px; 
	color:#F8971D;
	line-height:145px;
	cursor:pointer;
	float:left;
	margin-top:0px; 
	margin-left:30px;
	display:inline;
}
.letters-desc-bran {
	font-size:15px; 
	color:#000000; 
	line-height:140px;
	font-weight:normal;
	visibility:hidden;
}

To this

#letters-title-bran {
	font-size:200px; 
	color:#F8971D;
	line-height:145px;
	cursor:pointer;
	float:left;
	margin-top:0px; 
	margin-left:30px;
	display:inline;
}
#letters-desc-bran {
	font-size:15px; 
	color:#000000; 
	line-height:140px;
	font-weight:normal;
	opacity:0;
	filter: alpha(opacity = 0); /* IE 6 hack */
	zoom: 1; /* IE 6 hack */
	display:inline;
}

AND THE SCRIPT
From this

$$('div.letters-title-bran').addEvent('mouseenter', function() {
	$$('div.letters-desc-bran').setStyle('visibility','visible');
	$$('div.letters-desc-bran').fade('in');
});
$$('div.letters-title-bran').addEvent('mouseout', function(event) {
	$$('div.letters-desc-bran').fade('out');
});

To this

$('letters-title-bran').addEvent('mouseenter', function() {
	var branElement = $('letters-desc-bran');
	var myEffect = new Fx.Morph(branElement, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
	myEffect.start({
		'opacity': [0, 1]
	});
	
});

$('letters-title-bran').addEvent('mouseout', function() {
	var branElement = $('letters-desc-bran');
	var myEffect = new Fx.Morph(branElement, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
	myEffect.start({
		'opacity': [1, 0]
	});
	
});

I changed the visibility property to opacity, so it needs to be hacked ;p (note the filter and zoom)

This question has already been answered. Start a new discussion instead.