Zoomooz.js Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on. You can also add some additional attributes for tuning the animation as data fields of the element: <div class="zoomTarget" data-targetsize="0.45" data-duration="600">This element zooms when clicked on. Target 1 Target 2 Target 3 Target 4
Grid-A-Licious Back in mid 2008, I created a jQuery plugin. I named it Grid-A-Licious and described it as, "Divs are placed in chronological order with a special grid" because I had no clue how to explain it better. I used this script a lot and designed many sites with it during 2008. At first, people were very skeptic and confused on how to read the grid, and thought this kind of layout belonged in real papers. This reaction slowly faded away once the layout became more and more popular when different developers and designers started to create their own script's interpretation of the floating grid layout effect. Not saying it was based on my work or script, because there were a few others that brought a similar layout effect to our attention, but not necessarily distributed as a plugin. In Dec 2008, I decided to wrap the script into a Wordpress theme and release it as a christmas gift to the world. So, why am I continuing developing this? width Default 225px gutter Default 20px selector Default .item queue
Enterprise jQuery Update: jQuery UI 1.7 Slider from a Select Element | Filament Gr What's This All About? Our selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable. The plugin enhances the jQuery UI slider in many ways, adding text labels and ticks on the slider axis, and tooltips that appear while a slider is being used. Working Demo: Demo Page The demo above was generated from 2 HTML select elements with the following jQuery call: $('select').selectToUISlider(); Now Updated for ARIA Support! So what is ARIA Anyway? How we applied ARIA to the jQuery UI Slider
jQuery Quicksand plugin Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle A TRANSMIT 4-INSPIRED MULTI PROGRESS BAR. Simulate the upload of ten 1MB files. TRNSFR is a UI element meant to be used in conjunction with your current upload script. Options There are a number of options that you can set globally on the TRNSFR class (via TRNSFR.options), and pass to instances. Options and their defaults: container_class ( String ) Default: multi_progress Class name applied to the container element. progress_class ( String ) Default: progress Class name applied to each of the progress elements. file_class ( String ) Default: file_progress Class name applied to the file progress element. total_class ( String ) Default: total_progress Class name applied to the total progress element. Constructor new TRNSFR( elements, files [, options] ) → TRNSFR elements (jQuery Object) – jQuery collection of elements to be used as sections. files (Array) – An array of each individual file size in bytes. options (Object) – Configuration object associated with the current instance. Instantiate a new TRNSFR object for the win.
Tutorials – Tutorialzine - Namoroka Realtime Chat with Node.js By Nick Anastasov | In this tutorial, we are going to build a realtime chat system with Node.js, Express and the socket.io library. Visitors will be able to create private rooms in which they can chat with a friend. Read more My New Favorite Technique ForHiding Overflowing Text By Martin Angelov | In this short tutorial, I will show you my new favorite technique which fades overflowing text gracefully into the background – a perfect addition to your new design. jQuery HTML Table Toolbox - Noupe Design Blog Apr 13 2010 By Paul Andrew In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But that is were the love story ends and its bad rep begins.Using the table element for web layouts proved to be hard to modify, obtrusive and, more importantly, it caused major accessibility and usabilty problems. Out of the box the tables are very, very bland, reasonably hard to style, its very difficult to display complex data effectively and you are limited to its basic functionality. In this article we present a collection of jQuery plugins and tutorials to help you get more out of your HTML tables. It’s time to follow in love with HTML tables all over again! jQuery Table Plugins graphTable Demo Adding Functionality to Tables Table Search & Filtering Plugins
Jquery selectbox advanced jquery UI It depends on jQuery 1.5 and jQuery UI 1.8. The widget is styleable using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There's no extra markup needed. For installation instructions please have a look at the corresponding blogpost Source code is available at Github In case you are looking for the original version, it has been moved here Features Search within available options, if there are a lots of them Displaying counts of selected and available items Select All / Deselect All Buttons Dragging items from the available list to the selected list directly Contributors Misc There are no limitations. Other active projects
AviaSlider - a unique jQuery Image slideshow plugin Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Safari 3 and higher Firefox 2 and higher Opera 10 and higher Google Chrome 3 and higher Checks for last 3 Browsers performed on Mac & Win Download & Docs
Flexigrid