Difference between revisions of "JS libs"
Jump to navigation
Jump to search
Line 28: | Line 28: | ||
== Plugins == | == Plugins == | ||
+ | * http://archive.plugins.jquery.com/ - new one is being [https://github.com/jquery/plugins.jquery.com/ built] | ||
+ | |||
+ | http://jquery.malsup.com/ | ||
+ | |||
+ | === jQuery UI === | ||
* [http://jqueryui.com/ jQuery UI] provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. | * [http://jqueryui.com/ jQuery UI] provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. | ||
− | + | === Textarea === | |
− | |||
− | |||
* https://github.com/IceCreamYou/jQuery-Autogrow | * https://github.com/IceCreamYou/jQuery-Autogrow | ||
− | + | === Animation === | |
* http://gsgd.co.uk/sandbox/jquery/easing/ | * http://gsgd.co.uk/sandbox/jquery/easing/ | ||
* http://jackrugile.com/jrumble/ | * http://jackrugile.com/jrumble/ | ||
− | + | === Carousel === | |
* http://fredhq.com/projects/roundabout | * http://fredhq.com/projects/roundabout | ||
** https://github.com/fredhq/roundabout | ** https://github.com/fredhq/roundabout | ||
Line 51: | Line 54: | ||
The above works only for the first instance. Use window.setTimeout to alter further IDs. [https://github.com/fredhq/roundabout/issues/12] | The above works only for the first instance. Use window.setTimeout to alter further IDs. [https://github.com/fredhq/roundabout/issues/12] | ||
− | + | === Scroll to anchor === | |
* https://github.com/JamyGolden/PlusAnchor/ | * https://github.com/JamyGolden/PlusAnchor/ | ||
** http://css-plus.com/2010/11/create-a-scrolling-anchor-link-with-jquery/ | ** http://css-plus.com/2010/11/create-a-scrolling-anchor-link-with-jquery/ | ||
Line 110: | Line 113: | ||
} | } | ||
− | + | === Scrolling and Parallax === | |
* [http://www.wduffy.co.uk/jScroll/ jScroll] is a jQuery plugin that keeps an element in view when a user scrolls. [http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/] | * [http://www.wduffy.co.uk/jScroll/ jScroll] is a jQuery plugin that keeps an element in view when a user scrolls. [http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/] | ||
** https://github.com/wduffy/jScroll | ** https://github.com/wduffy/jScroll | ||
Line 134: | Line 137: | ||
* http://www.sequencejs.com/ | * http://www.sequencejs.com/ | ||
− | + | === Typography === | |
* http://www.frequency-decoder.com/demo/slabText/ - scaling headline text | * http://www.frequency-decoder.com/demo/slabText/ - scaling headline text | ||
Line 140: | Line 143: | ||
* http://www.kernjs.com/ | * http://www.kernjs.com/ | ||
− | + | === Waypoints === | |
Actions on certain areas of the page. | Actions on certain areas of the page. | ||
Line 146: | Line 149: | ||
** https://github.com/imakewebthings/jquery-waypoints | ** https://github.com/imakewebthings/jquery-waypoints | ||
− | + | === Forms === | |
* http://harvesthq.github.com/chosen/ - A library for making long, unwieldy select boxes more user friendly | * http://harvesthq.github.com/chosen/ - A library for making long, unwieldy select boxes more user friendly | ||
Revision as of 16:30, 21 July 2012
Basics
- The Basics of jQuery February 28th 2012
- jQuery By Example - blog
News
- jQuery.Buzz() - Latest jQuery news & resources
API
- jQAPI - Alternative jQuery Documentation.
- jQuery 1.7 API Cheat Sheet
- jQuery source viewer
Development
Plugins
- http://archive.plugins.jquery.com/ - new one is being built
jQuery UI
- jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
Textarea
Animation
Carousel
$("ul#roundabout").roundabout({ autoplay: true, autoplayInitialDelay: 2000 });
The above works only for the first instance. Use window.setTimeout to alter further IDs. [1]
Scroll to anchor
$('body').plusAnchor({ easing: 'swing', // The easing method, defaults are 'swing' and 'linear'. // Anything else requires the easing.js plugin speed: 1000 // The amount of time, in milisecons, it takes to complete a transition });
$("#someDiv").slideto({ highlight_color: 'blue', highlight_duration: 'slow', slide_duration: 500 });
- http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery [2]
- https://github.com/litera/jquery-scrollintoview
$("some_selector").scrollintoview({ duration: 2500, direction: "vertical", complete: function() { // highlight the element so user's focus gets where it needs to be } });
$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });
$('a').smoothScroll(); $('#container a').smoothScroll(); $('#container a').smoothScroll({excludeWithin: ['.container2']}); exclude links if they are within a containing element: $('a').smoothScroll({exclude: ['.rough','#chunky']}); exclude links if they match certain conditions $('.backtotop').smoothScroll({offset: -100}); adjust where the scrolling stops $('a').smoothScroll({afterScroll: function() { alert('we made it!'); }}); add a callback function that is triggered after the scroll is complete
{ offset: 0, direction: 'top', // one of 'top' or 'left' scrollTarget: null, // only use if you want to override default behavior afterScroll: null, // function to be called after scrolling occurs. "this" is the triggering element easing: 'swing', speed: 400 }
Scrolling and Parallax
- http://joelb.me/scrollpath/ - define custom scroll paths
- http://markdalgleish.com/projects/stellar.js - not so good in chrome?
Typography
- http://www.frequency-decoder.com/demo/slabText/ - scaling headline text
Waypoints
Actions on certain areas of the page.
Forms
- http://harvesthq.github.com/chosen/ - A library for making long, unwieldy select boxes more user friendly
Sharing
Bubbles
Injection
- DiceJS (dynamically injected css engine) is a jQuery extension that allows you to store your CSS in JavaScript objects to dynamically manipulate and inject as you please.