jQuery: The Write Less, Do More, JavaScript Library
Tooltipster - The jQuery Tooltip Plugin
Styling your tooltips with a custom look ⇑ Tooltipster makes it very easy to go from one of the packaged themes and customize a few properties of your choice. To do so, we recommend that you create a so-called "secondary theme" which will override some properties of a packaged theme. Create a new css file and include it in your page. For your secondary theme to be applied, provide an array of themes instead of just one. Changing the size of the arrow might be the only challenging customization but it's doable! Updating a tooltip's content ⇑ It's easy as pie to update a tooltip's content - whether it's open or closed. $('#myelement').tooltipster('content', 'My new content'); // or when you have the instance of the tooltip: instance.content('My new content'); Tooltipster plays a subtle animation when the content changes. Using AJAX to generate your tooltip content ⇑ One great use for this is to grab dynamic content for your tooltips via AJAX. Forcing or disabling sides ⇑ Predefined behaviors
jQuery Masonry
InnerFade with jquery
What is it? InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. The call Examples A newsticker (with animationtype: 'slide') <ul id="news"><li><a href="#n1">1 Lorem ipsum dolor</a></li><li><a href="#n2">2 Sit amet, consectetuer</a></li><li><a href="#n3">3 Sdipiscing elit,</a></li><li><a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a></li><li><a href="#n5">5 Nec Lorem. A list with images and links Elements with classes <div class="fade"><p> 1 </p><p> 2 </p><p> 3 </p><p> 4 </p><p> 5 </p><p> 6 </p><p> 7 </p><p> 8 </p><p> 9 </p><p> 10 </p></div><div class="fade"><p> A </p><p> B </p><p> C </p><p> D </p><p> E </p><p> F </p><p> G </p><p> H </p><p> I </p><p> J </p><p> K </p><p> L </p><p> M </p><p> N </p><p> O </p><p> P </p><p> Q </p><p> R </p><p> S </p><p> T </p><p> U </p><p> V </p><p> W </p><p> X </p><p> Y </p><p> Z </p></div> Download
Backbone.js
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license. You can report bugs and discuss features on the GitHub issues page, on Freenode IRC in the #documentcloud channel, post questions to the Google Group, add pages to the wiki or send tweets to @documentcloud. Backbone is an open-source component of DocumentCloud. Downloads & Dependencies (Right-click, and use "Save As") Backbone's only hard dependency is Underscore.js ( >= 1.5.0). Introduction Many of the examples that follow are runnable. Upgrading to 1.1
Responsive Measure: A jQuery plugin for responsive typography
Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text. It also has the ability to generate a resolution independent font-scale based on the ideal font-size. $(document).on('responsiveMeasureUpdated', function(e, data) { $('.giga').css('fontSize', data.fontRatios[9] + 'px'); $('h1').css('fontSize', data.fontRatios[8] + 'px'); $('h2').css('fontSize', data.fontRatios[7] + 'px'); $('h3').css('fontSize', data.fontRatios[6] + 'px'); $('p').css('fontSize', data.fontRatios[5] + 'px'); $('.sm').css('fontSize', data.fontRatios[4] + 'px'); }); Check out the examples to see the plugin in action.
jQuery Plugins Toolbox
Best jQuery Plugins all in one place. BBQ: Back Button & Query Library Source: Leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods. ColorBox: Lightbox Source: A light-weight, customizable lightbox plugin Color Picker Source: Selection: A simple component to select color in the same way you select color in Adobe Photoshop Cookie Source: Selection: Set and get cookies with jQuery. Cycle: Slideshow Source: Slideshow plugin that supports many different types of transition effects. Date Range Picker Source: Flip Flot: Charting
rot
rot.js: ROguelike Toolkit in JavaScript #################### #.............##...# #.............##...# - GitHub #............D##.?.
Isotope
jStorage - simple JavaScript plugin to store data locally
liteAccordion | Stitch UI
New! Accordion Pro JS is a responsive version of liteAccordion, with lots of upgrades and new features (vertical accordions!). Check it out on CodeCanyon. Download More information and download link on the original blog post. Q. A. Q. A. Q. A. liteAccordion is not responsive. Q. A. Q. A. liteAccordion is no longer actively maintained, whereas Accordion Pro JS is regularly updated with upgrades and new features. Q. A. Q. A. Q. A. liteAccordion is free to use for commercial and personal projects. Q. A. How to use 1. <head><link rel="stylesheet" href="liteAccordion.css"></head><body> ... 2. <div id="yourdiv"><ol><li><h2><span>Slide One</span></h2><div></div></li><li><h2><span>Slide Two</span></h2><div></div></li><li><h2><span>Slide Three</span></h2><div></div></li><li><h2><span>Slide Four</span></h2><div></div></li><li><h2><span>Slide Five</span></h2><div></div></li></ol><noscript><p>Please enable JavaScript to get the full experience. 3. <script> $('#yourdiv').liteAccordion();</script> Options
