Dom Outline
Firebug/Dev Tools-like DOM outline implementation using jQuery.
This fork additionally support the following options: border, realtime, label, multiple
Example Usage
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler, filter: 'div' });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
myDomOutline.stop();Options
| Option | Description | Default |
|---|---|---|
| borderWidth | The width of the outline border, in pixels. | 2 |
| onClick | The function fired when the user clicks while the DOM outline is active. Receives the target element as an argument. | false |
| namespace | The private namespace used for CSS selectors and events. Available in the unlikely event of possible event/CSS collisions. | 'DomOutline' |
| filter | A selector that an element should match in order to be outlined and clicked. By default no filter is applied. | false |
| border | A border used as the visual indicator surrounding the element. If false a semi-transparent blue overlay box is used instead (like firebug). | false |
| realtime | Shows the visual indicator as you hover the mouse over the elements. If false the visual indicator shows when clicking an element (maybe implementing ctrl-left click is better?). | false |
| label | Shows a label above the visual indicator. The label contains the element's name, id, class name, and dimensions. | false |
| multiple | Select multiple elments. Click to select, click again to cancel. | false |
Other Notes
- Tested to work in Chrome, FF, Safari. Buggy in IE ;(
- Creates a single global variable:
window.DomOutline