jQuery.fracs

determine the visible fractions of an HTML element

licenseMITgithublrsjng/jquery-fracsbowerlrsjng/jquery-fracs
0.15.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.

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

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

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)'
        }
    ]
});

API

Currently there is only the documented source code.