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. Or have a look at the documented sources.

The sources are available on GitHub where you'll also find a changelog.

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)
• docs for the previous release 0.10 are still available

Quick start

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.

Contact

Lars Jung
lrsjng [at] gmail [dot] com
@lrsjng

License

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