Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

height


matchHeights

Submitted by madmike1029 on June 24, 2010 - 4:11pm

Plugin to match the heights of the targeted elements. This also factors in adjustments for padding and border compensation.

jHeights

Submitted by rjgoldsborough on May 4, 2010 - 8:35am

Have you ever had a two or three column layout, and the column heights just wouldn't line up. Yeah? Then jHeights is for you. With just a simple function call, your column heights will be equal!

$(document).ready(function(){
$("#example_div").jheights();
});

****NOTE****
HTML markup must follow this pattern:

<div id="example_div">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>

...where div#example_div is the selector the function will be called on and left, center, and right are the columns that need the same height

Contact me about custom versions!

EvenIfHidden - Get layout information of hidden DOM elements

Submitted by petrillodavide on April 22, 2010 - 12:16pm

evenIfHidden is a jQuery plugin able to get layout information about a DOM element even in the case the element, or one of its containers, is hidden.

The case

Let's assume we have a box, wrapped in one or more containers. A <div> in a <div>. And we'd like to get information about the box's layout (width or height, for example), no matter the state of the box or the containers.

The problem

If a DOM element or one of the elements this one in contained in is hidden, with a display: none; CSS property, the jQuery's build-in functions like width() or height() will rightly return a value that is probably 0. This is due to the fact that an hidden DOM element actually occupies no space in the layout.

The solution

Stretch Menu

Submitted by jake on April 12, 2010 - 4:54pm

Usage:

$(DOM node).stretchMenu(options);

Equally distributes menu items based on height of parent container. Optionally animates the menu with a sliding effect.

Limitation: Assigns padding to all items based on height of first child. In other words, if some of your menu items are more than one line of text, this menu might break out of the parent container.

jQuery Iframe Resizer

Submitted by sroucheray on February 9, 2010 - 5:29am

Helps to resize iframes included in a webpage.
* Automatically resizes iframes height depending on their content
* Sets multiple iframes size in one line of code

var options = {
        width: "fill",
//width options are :
//'fill' (default, equivalent to 100%),
//any valid CSS unit : '90%', '230px', '12em'
        height: "auto", //height options are :
//'auto' (default, will adapt iframe height to its content, the more content, the higher)
//any valid CSS unit : '90%', '230px', '12em'
        autoUpdate : true
// 'true' (default, automatically update iframe height on content changes in the future) or 'false'

};
$("body").iframeResize(options);

kiketable.rowsizable (aka Grid Row Sizing)

Submitted by Enrique Melende... on July 27, 2007 - 5:23am

This plugin, applied to a number of HTML tables, provides the behaviour of resizing their rows by clicking over a "handler/ helper".

I have change the name: kike (my nickname, means, my version, not an official one), table (it remains an html Table), rowsizable (this plugin makes rows to be resizable by their height).