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.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. 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” ). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2 .
And next week, we will see how to use this script in WordPress 2.5+ to display the login form on the front page. 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 Conclusion The Author. Mootools 1.2 cvNewsTicker class :: Young Dutch Design. Create a Simple News Scroller Using MooTools, Part I: The Basics Example. MOOTOOLS NEWS TICKER - DEMO. MooTools 1.2 Documentation Française. ElementStack. 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! Drag.Flick Demo. David Walsh - MooTools, Dojo Consultant. MooTools - a compact javascript framework. Forge | Request.Flickr. 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. NoobSlide - mootools. 1. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam. Quisque aliquet accumsan lectus. 2. Quisque aliquet accumsan lectus. Nunc ante. 3. Duis consequat laoreet libero. 4. 5. Cras sodales. 6. 7. 8. Demos - Drag and Drop. MooFlow V0.2 - ReMooz-Bridge Example. SlideShow 1.0: A Powerful, Highly Extendable MooTools Class by Ryan Florence. 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. Proin arcu dolor, ullamcorper tristique, placerat nec, scelerisque placerat, massa.
Ut enim purus, sollicitudin et, pretium ac, porttitor eget, sapien. Nulla et erat. 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. Simple Modal - Another window modal. A MooTools Tutorial :: The "Mootorial" » The MooTorial. 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. By default, the browser “jerks” you up or down in the page when you click on an anchor — SmoothScroll lets you define the duration that it should take for a link to be scrolled down to. MultipleSelect Typewriter Effect Description : This is a sleek Typrewriter Effect built on MooTools.
Tips. 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. Thank you and enjoy! Fancy good looking way to display the thumbnail images of your gallery. It can slide either by mouse wheel scroll or by clicking the arrows on the left and/or right. 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. 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. Click one of the thumbnails to jump to the corresponding image in the slideshow set. showplus Fade © R. Sonnabend, Rüsselsheim 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. 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.