MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific functionality with just a few simple parameters. David has shown us 4 examples of using ScrollSpy.
Example 1: “Top the Topâ€
When you scroll down a defined number of pixels, you get a “Scroll to Top†link in the lower right hand part of the screen. When you’re back at the top, ScrollSpy is directed to hide the link.
Example 2: “The Showâ€
When you click the link, the window scrolls to the right. During the scrolling process, ScrollSpy shows and hides content blocks based on where in the scrolling process the window is.
Example 3: “Team Colorsâ€
This displays a different background color depending on where you are in the page.
Example 4: “Position Pointerâ€
This displays imagery in different positions on the page based upon where the user scrolls.
Requirements: MooTools Framework
Demo 1: http://davidwalsh.name/dw-content/scroll-spy.php?
Demo 2: http://davidwalsh.name/dw-content/scroll-spy.php?page=1
Demo 3: http://davidwalsh.name/dw-content/scroll-spy.php?page=2
Demo 4: http://davidwalsh.name/dw-content/scroll-spy.php?page=3
License: License Free
dhtmlxScheduler is a web-based event calendar which provides simple in-browser scheduling solution. With smooth Ajax-enabled interface dhtmlxScheduler allows users to add, modify or delete events without refreshing the web page.
Intuitive drag-n-drop behavior gives the possibility to change events date and start/end time by simply dragging the event boxes. The calendar events can be displayed in Day/Week/Month views.
dhtmlxScheduler is very lightweight (about 19KB gzipped), cross-browser and highly customizable. Each aspect of the calendar interface can be configured through JavaScript API. Developers can easily add/update events, change date format, time scale or calendar language.
Although dhtmlxScheduler is a pure JavaScript solution, it can be easily connected to the backend database with the help of dhtmlxConnector, a PHP extension that enables data communication between client-side interface and server-side datasource.
You can also use your own server-side code written in any language (PHP, Java, ASP, etc.) to bind scheduler content to the database. dhtmlxScheduler is distributed under GNU GPL and commercial licenses.
Requirements: –
Demo: http://dhtmlx.com/docs/products/dhtmlxScheduler…
License: GPL and Commercial Licenses
Raymond Selda has published a tutorial about how to Create a Tabbed Content Rotator using jQuery and the interface library called jQuery UI. This effect can be used effectively on your homepage to present customers with your products and services.
After you’re finished, you can experiment and try placing the tabs above or lining them up vertically. Try looking up some websites that use this kind of interface for inspiration. Simple variations to the interface can be a great way to learn more about CSS.
Requirements: jQuery Framework
Demo: http://www.raymondselda.com/demo/tabbed-rotator/
License: License Free
Everyone loves the Gmail and Facebook inline chat modules. This Gmail/Facebook Style jQuery Chat Module enables you to seamlessly integrate Gmail/Facebook style chat into your existing website.
You can see the chat box displays at the bottom right hand corner of the screen. You can keep the chat boxes open and stores state (data) even when pages are browsed/refreshed. It will display “Sent at…†after 3 minutes of inactivity. You can also minimize and close chat boxes easily.
This chat script can be used for free under LGPL-style license for non-commercial purposes. However, you need to purchase a license for commercial purposes.
Requirements: jQuery Framework
Demo: http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/
License: LGPL License
Flashtuts has published: Build a Dynamic Flash Gallery with Slider Control. In the tutorial, you will learn how to create a flash gallery which displays all image files in a given directory, with a slider that is used to browse easily through the images.
The flash gallery is still low on functionality. The loaded images all need to be the same size and do not have a larger preview. You could add a resizing function and an option to view a larger preview of the image when clicked. Furthermore, an option to browse left or right with buttons or with a keyboard event could be added.
Requirements: Flash Required
Demo: http://besofresh.com/flashtuts/full.html
License: License Free
Axiis is an open source data visualization framework designed for beginner and expert developers alike. Axiis gives developers the ability to expressively define their data visualizations through concise and intuitive markup.
Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations. Axiis was designed to be a granular framework, allowing developers to mix and match components and build complex output by compositing together basic building blocks.
Axiis is an open source project, under an MIT license. This means you can use it for personal projects, commercial work, and pretty much anything you can think of with no restrictions.
Requirements: Degrafa Graphics Framework & Adobe Flex 3
Demo: http://www.axiis.org/examples.html
License: MIT License
You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. SohTanaka has made a tutorial: Simple Page Peel Effect with jQuery & CSS. All they are doing is expanding the image on hover, then retracting to its default size on hover out.
You may also interested in The Sexy Curls jQuery Plugin if you like this tutorial. The page corner can be set to curl automatically. The plugin is released under the MIT license. That means you can do whatever you like with it.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/peeling-effect/
Demo: http://www.elliottkember.com/sexy_curls.html
License: MIT License
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. DesignMag has published a tutorial teaching us how to Create an Image Rotator with jQuery and CSS. It will help you understand how the image rotator works and helps you create your own from scratch.
Do keep in mind these jQuery driven image rotators do not degrade in the best fashion. When you disable JavaScript, each thumbnail must be clicked on to get the larger image (which opens in the same window).
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/image-rotator/
License: License Free
BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want using images and/or text. It works horizontally or vertically. Menu can be pinned or not, by mouseover or click. It’s totally free. You can download it, modify it and use it in any commercial project as long as you respect the license. It’s Open Source!
If you like this plugin, you should take a look at Phatfusion Image Menu as well.
Requirements: Mootools Framework
Demo: http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu
License: MIT License
MooTools FileManager allows you to (pre)view, upload and modify files and folders via the browser. You can browse through files and folders on your server easily with Mootools FileManager. The user interface is very intuitive. You can view detailed Previews of Images, Text-Files, Compressed-Files or Audio Content. Also, you can Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files.
MooTools FileManager is integrated with FancyUpload, so that you can upload files directly. As a bonus, you can use it as a FileManager in TinyMCE as well. The Script has been tested in Firefox 3+, Safari 4, Opera and IE6+. It is released under the MIT-License, I am sure you can get a great use out of it.
Requirements: MooTools Framework
Demo: http://cpojer.net/Scripts/FileManager/Demos
License: MIT License
