[HELP] Mootools mouse event error on Firefox

Question

swingingstars 0 Newbie Poster

15 Years Ago

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');
});

javascript

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

mouseEventattachment.zip (42.52 KB)

2 Contributors
3 Replies
199 Views
8 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by swingingstars

Alxandr 5 Junior Poster in Training

15 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

swingingstars 0 Newbie Poster · Answer 1 · 2009-05-27T23:51:34+00:00

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

swingingstars 0 Newbie Poster · Answer 2 · 2009-05-28T01:41:56+00:00

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)