determine the visible fractions of an HTML element


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.

Getting started

To use the core lib include jquery.fracs-0.15.0.js. The outline feature is implemented in jquery.outline-0.15.0.js and depends on the core lib (you'll need to include both files).


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


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


Document 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)'


Currently there is only the documented source code.

Works best with JavaScript enabled!Works best in modern browsers!