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"
Raphaël—JavaScript Library What is it? Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. How to use it? Download and include raphael.js into your HTML page, then use it as simple as: // Creates canvas 320 × 200 at 10, 50var paper = Raphael(10, 50, 320, 200); // Creates circle at x = 50, y = 40, with radius 10var circle = paper.circle(50, 40, 10); // Sets the fill attribute of the circle to red (#f00) circle.attr("fill", "#f00"); // Sets the stroke attribute of the circle to white circle.attr("stroke", "#fff"); Demos
Canvas Query 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? Nested does three things. It creates a matrix of all elements and creates a multi column grid, similar to other libraries and scripts out there. 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 resizeAny
Numeral.js Moment.js | Parse, validate, manipulate, and display dates in javascript. Code School - Try jQuery 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. However, there is a new library that makes things easier – xCharts. Today, we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table. 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 The PHP Code
Motio - jQuery plugin Introduction Motio is a small JavaScript library for simple but powerful sprite based animations and panning. It takes an element, and changes the background position to create an animation effect. Dependencies Motio has no dependencies, but there is an optional Motio jQuery plugin version available. Compatibility Works everywhere. Changelog Motio upholds the Semantic Versioning Specification. Support Reward the developer And make him happy for maintaining this library! I don't want to go the Isotope & family route and monetize my libraries. jQuery plugin If you consider jQuery to be a separate language and are not interested in learning JavaScript, you can use the jQuery plugin version of Motio: Working with Motio via a jQuery proxy has some limitations. Performance Motio is chained to the requestAnimationFrame (with a polyfill for older browsers) and optimized for speed and garbage collection. Examples Move cursor over the example to control the panning direction and speed. Documentation
jQuery.Shapeshift Demo What is Shapeshift? Inspired heavily by the jQuery Masonry plugin, Shapeshift is a plugin which will dynamically arrange a collection of elements into a column grid system similar to Pinterest. What sets it apart is the ability to drag and drop items within the grid while still maintaining a logical index position for each item. This allows for the grid to be rendered exactly the same every time Shapeshift is used, as long as the child elements are in the correct order. Function > Form Shapeshift was designed to always render the same grid as long as the elements are in the same order. Features Column Grid System: All items flow from left to right, top to bottom.
Photobox – CSS3 jQuery image gallery – dropthebit I wanted 3 things from any image gallery script: first, it to be beautiful and posses a great look & feel. second to be lightweight and not use many assets, and third, I want a script that was built with performance at mind. I was working on something else entirely when I had to find a nice image gallery script. I wanted one of those that the user would basically click a thumbnail and the larger version of the image would be displayed on top of the page, in a modal window fashion. Feb 2 - Version 1.6 is available. Lots has been changed, for the better. Please report any bugs or ideas in the Github project page, as I'm perfecting this code on a daily basis. So, I opened Google search and type of sorts of things, and looked at many scripts that suppose to do that I wanted. I saw no choice but to write my own script. Demo page Benefits So what can this script do? How to use Put photobox.css and then jQuery in your page (make sure it's not a super old version..) Settings Demo page photobox on github
Calendario: A Flexible Calendar Plugin A jQuery calendar plugin for creating flexible calendars. View demo Download source Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. Please note that the demos will only work as intended in browsers that support the new CSS properties used here, especially calc(). The calendar designs are based on these two beauties found on Dribbble: For the calendar plugin to work, we simply need a container with the class “fc-calendar-container”: The plugin can be called like this: $( '#calendar' ).calendario(); The plugin will create a calendar with the following structure: The calendar will consist of a head for the listing of the weekdays and a body with rows for the days of the month. <div class="fc-content"><span class="fc-date">14</span><span class="fc-weekday">Wed</span><div></div></div> Options Demos
SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets Posted by Zach on 11/26/2012 You’re minding your own business, casually browsing around on the World Wide Web. You navigate to a page that begins to load and render, but suddenly it stalls. Social Networking widgets are a digital blot on the beautiful canvas we call the web. Design considerations aside, the widgets’ biggest affliction is their file size. A discerning developer might begin to wonder if it is possible to use these sharing tools without adversely affecting page performance and accessibility. To solve these problems, we built SocialCount. See it in action SocialCount’s live demo will show you a variety of sizes and orientations. How to use it Add socialcount.js and socialcount.css to your page, ideally the CSS in the \<head> and JS at the end of the \<body>. Use the included Markup Generator to create your baseline HTML. <ul class="socialcount" data-url=" data-counts="true"><li class="facebook"><a href="