It is compatible with MooTools 1.2.x. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere. New TextboxList is now using Binary search for maximum performance. It supports new options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).
Requirements: Mootools 1.2.x
Demo: http://devthought.com/projects/mootools/textboxlist/
License: License Free
For freelancing designers, the online portfolio is one the best ways to get some work. Every prospect will check it before hiring you for the job, so it must be good. JQuery can be a great tool to improve your portfolio, whether it’s for eye candy, usability or functionalities. In the following collection you will find some great jQuery scripts and tutorials that’s help you to get a better portfolio
Tabs can be a great way to make informations about a project quickly available without leaving the page. For example you can insert project details in a secondary tab because you know that only a few visitors will have interest in it.
If you want to show a project’s evolution, jQuery cycle could be the way to go. It is basically a slideshow with cool transition effects, and the ability to use different actions to move from one slide to another.
If you are going to use a tooltip to display further technical informations, do it with style. This script and tutorial teaches you to create a bubble just as pretty as the ones on Coda’s website.
If you have designs where the details have a lot of importance, you should use this script to let your site’s visitors know that you don’t neglect details in your designs.
Nice flipping effect for your divs, images, or whatever you want to put in it.
A cool carousel jQuery that allows you to display different media types, perfect for multimedia designers.
If you read a lot of web design blogs, you’ve probably seen this one over and over. I still could not leave it out of this list as it’s a great way to display design work.
Nifty little effect for menus, can also be used for other things if you are creative (and I am sure you are).
If you have a lot of projects and designs to show, this could be the right navigation to use for your portfolio.
Excellent tutorial to create a filterable portfolio with jQuery.
Beautiful menu effect that captures your attention towards the menu element you are hovering.
Want to get rid of people with too low budgets? This could be the way to go. The jQuery Calculation plugin could allow you to give an estimate of what their request will cost.
Tired of receiving incomplete form submissions from your portfolio site? Try the jQuery form validation plugin and the people trying to contact you will not be able to send a message if they didn’t fill in the form properly.
In your portfolio you will probably want to emphasize on your content and images. Accordion menus can be a good way to declutter your sidebar and give more space to content.
It’s good to explain your workflow on your portfolio website, it gives your potential clients a good indication of what they can expect when working with you. Using a sequential list is a good way to do this, learn how in Web Designer Wall’s tutorial.
Good form styling does not only look nicer, it’s also often more usable.
If you are really proud of your studio, you can give a good feel of what it looks like with this virtual tour jQuery plugin.
To give informations about an image or project, image notes are the perfect solution. You can easily point out details and give in-context explanations.
Supersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow. There is no extra whitespace, no scrollbars - the entire browser window is always filled. It is lightweight and plays nice with Firefox, Safari, Opera, IE7, and IE6. Requirements: jQuery Framework Accessible News Slider is a JavaScript plugin built for the jQuery library. The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “back” and “next” navigation is either visible or hidden. There is also an indicator that communicates the total number of news items. If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. Although the core functionality of the news slider is partially accessible with a keyboard, the “View All” link was added as a catch-all mechanism. Hitting the “Enter” key while focused on the hidden “Skip to News” anchor will mimic the same behavior, since it is assumed the user is tabbing through content. The JavaScript is only 2 KB packed. The CSS, XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. The ZIP download contains all of the necessary files, including a packed version of jQuery v.1.2.6. Requirements: jQuery Framework Agile Carousel is a jQuery plugin that allows you to easily create a custom carousel. Call jQuery UI to enable many different additional transition types and easing methods. It uses PHP to draw images from the folder you specify. You can also configure Agile Carousel with many different options including controls, slide timer length, easing type, transition type (e.g. blind, drop, pulsate, shake, slide and etc…) and more. The script is currently in beta version, security & feature enhancements are on the way. Requirements: jQuery Framework This dynamic JavaScript slideshow is feature packed and under 5KB. You can find the new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder). This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. This script is available for any personal or commercial projects under the creative commons license and is offered as-is, no free support provided. Requirements: Javascript Enabled The s3Slider jQuery plugin is made by example of JonDesign’s smooth slideshow script. The author needed something like that for jQuery. Since he didnt find it after a small research, he decided to build it by himself. This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. This plugin has been tested and is known to work in Firefox, Opera, Safari, Internet Explorer and Google Chrome. Requirements: jQuery Framework Devthought has created an elegant, lightweight slideshow script called BarackSlideshow. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. Devthought came up with a new class that receives the images and loading spinner as parameters as well. The CSS plays a major role. You should analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean. Requirements: Mootools Framework This is an automated news slider using the new AS3 XML features. The main propose of this news slider is show news on the front page, with a title, an image, some descriptive text, and a link to the full article. It loads 4 articles and changes from one article to another automatically in a lapsus of time, and the user could stop, rewind or forward whenever he wants. The data source uses XML, so it could be adapted to any programming language that could generate XML data. Requirements: - noobSlide is a mootools based slide show gallery. You can see 7 different styles of images galleries / slide shows. I think they are working smoothly and looking nice. However, I particular like example 6 and 7. If your web application / website is already using mootools, noobSlide is definitely a good choice to power your image gallery. noobSlide is licensed under MIT License. Requirements: Mootools Framework Couloir Slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. It is a very good resources for creating a gallery with resizing and fading effects. You are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs. Requirements: Any Modern Browsers with Javascript Enabled SmoothGallery is a javascript gallery and slideshow system using MooTools. It allows you to have simple and cross-fading image galleries, timed slideshows and showcases.Unlike Lightbox 2, you can define the time of switching pictures automatically.And also, you can jump to a specific picture from the pictures menu and do not need to flick through all pictures in between. Requirements: Firefox, Opera, Safari, Internet Explorer 6.0+
Supersized - Full Screen Slideshow jQuery Plugin
Demo: http://buildinternet.com/live/supersized/
License: License Free
Accessible News Slider Plugin Built for jQuery
Demo: http://www.reindel.com/accessible_news_slider/
License: License Free
Create Custom Carousel with Agile Carousel jQuery Plugin
Demo: http://code.google.com/p/agile-carousel/
License: New BSD License
Free Dynamic Javascript Slideshow Under 5KB
Demo: http://sandbox.leigeber.com/javascript-slideshow/
License: Creative Commons License
Build Your Own Slideshow with s3Slider jQuery Plugin
Demo: http://www.serie3.info/s3slider/demonstration.html
License: Creative Commons 2.5 License
Elegant and Lightweight Slideshow Script
Demo: http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html
License: MIT License
Automated News Slider using AS3 XML Feature
Demo: http://works.faustocarrera.com.ar/news_slider/
License: License Free
noobSlide - Mootools Slide Show Image Galleries
Demo: http://efectorelativo.net/laboratory/noobSlide/sample.html
License: MIT License
Couloir.org Resizing and Fading Slideshow Gallery
Demo: http://www.couloir.org/js_slideshow
License: Creative Commons License
JonDesign’s SmoothGallery for Slideshows
Demo: http://smoothgallery.jondesign.net/showcase/gallery
License: GPL License
Read more...
Java chart library that makes it easy for developers to display professional quality charts in their applications.
JFreeChart is “open source” or, more specifically, free software. It is distributed under the terms of the GNU Lesser General Public Licence (LGPL), which permits use in proprietary applications.
Examples of the charts that can be produced using JFreeChart.
mapper.js 1.0 allows you to add automatic area highlighting to image maps on your webpages.
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.
Javascript based Percentage Bar / Progress Bar : jsProgressBarHandler 0.2
Google Chart API Prototype plugin / Javascript Wrapper
Visit article page
Visit project page / and how to use it.
SmoothGallery 2.0. Based on Mootools, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website… the javascript file is only 24kb, and it’s free, open-source, GPL licensed library.
Visit SmoothGallery or click the image below to see the demos …
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers. FancyForm uses the ultra-lightweight Mootools JavaScript framework. v0.91 Released 2007-11-25. Download FancyForm .
Add the following anywhere in your website:
1 | <script SRC="js/mootools.1.11.js" TYPE="text/javascript"></script> |
Add CSS styles on your website to specify the appearance of the checkboxes and radio buttons. Add styles for the classes checked and unchecked for checked / unchecked checkboxes respectively, and likewise use the classes selected and unselected for radio buttons that are checked / unchecked.
MooTools Slider - a simple step-by-step tutorial, with source files, on how to implement slider with horizontal scrolling and animated effects using MooTools. This is just a basic proposal you can customize and reuse quickly.
Take a look at the live preview and download the source code ready to use in your web projects.
mParallax - a Mootools framework adaptation of jParallax jQuery plugin ( mentioned here at V-B).
With mParallax it’s easy to create and customize parallax effects. You can also easily add rounded corners to your parallax element by creating img elements and injecting them with the adopt() function.
QuickBox - a Lightbox clone written for the MooTools Javascript framework.
QuickBox was written for speed, allowing you to zip through images as quickly as possible, captions can be localized for other languages. QuickBox also let you use the mouse wheel to scroll through images.
View example of Captions in Other Languages
ThemeFlash : The Quality Web Resources. Copyright 2009-2010 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol
