S
Shirley
Hi~ guys~! ^__^
I made a simple program by using mootools framework.
One is html version and the other is xul version.
It works well if I load the html version on Firefox.
But it does not work if I load the xul version on Firefox.
The error message is:
this.step.periodical is not a function.
But, that function is definded in mootools.js and has no problem when
it used in html document.
I don't know why.
Please help me~~ ¤Ì.¤Ð
------------------------------
[uisample.html]
------------------------------
<!DOCTYPE html PUBLIC="-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UI Sample (HTML)</title>
<link rel="stylesheet" href="uisample.css" type="text/css" />
<script language="javascript" type="text/javascript"
src="mootools.js"></script>
</head>
<body>
<div id="myElement" ></div>
<script>
var fx = new Fx.Styles('myElement', {duration: 500, transition:
Fx.Transitions.Quart.easeOut});
$('myElement').addEvent('mouseenter', function(){
fx.start({
'width': 500,
'height': 500,
'background-color': '#89c577'
});
);
$('myElement').addEvent('mouseleave', function(){
fx.start({
'width': 100,
'height': 100,
'background-color': '#bcd965'
});
);
</script>
</body>
</html>
------------------------------
[uisample.xul]
------------------------------
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="uisample.css" type="text/css"?>
<window id="sample" title="UI Sample (XUL)"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul"
onload="init()">
<script type="application/x-javascript" src="mootools.js"/>
<html:div>
<html:div id="myElement" ></html:div>
</html:div>
<script>
function init() {
var fx = new Fx.Styles('myElement', {duration: 500,
transition: Fx.Transitions.Quart.easeOut});
$('myElement').addEvent('mouseover', function(){
fx.start({ 'width':
'500px',
'height': '500px',
'background-color': '#89c577'
});
});
$('myElement').addEvent('mouseout', function(){
fx.start({
'width': '100px',
'height': '100px',
'background-color': '#bcd965'
});
});
}
</script>
</window>
I made a simple program by using mootools framework.
One is html version and the other is xul version.
It works well if I load the html version on Firefox.
But it does not work if I load the xul version on Firefox.
The error message is:
this.step.periodical is not a function.
But, that function is definded in mootools.js and has no problem when
it used in html document.
I don't know why.
Please help me~~ ¤Ì.¤Ð
------------------------------
[uisample.html]
------------------------------
<!DOCTYPE html PUBLIC="-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UI Sample (HTML)</title>
<link rel="stylesheet" href="uisample.css" type="text/css" />
<script language="javascript" type="text/javascript"
src="mootools.js"></script>
</head>
<body>
<div id="myElement" ></div>
<script>
var fx = new Fx.Styles('myElement', {duration: 500, transition:
Fx.Transitions.Quart.easeOut});
$('myElement').addEvent('mouseenter', function(){
fx.start({
'width': 500,
'height': 500,
'background-color': '#89c577'
});
);
$('myElement').addEvent('mouseleave', function(){
fx.start({
'width': 100,
'height': 100,
'background-color': '#bcd965'
});
);
</script>
</body>
</html>
------------------------------
[uisample.xul]
------------------------------
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="uisample.css" type="text/css"?>
<window id="sample" title="UI Sample (XUL)"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul"
onload="init()">
<script type="application/x-javascript" src="mootools.js"/>
<html:div>
<html:div id="myElement" ></html:div>
</html:div>
<script>
function init() {
var fx = new Fx.Styles('myElement', {duration: 500,
transition: Fx.Transitions.Quart.easeOut});
$('myElement').addEvent('mouseover', function(){
fx.start({ 'width':
'500px',
'height': '500px',
'background-color': '#89c577'
});
});
$('myElement').addEvent('mouseout', function(){
fx.start({
'width': '100px',
'height': '100px',
'background-color': '#bcd965'
});
});
}
</script>
</window>