jQuery.fracs

jQuery.fracs determines some fractions for an HTML element (visible fraction, fraction of the viewport, ...) and also provides the coordinates of these areas. As a bonus there is a page outline feature as seen on the right.

See the demo to get an impression of some of the features.

The sources and a changelog are available on GitHub.

Notable

• release 0.11 is not compatible with the previous releases
• release 0.11 depends on jQuery 1.7+
• jquery.fracs-0.11.js is the core lib
• the outline feature can be found in jquery.outline-0.11.js and depends on the core lib
  (you'll need to include both files)

Getting started

Fractions

To retrieve the fractions of an element use:

var fracs = $(selector).fracs();

this will return an object of type Fractions.

Or bind a callback function:

function callback(fracs: Fractions, previousFracs: Fractions) {
	...
	// context variable *this* will be the corresponding HTMLElement
	...
};
 
$(selector).fracs(callback);

The callback function will be called whenever fracs and previousFracs are unequal. A check will be triggered on every window resize or window scroll event. To trigger it manually use

$(selector).fracs('check');

Outline

Add a canvas to your document (use a fixed position to keep it in viewport)

<canvas id="outline" width="200" height="400"></canvas>

and then in your javascript initialize the outline with some OutlineOptions, for example

$("#outline").fracs("outline", {
	crop: true,
	styles: [
		{
			selector: 'header,footer,section,article',
			fillStyle: 'rgb(230,230,230)'
		},
		{
			selector: 'h1',
			fillStyle: 'rgb(240,140,060)'
		}
	]
});

API

Currently there is only the documented source.

License

jQuery.fracs is provided under the terms of the MIT License.