arbor-jquery-plugin

jQuery Arbor

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.

Author: Christian Swinehart
jQuery Version: 1.6 +
Official Page
Learn how to do it!
DemoDownload this one!
DOM-actual-width-jquery-plugin

jQuery DOM Actual Width

A jQuery plugin that gets the actual width of hidden DOM elements

Description

Older version of jQuery has trouble finding the width/height of invisible DOM elements. With element or its parent element has css property ‘display’ set to ‘none’.$('.hidden').width(); will return 0 instead of the actual width. This plugin simply fix it.

Author: Ben
jQuery Version: 1.2 +
Official Page
Learn how to do it!
DemoDownload this one!
plugin

Element DOM Tree jQuery plugin – Firebug like functionality

Have you even seen G+ Feedback page style? It works pretty much like firebug, when you find something working work, you an ordinary user, will point and click which element is buggy so they will know what they need to do.

Here we’ll see a plugin that allows you to do such functionality. It gives you firebug-like selectors but with one really big advantage, it returns the correct element tree, so you’ll know exactly which element is broken. For instance, if you have a bug report on “#content p” you may never know that actually the broken paragraph was the 10th one.

And we’ll learn a little bit about DOM tree and how to get things easily done without messing around with jQuery (when we don’t need it, of course).

fit-text-jquery-plugin

FitText

A jQuery plugin for inflating web type. FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

This is for gigantic display text only!

Author: Paravel
jQuery Version: 1.7 +
Official Page
Learn how to do it!
DemoDownload this one!
BBQ-back-button-jquery-plugin

jQuery BBQ: Back Button & Query Library

jQuery BBQ 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.

Author: Ben Alman
jQuery Version: 1.4 +
Official Page
Learn how to do it!
DemoDownload this one!
set-equal-height-jquery-plugin

Setting Equal Heights with jQuery

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts.

When developing complex web applications or site designs we’ve found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element.

When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.

Author: Filament Group
jQuery Version: 1.2 +
Official Page
Learn how to do it!
DemoDownload this one!
lazy-loader-jquery-plugin

Lazy Load Plugin for jQuery

Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.

Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Author: Mika Tuupola
jQuery Version: 1.7 +
Official Page
Learn how to do it!
DemoDownload this one!
rounded-corners-internet-explorer-jquery-plugin

Rounded Corners in Internet Explorer with jQuery

jQuery UI is built upon a powerful CSS Framework, including round corners that utilize CSS3′s border-radius property. Unfortunately, CSS3 border-radius is only supported by Safari and Firefox, leaving browsers such as Internet Explorer to gracefully degrade to square corners.

In many cases this is an acceptable fallback, but for those websites that really need to look “just right” in all major browsers, a workaround is needed. We recently experimented with the DD_roundies library and found it to be a promising solution to this problem.

DD_roundies is a javascript library authored by Drew Diller which offers a new approach to bringing rounded corners to Internet Explorer (a browser notorious for its CSS shortcomings).

Author: Filament Group
jQuery Version: 1.3 +
Official Page
Learn how to do it!
DemoDownload this one!
internetexplorer-text-shadow-jquery-plugin

Text-Shadow In IE With JQuery

Three out of four major browsers support text-shadow. That leaves just Internet Explorer with the lack of text-shadow. This article has already taken care of that problem, but decided to wrap it up in a nice automated jQuery plugin.

One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. It should work in Internet Explorer 5.5 to Internet Explorer 8, since this plugin was added the new Internet Explorer 8 version of filter, -ms-filter.

Author: Kilian Valkhof
jQuery Version: 1.2 +
Official Page
Learn how to do it!
DemoDownload this one!