Mootools - My Favourite Javascript Library

[codercode 0]

It kind of amazes me that there's not even a mention of the Mootools javascript library throughout this whole forum. So here I'll do a brief introduction and a tutorial on how to produce the famous accordion effect.

http://www.webshots.com/todays?utm_source=webshots&utm_content=catchall&utm_campaign=legacyURL

MooTools is a compact, modular, Object-Oriented javascript framework designed to make writing extensible and compatible code easier and faster. MooTools lets you get the job done efficiently and effectively.

It is slightly based on the powerful Prototype javascript framework, of which Scriptaculous runs on.

(But frankly, I dislike Scriptaculous due to its large file size = slows down page load time. The same effects could be achieved using Mootools which is much much much smaller in size (about 30kb compressed with other plugins included)) Moreover, you can select the only modules you want (thus reducing file size) because Mootools is modular.

 

Seeing is believing. See for yourself what can be done with Mootools.

 

It first started as the popular Moo.fx javascript effects library which boasts its 3kb file size and powerful effects

 

Moo.fx became so popular that its creators decided to lay out a full-featured javscript library. Mootools is currently in version 1.1.

 

Even sites like Ubuntu.com and Joomla.com use Mootools

 

Now on to my tutorial: How to create Accordion effect with Mootools

 

First, we create a HTML skeleton of your webpage

<h3>	The Mighty Accordion</h3><div id="accordion">	<h3 class="toggler atStart">		History	</h3>	<div class="element atStart">		<p>			The first suggestion that all organisms may have had a common ancestor and diverged			through random variation and natural selection was made in 1745 by the French			mathematician and scientist Pierre-Louis Moreau de Maupertuis (1698-1759) in his work			Venus physique. Specifically:		</p>		<blockquote>			"Could one not say that, in the fortuitous combinations of the productions of nature,			as there must be some characterized by a certain relation of fitness which are able			to subsist, it is not to be wondered at that this fitness is present in all the			species that are currently in existence? Chance, one would say, produced an			innumerable multitude of individuals; a small number found themselves constructed in			such a manner that the parts of the animal were able to satisfy its needs; in another			infinitely greater number, there was neither fitness nor order: all of these latter			have perished. Animals lacking a mouth could not live; others lacking reproductive			organs could not perpetuate themselves... The species we see today are but the			smallest part of what blind destiny has produced..."		</blockquote>		<p>			In 1790, Immanuel Kant (Konigsberg (Kaliningrad) 1724 - 1804), in his Kritik der			Urtheilskraft, states that the analogy of animal forms implies a common original type			and thus a common parent.		</p>		<p>			Charles Darwin's grandfather, Erasmus Darwin, hypothesized in 1795 that all			warm-blooded animals were descended from a single "living filament":		</p>		<blockquote>			"...would it be too bold to imagine, that all warm-blooded animals have arisen from			one living filament, which THE GREAT FIRST CAUSE endued with animality...?"			(Zoonomia, 1795, section 39, "Generation")		</blockquote>		<p>			In 1859, Charles Darwin's The Origin of Species was published. The views about common			descent expressed therein vary between suggesting that there was a single "first			creature" to allowing that there may have been more than one. Here are the relevant			quotations from the Conclusion:		</p>		<blockquote>			"[P]robably all of the organic beings which have ever lived on this earth have			descended from some one primordial form, into which life was first breathed." "The			whole history of the world, as at present known, ... will hereafter be recognised as			a mere fragment of time, compared with the ages which have elapsed since the first			creature, the progenitor of innumerable extinct and living descendants, was created."			"When I view all beings not as special creations, but as the lineal descendants of			some few beings which lived long before the first bed of the Silurian system was			deposited, they seem to me to become ennobled."		</blockquote>		<p>			The famous closing sentence describes the "grandeur in this view of life, with its			several powers, having been originally breathed into a few forms or into one." The			phrase "one form" here seems to hark back to the phrase "some few beings"; in any			case, the choice of words is remarkable for its consistency with recent ideas about			there having been a single ancestral "genetic pool".		</p>	</div>	<h3 class="toggler atStart">		Evidence of universal common descent	</h3>	<div class="element atStart">		<h4>			Common biochemistry and genetic code		</h4>		<p>			All known forms of life are based on the same fundamental biochemical organisation:			genetic information encoded in DNA, transcribed into RNA, through the effect of			protein- and RNA-enzymes, then translated into proteins by (highly similar)			ribosomes, with ATP, NADH and others as energy currencies, etc. Furthermore, the			genetic code (the "translation table" according to which DNA information is			translated into proteins) is nearly identical for all known lifeforms, from bacteria			to humans, with minor local differences. The universality of this code is generally			regarded by biologists as definitive evidence in favor of the theory of universal			common descent. Analysis of the small differences in the genetic code has also			provided support for universal common descent.[2]		</p>		<h4>			Irrelevant differences		</h4>		<p>			Differences which have no relevance to evolution and therefore cannot be explained by			convergence, tend to be very compelling support for the universal common descent			theory.		</p>		<p>			Such evidence has come from two domains: amino acid sequences and DNA sequences.			Proteins with the same 3-d structure need not have identical amino acid sequences;			any irrelevant similarity between the sequences is evidence for common descent. In			certain cases, there are several codons (DNA triplets) that code for the same amino			acid. Thus, if two species use the same codon at the same place to specify an amino			acid that can be represented by more than one codon, that is evidence for recency of			a common ancestor.		</p><img src=		"http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Phylogenetic_tree.svg/340px-Phylogenetic_tree.svg.png"		class="float-right" />		<p>			The universality of many aspects of cellular life is often pointed to as supportive			evidence to the more compelling evidence listed above. These similarities include the			energy carrier ATP, and the fact that all amino acids found in proteins are			left-handed. It is possible that these similarities resulted because of the laws of			physics and chemistry, rather than universal common descent and therefore resulted in			convergent evolution.		</p>		<h4>			Phylogenetic trees		</h4>		<p>			Another important piece of evidence is that it is possible to construct detailed			phylogenetic trees mapping out the proposed divisions and common ancestors of			species, and no matter what method is used, morphological (based on appearance,			embryology, etc) or molecular (based on mutation rates and relative similarities of			important, conserved genes), still get extremely similar results. If there were no			common ancestor, these different methods should give wildly different results, thus			the phylogenetic tree is strong evidence of common descent.		</p>		<div style="clear:both"></div>	</div>	<h3 class="toggler atStart">		Examples of common descent	</h3>	<div class="element atStart">		<h4>			Artificial selection		</h4>		<p>			Artificial selection offers remarkable examples of the amount of diversity that can			exist between individuals sharing a late common ancestor. To perform artificial			selection, one begins with a particular species (following examples include wolves			and wild cabbage) and then, at every generation, only allow certain individuals to			reproduce, based on the degree to which they exhibit certain desirable			characteristics. In time, it is expected that these characteristics become			increasingly well-developed in successive generations. Many examples of artificial			selection, like the ones below, occurred without the guidance of modern scientific			insight.		</p>		<h4>			Dog breeding		</h4><img src=		"http://upload.wikimedia.org/wikipedia/en/thumb/7/7e/IMG013biglittledogFX_wb.jpg/180px-IMG013biglittledogFX_wb.jpg"		class="float-right" />		<p>			An obvious example of the power of artificial selection is the diversity found in			various breed in domesticated dogs. The various breeds of dogs all share common			ancestry (being all ultimately descended from wolves) but were domesticated by humans			and then selectively bred in order to enhance various features such as coat color and			length or body size. To see the wide range of difference between the many breeds of			dogs compare the Chihuahua, Great Dane, Basset Hound, Pug, and Poodle. Also compare			this enormous diversity with the relative uniformity of wild wolves.		</p>	</div></div>

Then, we style it properly with CSS

.toggler {	color: #222;	margin: 0;	padding: 2px 5px;	background: #eee;	border-bottom: 1px solid #ddd;	border-right: 1px solid #ddd;	border-top: 1px solid #f5f5f5;	border-left: 1px solid #f5f5f5;	font-size: 11px;	font-weight: normal;	font-family: 'Andale Mono', sans-serif;} .element { } .element p {	margin: 0;	padding: 4px;} .float-right {	padding:10px 20px;	float:right;} blockquote {	text-style:italic;	padding:5px 0 5px 30px;}

Just to give you an idea of how it looks like without the accordion effect:

 

With the accordion effect, everything stacks up nicely, thus saving viewport space and at the same time produces aesthetics value:

 

Now that we already have the HTML and CSS, all we need to do is just add a few lines of javascript. With Mootools, this has never really been easier:

opacity linenums:0'>var accordion = new Accordion('h3.atStart', 'div.atStart', { opacity: false, onActive: function(toggler, element){ toggler.setStyle('color', '#ff3300'); }, onBackground: function(toggler, element){ toggler.setStyle('color', '#222'); }}, $('accordion')); var newTog = new Element('h3', {'class': 'toggler'}).setHTML('Common descent'); var newEl = new Element('div', {'class': 'element'}).setHTML('<p>codercode codercode sample</p>'); accordion.addSection(newTog, newEl, 0);

That is all it takes to create a nice accordion effect for your divs! Hope y'all enjoy this tutorial

[delivi 0]

this looks an interesting javascript library like the prototype ans scriptlocious for cool webeffectsplease add more tutorials on this so the noobs can learn easily on using this library for their web interfaces

[darran 0]

I like MooTools a lot as well. I am actually using it to design a navigational bar of my company's website. Although it is nothing special, just some fades. E.g. when you hover on a logo, it will fade in all the previously invisible logos. Really cool and simple effect but yet it is in someways sophisticated. I think you need to have a basic understanding of how to use element IDs, JavaScript and CSS to fully utilize MooTools. Without these, you will just probably be using the demo examples and unable to make any breakthroughs or unique design. What I love the most about MooTools is that it is object oriented base, I studied it and practiced it in my codes. So this is a breeze for me. I can create multiple objects and use the transition whenever and wherever I want in the site. This is a good way of making your site look more Web 2.0

[hippiman 0]

I think I'm going to look into that. I was really bored the other day, and I saw some other Javascript libraries out there, but I don't know how good they are, because I didn't look that far into them, but I guess I should check different ones out. Is MooTools just for effects, or does it have other functions, too?