jQuery Unveil - A very lightweight plugin to lazy load images. Most of us are familiar with the Lazy Load plugin by Mika Tuupola. This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won't be loaded until the user scrolls to them. Lazy Load has some cool options such as custom effects, container, events or data attribute.
If you're not gonna use any of them you can reduce the file size by leaving just the essential code to show the images. That's what I did and this is my lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays - less than 1k. Usage Use a placeholder image in the src attribute - something to be displayed while the original image loads - and include the actual image source in a "data-src" attribute. If you want to serve high-resolution images to devices with retina displays, you just have to include the source for those images in a "data-src-retina" attribute. Threshold Callback.
FlipClock.js. Color Swatches. Samsono/Easy-Responsive-Tabs-to-Accordion. Transit - CSS transitions and transformations for jQuery. What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (!
$.support.transition) $.fn.transition = $.fn.animate; Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering. Mini Ajax File Upload Form.
MixItUp - A CSS3 and JQuery Filter & Sort Plugin. Tooltipster - The jQuery Tooltip Plugin. Styling your tooltips with a custom look ⇑ Tooltipster makes it very easy to go from one of the packaged themes and customize a few properties of your choice. To do so, we recommend that you create a so-called "secondary theme" which will override some properties of a packaged theme. Create a new css file and include it in your page. Inside the file, declare your customized rules like this: For your secondary theme to be applied, provide an array of themes instead of just one. Changing the size of the arrow might be the only challenging customization but it's doable! Updating a tooltip's content ⇑ It's easy as pie to update a tooltip's content - whether it's open or closed. $('#myelement').tooltipster('content', 'My new content'); // or when you have the instance of the tooltip: instance.content('My new content'); Tooltipster plays a subtle animation when the content changes.
Using AJAX to generate your tooltip content ⇑ Forcing or disabling sides ⇑ // ... is the same as ...' 1) Open triggers. Code School - Try jQuery. Moment.js | Parse, validate, manipulate, and display dates in javascript. Numeral.js. Handsontable - jQuery grid editor. Excel-like grid editing with HTML & JavaScript. 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. Then it scans the maxtric for gaps and tries to fill them by reordering the elements.
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 resizeToFitOptions animate. ThreeSixty. Lazy Line Painter. 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"
Canvas Query. #50C1AL Share, #50C1AL Profiles. 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. Pickadate.js. A Fully Responsive & Lightweight jQuery Dateinput Picker. 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. Metro JS - Metro Live Tiles and More for jQuery - Drew Greenwell - Professional Developer. jQRangeSlider: jQuery plugin for range sliders. X-editable :: In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery. 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. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. 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.
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. For a few seconds you stare at a partial white screen, appalled at the hiatus your device has placed on your browsing flow. Finally, the page yields and loads the remainder of the content. What just happened? It’s likely that you’ve fallen prey to a poorly implemented Facebook, Twitter, or Google Plus share button. 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 That’s it! Adaptive Thumbnail Pile Effect with Automatic Grouping. Gamma Gallery - A Responsive Image Gallery Experiment. Assemblage Becoming Sky high Life Beleaguer Chatoyant Denouement Desuetude Diaphanous Desuetude Languor Inglenook Forbearance Penumbra Mondegreen Plethora Onomatopoeia Wafture Cynosure Epiphany Felicity Serenity Furtive Glamour Inure Labyrinthine Lagoon Desire Leisure Softness Moiety Nemesis Panacea Scintilla Example for loading more items...
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. This gained quite a following and the theme was heavily used in 2009 and 2010. Width Default 225px gutter. Delta – A Free jQuery UI Theme | Kiandra IT Blog. Kiandra is pleased to announce the open sourcing of a jQuery UI theme we think you’re going to love. We have been using the “Delta” theme for the better part of a year and made the decision to share it with the community. We’re hoping this results in plenty of feedback as well as the continued development of the theme. It’s free for commercial, personal and educational use as part of the MIT or GPL license. If anything, we think that this theme can act as a starting point for other smart cookies to create their own visually engaging jQuery UI themes.
You can fork this theme over on the GitHub repository. Features: Open source – Free for commercial and personal use alike under an MIT license.Retina ready – The theme makes use of CSS3 gradients and some @2x images to ensure it’s retina display friendly.Dark and light friendly – The vibrant colour scheme means “Delta” works on both light and dark backgrounds. Support & Testing: Did you find an issue? View Demo – Go to Repository. SlideControl.js jQuery Plugin. In Your <head> <link rel="stylesheet" type="text/css" href="slideControl.css" /><script type="text/javascript" src=" type="text/javascript" src="jquery.slideControl.js"></script><script type="text/javascript"> $(document).ready(function() { $('.slideControl').slideControl();});</script> Options speed: Controls the speed of the animation for a slider reszing, defaults to 400 lowerBound: Sets the minimum amount the slider can be set to, defaults to 1 upperBound: Sets the maximum amount the slider can be set to, defaults to 10 <ul><li><label>Responsiveness: </label><input type="text" value="6.0" class="slideControl" /></li><li><label>Safety: </label><input type="text" value="4.0" class="slideControl" /></li><li><label>Information: </label><input type="text" value="9.0" class="slideControl" /></li></ul> The CSS file included should be pretty straight-forward.
Usage. Tiny Circleslider: A lightweight circular carousel for jQuery. jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point. Uniform - Sexy forms with jQuery. Yannis Chatzikonstantinou / Freetile.js. jQuery Ajaxy - Apricots. Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement. jQuery plugin for Avgrund concept popin. Freqdec/slabText. BigVideo.js - The jQuery Plugin for Big Background Video. Table fixed header. Speakker - The new way of <audio> Creating a Complete HTML5 Drag and Drop File Uploader with jQuery. JustGage.com. jQuery Zoom. Js. Gridster.js.
Holder.js - client side image placeholders. Sharrre - A plugin for sharing buttons. Repo.js. BaseDemo - HorizontalNav. Percentage Loader. jQuery++ CoverScroll jQuery plugin. Nothing Insightful • I’ve just pushed some pretty hefty changes to the... “prettyPrint” for JavaScript. qTip2 - Pretty powerful tooltips - Demos - Simple integration. jQuery Knob demo. Datepicker Demos. Recreating the Nikebetterworld.com Parallax Effect. Untitled. JavaScript Modal Windows – TinyBox2. Simple Vote Using JQuery Animate. Downloads for sproutcore's TransformJS - GitHub. Script Junkie | Introduction to Stateful Plugins and the Widget Factory. Building Large-Scale jQuery Applications. jQuery Deconstructed. 75 Most Useful jQuery Plugins of Year 2010. Grid. Web standards playground. jQAPI - Alternative jQuery Documentation. Ceaser - CSS Easing Animation Tool - Matthew Lein.
GameQuery - a javascript game engine with jQuery. LeanModal - a JQuery modal plugin that works with your CSS.