JQuery

From Things and Stuff Wiki
Jump to navigation Jump to search


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.

News

API

Dimensions

Development

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

Plugins

to sort

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

Lightbox

Graphs

Table

Layout

Popup

Tooltips

  • qTip2 - Pretty powerful tooltips

Textarea

Animation

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

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
}

Scroll with page

Scrolling and parallax

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.

Forms

Typography

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.

Video

Shadows

Twitter

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=JQuery&oldid=9177"