PDA

View Full Version : MooFX Help?



cursed
01-16-2007, 03:07 AM
I use moofx (mootools.net) and I made an accordion effect, however, instead of fading colors when clicking on the accordian, make it show an image and change when clicked?


code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<script type="text/javascript" src="mootools.js"></script>

<link rel="shortcut icon" href="favicon.gif" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="mad4milk" />
<meta name="copyright" content="copyright@2005 John Smith" />
<meta name="description" content="nothing" />

<meta name="keywords" content="javascript effects, prototype, lightweight, mad4milk" />
<meta name="robots" content="all" />
<title>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </title>

<style type="text/css" media="screen">
@import 'style.css';
</style>

</head>

<body>

<div id="container">
<div id="header">
<h1><span>MFake Text ABCDEFGHIJKLMNOPQRSTUVWXY </span></h1>
</div>
<div id="content">

<h3 class="toggler introduction"><a href="#introduction">introduction</a></h3>
<div class="accordion">

<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>


</div>

<h3 class="toggler news"><a href="#whatsnew">what's new</a></h3>
<div class="accordion">


<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>


<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>
</div>

<h3 class="toggler gethelp"><a href="#gethelp">Stuff</a></h3>

<div class="accordion">
<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>

</div>

<div class="accordion">

<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>

<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY .</p>

<p>Also note: the mootools version also support effects <strong>chainability</strong> and a new Effect, <em>Fx</em>.<em>Slide</em>.</p>

</div>

<h3 class="toggler mootools"><a href="#mootools">get moo.fx for mootools</a></h3>
<div class="accordion">
<h4>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </h4>
<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>
<h4>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </h4>

<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>
</div>

<h3 class="toggler prototype"><a href="#prototype">get moo.fx for prototype</a></h3>
<div class="accordion">
<h4>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY <a href="moofx.zip">DOWNLOAD</a></h4>

<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>
<h4>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </h4>
<p>Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </p>

</div>

</div>
<div id="footer">
<a href="/"><span>&copy; 2005 John Smith</span></a>

</div>
<div id="ads">
<h3><a href="http://www.text-link-ads.com/?ref=21008">text-link-ads : make money with text links!</a></h3>
<div class="ads">

Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY Fake Text ABCDEFGHIJKLMNOPQRSTUVWXY </span></li>
</ul> </div>
</div>
</div>

<script type="text/javascript">

var stretchers = $$('div.accordion');
stretchers.each(function(item){
item.setStyles({'height': '0', 'overflow': 'hidden'});
});

window.onload = function(){ //safari cannot get style if window isnt fully loaded

var togglers = $$('h3.toggler');

var bgFx = [];

togglers.each(function(toggler, i){
toggler.defaultColor = toggler.getStyle('background-color');

//fx creation
bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});
});

var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,

onActive: function(toggler, i){
bgFx[i].toColor('#000000');
toggler.getFirst().setStyle('color', '#fff');
},

onBackground: function(toggler, i){
bgFx[i].clearTimer();
toggler.setStyle('background-color', toggler.defaultColor);
toggler.getFirst().setStyle('color', '#222');
}
});

//anchors
function checkHash(){
var found = false;
$$('h3.toggler a').each(function(link, i){
if (window.location.hash.test(link.hash)){
myAccordion.showThisHideOpen(i);
found = true;
}
});
return found;
}

if (!checkHash()) myAccordion.showThisHideOpen(0);

//ball!
var ball = $E('#header h1');
var ballStyles = new Fx.Styles(ball, {duration: 800, transition: Fx.Transitions.elasticOut});
new Drag.Move(ball, {
onComplete: function(){
ballStyles.custom({'top': [this.element.getStyle('top').toInt(), 13], 'left': [this.element.getStyle('left').toInt(), 358]});
}
});

};

try {
Window.disableImageCache();
}catch(e){}

</script>

</body>
</html>



mootools.js and style.css is attached (size is too big for post size.)

cursed
01-17-2007, 09:26 PM
bump.