Difference between revisions of "JS libs"

From Things and Stuff Wiki
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.
  
* http://archive.plugins.jquery.com/ - new one is being [https://github.com/jquery/plugins.jquery.com/ built]
+
=== Textarea ===
 
 
==== Textarea ====
 
 
* https://github.com/IceCreamYou/jQuery-Autogrow
 
* https://github.com/IceCreamYou/jQuery-Autogrow
  
==== Animation ====
+
=== Animation ===
 
* http://gsgd.co.uk/sandbox/jquery/easing/
 
* http://gsgd.co.uk/sandbox/jquery/easing/
  
 
* http://jackrugile.com/jrumble/
 
* http://jackrugile.com/jrumble/
  
==== Carousel ====
+
=== 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 ====
+
=== 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 ====
+
=== 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 ====
+
=== 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 ====
+
=== 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 ====
+
=== 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

News

API

Development

Plugins

http://jquery.malsup.com/

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

Typography

Waypoints

Actions on certain areas of the page.

Forms

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.