Sausage.js is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.
A complete test & benchmark suite is coming soon. You may also read through the annotated source code or visit the project page on GitHub. Sausage depends on both jQuery and the jQuery UI widget factory.
Requirements: jQuery, jQuery UI Framework
Demo: http://christophercliff.github.com/sausage/
License: MIT License
Zoomy is a quick and easy plugin that will zoom into a picture. You only need two images; the display image and the zoomed in image. Just link the zoomed in picture on the display picture, and tell the plugin to use that link when zooming.
Zoomy is easy to implement and customize. There are a few options that allow you to change the appearance and usability of Zoomy. Plug it in, and even the most boring pictures can turn heads. Get a extra level of detail without boging down your page with gaint images. Take it for a test drive, and let Zoomy magnify you website.
Requirements: jQuery Framework
Demo: http://redeyeoperations.com/plugins/zoomy/
License: MIT, GPL License
Typography could be considered the most important part of any design. It’s definitely among the most important elements of any design project. Choosing a typeface can be tricky. The beauty and complexity of type, combined with an inexhaustible supply of options to evaluate, can make your head spin.
While there are no easy-to-follow rules on how best to choose a typeface, there are many tried-and-true principles you can quickly learn and apply to make an appropriate typeface choice. Take a look at A Crash Course in Typography and How to Choose a Typeface, you will have a winning typeface choice in no time.
Source: A Crash Course in Typography: The Basics of Type
Source: How to Choose a Typeface
CreditCard.js is a credit card validation library for JavaScript using Prototype. Using CreditCard.validate(‘1111 2222 3333 4444’) returns true/false, the given string is automatically stripped of whitespace, so it can be plugged directly into form validations.
It checks if the luhn validation code add up, and the range and the length of the numbers. You can do the card identification via CreditCard.type(string) returns “Visa”, “MasterCard”, etc.
Requirements: Prototype Framework
Demo: https://github.com/madrobby/creditcard_js
License: License Free
For those that arn’t familiar with jQuery UI, it’s essentially a collection of jQuery plugins that try to do for user interaction what jQuery did for JavaScript. Like it’s parent library, jQuery UI does its very best to remain cross browser compliant. It is easy to implement. It is very easy to theme.
Ace and Aristo are the respective open source themes of SproutCore and Cappuccino, applied to their parent JavaScript libraries. Tait Brown has ported the “Aristo” theme for Cappuccino over to jQuery UI.
It’s a proof-of-concept to illustrate how jQuery UI could progress if they get sacrifice some of their direction and get some nifty designers on board. Imagine the possibilities if jQuery UI got Cocoia or Sofa on board!
Requirements: jQuery UI
Demo: http://taitems.tumblr.com/post/482577430/introducing-aristo…
License: License Free
Using CSS3 techÂniques a modal box can be creÂated withÂout JavaScript or images. With a bit of aniÂmaÂtion, tranÂsiÂtion and transÂform, it can be made that litÂtle bit more special. Here we have CSS Modal by Paul Hayes.
The modal animation is hardware accelerated on Safari and iOS, which gives notable performance improvements. The animations are available in Chrome but will feel more sluggish. Firefox will see the opacity transition but not the bounce or minimise animation as it doesn’t yet support @keyframe.
However, it won’t work in IE8 and below, there’s no pointer-event supÂport and opacÂity is poorly impleÂmented. IE9 supÂports :tarÂget but no pointer-events. Some IE speÂcific styles could easÂily switch the opacÂity togÂgle to a disÂplay or visÂiÂbilÂity one.
Requirements: Chrome or Firefox Browser
Demo: http://www.paulrhayes.com/experiments/modal/
License: License Free
Now that we can use CSS transitions in all the modern browsers with Ceaser – CSS Easing Animation Tool. Simply choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go.
Requirements: –
Demo: http://matthewlein.com/ceaser/
License: License Free
Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML. It works with or without jQuery. Also, it degrades gracefully if JavaScript is not enabled.
There will be no HTML in your JavaScript files anymore. Tempo makes AJAX content easier to work with. It has been tested on Safari, Chrome, FireFox, Opera, and Internet Explorer 6+.
Requirements: –
Demo: http://twigkit.github.com/tempo/
License: Apache License
Codrops will create a slick Animated Content Menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.
The main idea is to have a restaurant menu with the different menu categories displayed. Each content are will have some foods/drinks listed. Once a content box is shown, the menu items are going to disappear. If we click on the close button to close the box, the menu items will be shown again.
Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/AnimatedContentMenu/
License: License Free
jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (i.e. MATLAB or R). The majority of jStat functions can be used independently of any other libraries. However, the plotting functionality of jStat is based on the jQuery plugin – flot.
jStat only uses elements that adhere to the jQuery UI ThemeRoller styles so any jQuery UI theme can be used. jStat was designed with simplicity in mind. Using an object-oriented design provides a clean API that can produce results in a few lines of code. jStat should work in all major browsers.
Requirements: jQuery Framework, Flot
Demo: http://www.jstat.org/
License: MIT License
