jQuery.fracs

determine the visible fractions of an HTML element

Advertisement
0.12.0

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.

Getting started

To use the core lib just include jquery.fracs-0.12.0.js. The outline feature can be found in jquery.outline-0.12.0.js and depends on the core lib (you'll need to include both files).

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

License

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