http://walkthrough.ifupdown.com/ 2010-03-14T22:56:05-04:00 http://walkthrough.ifupdown.com/ http://walkthrough.ifupdown.com/lib/images/favicon.ico text/html 2009-12-20T22:32:00-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/basic/set-many-methods?rev=1261366320&do=diff If you have an array of elements, possibly returned to you by $$, you can set properties and styles on all of them at once. This is extremely powerful feature of mootools which can save you a lot of time. // Gets all h3 with important as the a class on it inside of the element of news id. var importantNews = $$("#news h3.important"); importantNew.setProperty("title", "Really important news!"); importantNews.setStyle("font-size", "2em"); text/html 2009-12-20T00:45:40-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/basic/set-style-and-styles?rev=1261287940&do=diff Setting CSS properties with mootools is easy with the two style setting methods that handle any cross-browser inconsistencies that may exist and also facilitate short-hand properties. Firstly, the .setStyle method can set a CSS property. $("myLink").setStyle("font-size", "2em"); $("myDiv").setStyle("margin", "1em"); text/html 2009-12-20T00:32:01-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/basic/set-html-and-text?rev=1261287121&do=diff Functions and methods often need to return feedback to the user in some way; often by new text in a p-tag or similar structure. Mootools offers two methods that assist with those needs. The .set method will append as many HTML strings as you pass it. text/html 2009-12-20T00:19:49-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/basic/set-properties-on-element?rev=1261286389&do=diff Setting properties of elements is easy in mootools as there are many methods for it. First, there is .setProperty. $("myElement").setProperty("title", "I am your element!"); Adding a property is usful; you can remove a property in much the same way. text/html 2009-12-20T00:11:41-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/basic/dollars?rev=1261285901&do=diff The $ function is used to get a single element. The $$ function is used to get many elements based on CSS Selectors (selectors). // This will return references as an Array of all p-tags on the page. var ps = $$("p"); // This will return all p-tags with the red CSS class on them. var redps = $$("p.red"); // This will return all p-tags with the red CSS class on them inside of the news div. var newsredps = $$("#news p.red"); text/html 2009-12-19T23:56:04-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/basic/dollar?rev=1261284964&do=diff Use the $ function to get an element from the DOM instead of the clunky document.getElementById method. // This is the classical clunky method for getting an element. var myElement = document.getElementById("myElement"); // This is the mootools way, the $ (dollar) function to get an element. var myBetterElement = $("myElement"); // The references returned by both of these functions are identical. They both will refer to the element given by the ID argument. text/html 2009-12-19T23:55:32-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/home?rev=1261284932&do=diff Welcome to the mooWalkthrough 1.2.x. This walkthrough has been rewritten from the ground-up. It follows a better pattern and goes into more detail that the previous editions. This walkthrough is based on the 1.2.x branch of Mootools, which is currently at 1.2.4 with a bugfix version with a couple of new features. This walkthrough should function regardless of which version of 1.2.x you have. text/html 2009-12-19T15:10:07-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/basic/descendant-fetching?rev=1261253407&do=diff In addition to DOM walking, mootools also has two other methods for fetching elements in the DOM. Examples on this page will use the following HTML chunk. <div id="container"> <h1>Welcome</h1> <p>All of <strong>your</strong> business needs</p> <p class="motto">Livin' it up</p> <ul id="navbar"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> text/html 2009-12-19T14:57:03-04:00 Ryan Rampersad http://walkthrough.ifupdown.com/1.2.x/basic/getting-positions-in-dom?rev=1261252623&do=diff When you have an element in the DOM, you can use mootools methods to find other elements near by like children and parents. For the examples that follow, this HTML chunk is used. <div id="container"> <div> <a id="l1">link 1</a> <a id="l2"><span>link 2</span></a> <a id="l3">link 3</a> </div> <h2 id="wel">Welcome</h2> <ul> <li>list item 1</li> <li>list item 2</li> </ul> <p>paragraph</p> </div>