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:

HTML 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.

Thread: MooFX Help?

Thread Tools

Search Thread

MooFX Help?

Bookmarks

Bookmarks

Posting Permissions