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? 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 favico.js - Make a use of your favicon Badges Animate your favicon with animated badges. You can customize type of animation, position, background color and text color. Slide animation Fade animation Pop animation Pop & fade animation Without animation Position Shape setting Custom font support Color settings Images / Video / Webcam Create icon on the go from images, videos or even a webcam stream Regular image to icon var favicon=new Favico(); var image=document.getElementById('imageId'); favicon.image(image); HTML5 Video to icon var favicon=new Favico(); var video=document.getElementById('videoId'); favicon.video(video); //stop favicon.video('stop'); Webcam video to icon This is only for fun but it works :) Works on Chrome, Firefox and Opera var favicon=new Favico(); favicon.webcam(); //stop favicon.webcam('stop'); Badge options Bower bower install favico.js Check out also Tinycon, Notify Better or favicon.js. Roadmap More options (Badge position, animations,...) License All code is open source and dual licensed under GPL and MIT.
Squishy Find it on Github Squishy is a jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part. You get it to work by linking the script file and including a declaration like the one below in your HTML: <script type="text/javascript"> $(".squishy").squishy(); </script> You can pass the script a number of options to restrict the squishiness. maxSize is used to set the maximum font size, minSize is used to set the minimum font size, maxWidth sets the maximum width of the line of text, and minWidth, the minimum (all in pixels, for now). Much thanks to the guys at Paravel for their work on FitText, on which this script is largely based. I shall call him squishy and he shall be mine. - Dory
jQuery Gridly Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the example below try tapping or dragging any of the bricks. Example Add Installation To install download one of these packages and include the jquery.gridly.js and jquery.gridly.css files in your head with the following: Setting up a gridly is easy. Copyright (c) 2013 - 2014 Kevin Sylvestre Masonry Making a Beautiful HTML5 Portfolio Martin Angelov In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more. The HTML The first step is to write down the markup of a new HTML5 document. index.html <! In the body, there are a number of the new HTML5 elements. The #stage unordered list holds our portfolio items. You can put whatever you want in these li items and customize the portfolio further. Beautiful HTML5 Portfolio with jQuery The jQuery What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags. script.js – Part 1 Each tag is added to the itemsByTags object as an array. Great!
Offline.js – Handle your users losing their internet connection like a pro What is Offline.js? Offline.js is a library to automatically alert your users when they've lost internet connectivity, like Gmail. It captures AJAX requests which were made while the connection was down, and remakes them when it's back up, so your app reacts perfectly. It has a number of beautiful themes and requires no configuration. Install The easiest way to add Offline to your site is with Eager. Click Install to see a live preview of Offline on your website. Download Offline.js Pick a Theme Indicator Themes Submit a theme! Documentation HubSpot
jQuery Socialist Social Media Plugin - Create and combine feeds from social networks in1 | plugins A jQuery Social Plugin to create a single social media stream from multiple social network feeds Socialist is a social feed plugin that combines multiple social media feeds in one place. Use it to combine content and create a social wall from Facebook, Twitter, LinkedIn, YouTube, Pinterest, Flickr, Tumblr, Craiglist RSS and other social networks. Features Aggregates social feeds from Facebook, Twitter, LinkedIn, Flickr, Instagram, YouTube, Tumblr, Pinterest, RSS Feeds, Craigslist, Google+ and more.. Download from GitHub Socialist supports jQuery 1.6 or newer 1) Simply include the .js and .css files in your HTML document.. 2) Apply jQuery Socialist to any <div> element within your js code.. Options networks An array of network definition objects random true or false; default value is: true isotope headingLength An integer value that indicates the max number of characters to display in the 'heading' field of each result textLength maxResults theme (none) or 'clean'; default value is: (none)