jQuery Nested

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout. How is this done? Use a container element with a group of child items that use the chosen option selector setting (default: .box). <div id="container"><div class="box size11"></div><div class="box size12"></div><div class="box size21"></div><div class="box size22"></div> ... Sizing of items are handled by adding sizeWH where W is the number of columns the box shall use and H is the number of rows the box shall use. selector Default .box minWidth Default 50 minColumn Default 1 gutter resizeToFit Default true If true, any box bigger than the gap will be resized to fill the gap. resizeToFitOptions Default option below resizeAny If true, any box bigger or smaller than the gap will be resized to fill the gap. Default true animate Default false speed Default 20

Numeral.js zonear/isotope-perfectmasonry Moment.js | Parse, validate, manipulate, and display dates in javascript. Three Super Easy Ways to Pull Off a Masonry Layout Three Super Easy Ways to Pull Off a Masonry Layout Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing. Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width. What Is a Masonry Layout? When you float objects in CSS, the browser arranges elements first horizontally then vertically. However, if the objects have variable heights, the results are much more difficult to predict. The obvious quandary here is how to pull off a nice tight grid that with items that have variable heights. jQuery Masonry Wookmark

Code School - Try jQuery 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!

Lazy Line Painter Packery Ajax AutoComplete for jQuery About jQuery Autocomplete allows you to easily create autocomplete and autosuggest boxes for text input fields. Built with focus on performance - results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root. What's new $('#query').autocomplete(options) now returns an Autocomplete instance only for the first matched element. Autocomplete functionality can be disabled or enabled programmatically. var ac = $('#query').autocomplete(options); ac.disable(); ac.enable(); Options can be changed programmatically at any time, only options that are passed get set: If you need to pass additional parameters, you can set them via setOptions too: New parameters when initializing autocomplete. var reEscape = new RegExp('(\\' + ['/', ' Installation Include jQuery in your header. How to use Here is an Ajax Autocomplete sample for the text field with id "query"

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 Canvas Query jQuery Masonry Make Pretty Charts For Your App with jQuery and xCharts Martin Angelov Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. The HTML The HTML structure of the demo is pretty simple – we have to add elements on the page for the initialization of the chart, and for the date picker. index.php <! We are including a good deal of external resources here. Before the closing body tag, we have the jQuery library, d3.js (required by xcharts), xcharts, the elegant sugar.js library (required by the date range plugin), the date range plugin and our script.js. The MySQL Table As I mentioned in the intro, the script we are writing will fetch its data from a MySQL table and display it on the chart. Database Schema It has only three fields. Note: Remember to enter your MySQL connection details in setup.php. The PHP Code In our PHP script, we will select the records from the table that correspond to the passed start and end date, assemble an array, and output it as a JSON: