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