JQuery

to merge with JS scripts

General

• jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

• http://www.leebrimelow.com/native-methods-jquery/ [1]

API

• jQuery API Documentation
  • CSS
  • Dimensions

• jQuery Annotated Source.
• jQAPI - Alternative jQuery Documentation.
• jQuery 1.8 API Cheat Sheet
• jQuery source viewer - check method implementations easier

• http://www.jsrosettastone.com/

• http://h3manth.com/content/native-js-jquery - basic alternative

Learning

• Tutorials: How jQuery Works
• Tutorials: Getting Started with jQuery

• The Basics of jQuery February 28th 2012
• jQuery By Example - blog

• jQuery Fundamentals is designed to get you comfortable working through common problems you'll be called upon to solve using jQuery. To get the most out of this site, you'll want to read the content and try the various interactive examples. Each chapter will cover a concept and give you a chance to try example code related to the concept.
• http://ejohn.org/blog/selectors-in-javascript - history

• http://zeptojs.com/ - jqueryapi but lighter

News

• jQuery.Buzz() - Latest jQuery news & resources

jQuery UI

• jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Development

• Get jQuery Selector Path

• http://www.jquerytools.org/download/

var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

Plugins

• jQuery Plugin Registry

• http://jquery.malsup.com/
• http://iwantaneff.in/repo/
  • https://github.com/higgo/handpicked.jquery.plugins.repo
  • http://forum.jquery.com/topic/the-handpicked-jquery-plugins-repository

• http://www.unheap.com

to sort

• https://github.com/dbushell

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.

Images

• http://lenticular.attasi.com/

• https://github.com/t3hprogrammer/flipgrid.js

• http://srobbin.com/jquery-plugins/backstretch/ - a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element

Lightbox

• http://fancyapps.com/fancybox/

Graphs

• http://omnipotent.net/jquery.sparkline

Table

• http://handsontable.com/

Layout

• http://masonry.desandro.com/
• http://isotope.metafizzy.co/
• http://www.wookmark.com/jquery-plugin

• https://github.com/tsvensen/equalize.js

• http://webpop.github.com/jquery.pin/

• http://xoxco.com/projects/code/breakpoints/
• http://responsive-slides.viljamis.com/
• http://www.zurb.com/playground/responsive-tables

• http://fitvidsjs.com/

Popup

• http://labs.voronianski.com/jquery.avgrund.js

Navigation

• http://tinynav.viljamis.com/

Tooltips

• qTip2 - Pretty powerful tooltips

• http://getwordsmith.co/

• http://trentrichardson.com/Impromptu/ - for tutorials

Textarea

• https://github.com/IceCreamYou/jQuery-Autogrow

Animation

• http://gsgd.co.uk/sandbox/jquery/easing/

• jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element.

• http://davidcrawford.github.com/typist-jquery/

Carousel

• http://fredhq.com/projects/roundabout
  • https://github.com/fredhq/roundabout

$("ul#roundabout").roundabout({
   autoplay: true,
   autoplayInitialDelay: 2000
});

The above works only for the first instance. Use window.setTimeout to alter further IDs. [2]

• https://github.com/p-m-p/jquery-box-slider

Scroll to anchor

• https://github.com/JamyGolden/PlusAnchor/
  • http://css-plus.com/2010/11/create-a-scrolling-anchor-link-with-jquery/

$('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
});

• https://github.com/djpate/jSlideto/tree/master/js
  • http://djpate.com/2011/01/01/animated-scrollto-effect-jquery-plugin/

$("#someDiv").slideto({
  highlight_color: 'blue',
  highlight_duration: 'slow',
  slide_duration: 500
});

• http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery [3]
• https://github.com/litera/jquery-scrollintoview
  • http://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html

$("some_selector").scrollintoview({
   duration: 2500,
   direction: "vertical",
   complete: function() {
     // highlight the element so user's focus gets where it needs to be
   }
});

• http://archive.plugins.jquery.com/project/ScrollTo [4]
  • http://flesler.blogspot.com/2007/10/jqueryscrollto.html
  • http://demos.flesler.com/jquery/scrollTo/
  • http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery

$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });

• jQuery Smooth Scrolling Internal Links

• jquery-smooth-scroll

$('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
}

Scroll with page

• http://css-tricks.com/scrollfollow-sidebar/
• http://stackoverflow.com/questions/2177983/how-to-make-div-follow-scrolling-smoothly-with-jquery
  • http://jsfiddle.net/VEsdu/
  • http://jqueryfordesigners.com/fixed-floating-elements/

• http://www.hawkee.com/snippet/9445/

Scrolling and parallax

• jScroll is a jQuery plugin that keeps an element in view when a user scrolls. [5]
  • https://github.com/wduffy/jScroll

• http://joelb.me/scrollpath/ - define custom scroll paths
  • https://github.com/JoelBesada/scrollpath

• http://www.ianlunn.co.uk/plugins/jquery-parallax/
  • https://github.com/IanLunn/jQuery-Parallax

• http://johnpolacek.github.com/scrollorama/
  • https://github.com/johnpolacek/scrollorama

• http://johnpolacek.github.com/scrolldeck.js/

• http://imakewebthings.github.com/deck.js/

• http://lab.hakim.se/reveal-js/

• http://markdalgleish.com/projects/stellar.js - not so good in chrome?
  • https://github.com/markdalgleish/stellar.js

• http://www.sequencejs.com/

• http://www.infinite-scroll.com/

• http://www.devinrolsen.com/jquery-zlayers-parallax-plugin/

• http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/

• http://airbnb.github.com/infinity/

• http://web-features.net/

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.

Feedback

• https://github.com/siong1987/jquery.feedback

Introduction overlay

• http://eragonj.github.com/Trip.js/

• http://heelhook.github.com/chardin.js

Forms

• http://harvesthq.github.com/chosen/ - A library for making long, unwieldy select boxes more user friendly, for jQuery and Prototype

• http://elclanrs.github.com/jq-idealforms/

Typography

• http://www.frequency-decoder.com/demo/slabText/ - scaling headline text

• http://letteringjs.com/ [6]
• http://www.kernjs.com/

• https://github.com/scottgonzalez/figlet-js

• https://github.com/zachleat/BigText

Time

• Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").]

Waypoints

Actions on certain areas of the page.

• http://imakewebthings.github.com/jquery-waypoints
  • https://github.com/imakewebthings/jquery-waypoints

Footnotes

• https://github.com/davesnitty/footnoter

Video

• http://dfcb.github.com/BigVideo.js/

• http://videojs.com/
  • http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

Shadows

• http://indamix.github.com/real-shadow/

Twitter

• https://github.com/divshot/tweetscroller

RSS

• zRSSFeed - will read RSS feeds from any website URL using the Google Feeds API. It produces structured HTML with in-built CSS classes for styling.

• FeedEk is a RSS/ATOM Feed Reader/Importer/Parser that is written with jQuery. You can obtain feeds easily from any domain.
  • https://github.com/enginkizil/FeedEk
  • https://github.com/ArthurAssuncao/FeedEk