Submit your widget

jQuery.fracs plugin scroll

Created 12 years ago   Views 8380   downloads 1152    Author larsjung
jQuery.fracs plugin scroll
View DemoDownload
Share |

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.


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



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


Static methods


// Returns the dimension of the whole document.
// 0.5
jQuery.fracs.document(): Rect


// Returns the fractions for an arbitrary Rect or HTMLElement and viewport,
// viewport defaults to jQuery.fracs.viewport().
jQuery.fracs.fracs(rect: Rect, [viewport: Rect]): Fractions
jQuery.fracs.fracs(element: HTMLElement, [viewport: Rect]): Fractions

// Shortcuts
// 0.9
jQuery.fracs(rect: Rect, [viewport: Rect]): Fractions
jQuery.fracs(element: HTMLElement, [viewport: Rect]): Fractions


// Returns the element's dimensions in document space.
jQuery.fracs.rect(element: HTMLElement): Rect


// Returns the rounded value to a given precision, precision defaults to 0.
jQuery.fracs.round(value: float, [precision: int]): float


// Scrolls the viewport relative to the current position, duration
// defaults to 1000.
// 0.8
jQuery.fracs.scroll(left: int, top: int, [duration: int])


// Returns the current scroll state.
// 0.8
jQuery.fracs.scrollState(): ScrollState

// Binds a callback function that will be invoked if scroll state has changed
// after a window resize or window scroll event.
// 0.9
jQuery.fracs.scrollState(callback(state: ScrollState, prevState: ScrollState))


// Scrolls the viewport, duration defaults to 1000.
// 0.4
jQuery.fracs.scrollTo(left: int, top: int, [duration: int])

Read more: