jQuery.fracs - Determine the visible fractions of an HTML element

Download   Demo

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.

1. INCLUDE JS FILES

<script src=”../lib/jquery-1.10.2.min.js”></script>

<script src=”../jquery.fracs-0.12.0.js”></script>

<script src=”../jquery.outline-0.12.0.js”></script>

2. HTML

<canvas id=”outline” width=”200″ height=”400″></canvas>

3. JAVASCRIPT

$(“#outline”).fracs(“outline”,

crop: true,

styles: [


selector: 'header,footer,section,article',

fillStyle: 'rgb(230,230,230)'

,


selector: 'h1',

fillStyle: 'rgb(240,140,060)'


]

);

jQuery.fracs - Determine the visible fractions of an HTML element