MooTools Content Slider Class v. 2.0 Item 1 Title Cras porta arcu ac felis. Curabitur est libero, sollicitudin sed, tempus eu, semper eget, eros. In in tortor vitae justo fringilla vestibulum. Item 2 Title Fusce aliquam blandit elit. Item 3 Title Aenean neque. Proin arcu dolor, ullamcorper tristique, placerat nec, scelerisque placerat, massa. Item 4 Title This is item four’s text. Item 5 Title Annnd item 5’s text is here. Examples The Wall - A Javascript plugin for Mootools Have you implemented The Wall on your web site? What are you waiting for? Inform us and we will display it in the gallery we are preparing. Leave your name, your e-mail and your web site URL.
Overlay Overlay is a compact, simple overlay class which allows for maximum control over its use. DownloadDebut ArticleExample Usage Overlay Class Sample Usage Arguments container: The container of that will host the overlay.options: The class’ options. Options id: (defaults to ‘overlay’) The ID of the overlay to be created.color: (defaults to ‘#000′) The background color of the overlay.duration: (defaults to 500) The open/close duration of the overlay.opacity: (defaults to 0.5) The destination opacity level of the overlay.zIndex: (defaults to 5000) The z-index of the overlay. Events onClick: Executes when the overlay is clickedonClose: Executes when the close directive has been givenonHide: Executes when the overlay is completely hiddenonOpen: Executes when open directive is givenonShow: Executes when overlay has faded into view Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist!
Kwicks Kwicks is a MooTools plugin that enables dynamic navigation effects via lists. DownloadDebut ArticleExample Usage Plugin Code (Version 1.0) XHTML List Format <div id="kwick"><ul id="kwicks"><li><a class="kwick john" href=" title="John Lennon"><span>John Lennon</span></a></li><li><a class="kwick paul" href=" title="Paul McCartney"><span>Paul McCartney</span></a></li><li><a class="kwick george" href=" title="George Harrison"><span>George Harrison</span></a></li><li><a class="kwick ringo" href=" title="Ringo Starr"><span>Ringo Starr</span></a></li></ul></div> Options & Events squeezeWidth: (defaults to 100) The width of a squeezed element. maxWidth: (defaults to 125) The width of an expanded element. Methods There are no public methods. Code Revisions & Bug Fixes None. Be Heard
Best Ever 65 mooTools Plugins and Demos, is it Better than jQuery? This is an update on a previous article I wrote about mooTools (41 of the Best…), some mooTools plugins have been removed, some have been updated and a fair few have been added. mooTools is truly hot on the heels of jQuery!!! Can it be better? About mooTools: “MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.”. mooTools Homepage: mooTools Homepage. Below are the Best Ever 65 mooTools Plugins and Demos: SmoothScroll Description : SmoothScroll allows you to smoothly take a user to a specific portion of a page. MultipleSelect Description : MultipleSelect allows you to add a custom style to html multiple select boxes. Typewriter Effect Description : This is a sleek Typrewriter Effect built on MooTools. MooColumns News ticker with horizontal scrolling MooScroll Show/hide a nice Login Pane Kroppr MooFlow
SlideItMoo - MooTools 1.2 image slider There's a new version developed for this script. You're encouraged to use the version 1.1 available here. Please report any bugs you might find. Fancy good looking way to display the thumbnail images of your gallery. Prerequisites for this example: MooTools 1.2 core and MooTools 1.2 more - visit mootools.net * Slimbox 1.65 - visit homepage Tested on: IE 6 Firefox 2, Firefox 3 Google Chrome Opera 9.5 Installation: insert into the <head></head> section of your html document the CSS ( from styles.css the section between /* thumbnail slider begin */ and /* thumbnail slider end */ ) and JavaScript files ( mootools-1.2-core.js, mootools-1.2-more.js, slimbox.js and gallery_slide.js ) add the HTML code contained between <! For best results, please make sure that all your thumbnails have the same size. Demo 1 - thumbnails slider, only links: Use the forward - back buttons or mouse wheel. Demo 2 - thumbnails slider, div containers: Use the forward - back buttons or mouse wheel. Nam porta tellus ac urna
Examples - Levente Hunyadi showplus Examples Examples The example below features an image slideshow with the default fade transition effect and horizontally oriented thumbnails for fast navigation. showplus Fade © R. The following example shows a slideshow with the push transition effect and a linear easing function. showplus Push The next example demonstrates the fold transition effect with a nonlinear easing function nick-named bouncy. showplus Fold The last example illustrates the Ken Burns transition effect with a zoom factor of 0 and a pan factor of 100. showplus Ken Burns
Sliding Login Panel with Mootools 1.2 A new version of this script is available here . The new version works with jQuery!! If you use the code given on this page and have jQuery or another AJAX framework already installed on your site, keep in mind Mootools generally conflicts with other AJAX frameworks and the sliding panel will not work! Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest WordPress theme: “Night Transition” ). Preview / Download First, check out the Step 1: The structure Before we get to the code, I would like to illustrate the HTML structure used in this script: The panel (<div id=”login”>) is hidden by default. Step 2: HTML Code Create a new HTML page and save it as index.html in your root folder. Step3: The CSS Create a new cascading style sheet in your web editor. Step 4: The Javascript First, you will need to download Mootools core. Now go to the “More Builder” page and select Fx.Slide . Now, create a new Javascript document. Conclusion The Author
demos - Fx.Slide Demo A demonstration of Fx.Slide docs referencesjs code | html code | css code <h3 class="section">Fx.Slide Vertical</h3><a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a><div id="test"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fx.Slide Vertical slideout | slidein | toggle | hide Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fx.Slide Horizontal