JS libs

From Things and Stuff Wiki
Revision as of 07:19, 23 March 2012 by Milk (talk | contribs)
Jump to navigation Jump to search


Basics

News

Plugins

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