JQuery

to merge with JS scripts

General

• 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.

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

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

• http://jqfundamentals.com/
• http://ejohn.org/blog/selectors-in-javascript - history

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

• http://jqueery.com

News

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

API

• jQuery API
• API docs
  • CSS
• http://docs.jquery.com/Alternative_Resources

• jQAPI - Alternative jQuery Documentation.
• jQuery 1.7 API Cheat Sheet
• jQuery source viewer

• http://www.jsrosettastone.com/

Dimensions

• http://api.jquery.com/category/dimensions/

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

• http://plugins.jquery.com/

• 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

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. [1]

• 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 [2]
• 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 [3]
  • 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. [4]
  • 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/ [5]
• 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