JS libs
Jump to navigation
Jump to search
Basics
- jQuery - Docs Main Page
- jQuery UI - jQuery's visual controls. jQuery UI features a wide range of core interaction plugins as well as many UI widgets. The project homepage is located at jqueryui.com. Please visit these pages for downloading UI and many demos.
- 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.
Masonary
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?
- Impress.js - It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
- http://tantaman.github.com/Strut/ Strut] - Presentation editor for Impress.js
- dizzy.js is a Javascript library that enables you to create nonlinear presentations similiar to Prezi without using Flash. The presentation data is stored in the SVG-format, the navigation and animation is done via Javascript.
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.