Highlight DOM Elements On Hover – TheRoom

Preview:

Description:

TheRoom is a JavaScript plugin that applies a customizable overlay effect to any DOM elements on hover.

Also provides the ability to display the current selector (tag, id, and class) you’re viewing on, similar to the web inspector.

You can also specify the DOM elements to exclude.

How to use it:

1. Download and import the ‘theroom.js’ into the document.

<script src="dist/theroom.min.js"></script>

2. Config and initialize the TheRoom library. That’s it.

window.theRoom.configure({
  // options here
})
window.theRoom.start()

3. Full plugin options to config the TheRoom

window.theRoom.configure({
  // string or DOM node of the inspector
  inspector: null,
  // If true and inspector option is not provided, theRoom will try to create an inspector element whose class is inspector-element for you and will be appended to body tag
  createInspector: false,
  // add the theRoom's namespace to html tag
  htmlClass: true,
  // block page direction
  blockRedirection: false,
  // exclude elements here
  excludes: []
})

4. More API methods.

// stop
window.theRoom.stop();
// get status
window.theRoom.status();

5. Event handlers.

window.theRoom.on('mouseover', function (element) {
  // do something
});
window.theRoom.on('starting', function (element) {
  // do something
});
window.theRoom.on('started', function (element) {
  // do something
});
window.theRoom.on('stopping', function (element) {
  // do something
});
window.theRoom.on('stopped', function (element) {
  // do something
});
window.theRoom.on('click', function (element) {
  // do something
});
window.theRoom.on('hook', function (element) {
  // do something
});

Changelog:

v2.1.6 (05/23/2021)

• Bugfix

v2.1.5 (05/17/2021)

• Bugfix

v2.1.2 (05/01/2021)

• Chore: packages are updated

v2.1.1 (10/23/2020)

• Feat: hook event can manipulate mouseover and click events to be get called by returning false

v2.0.8 (10/15/2020)

• Feat: Pass MouseEvent as the second argument in hover and click events

v2.0.7 (10/16/2020)

• Fix: Inspector as HTML node bugfix
• Tweak: Stop function minor tweaks

v2.0.6 (10/16/2020)

• Feat: Resetting inspector styles on stop

v2.0.4 (10/16/2020)

• Fix: empty excluded element list selector bug
• Feat: new createInspector option and new exposed theRoom function configure

v2.0.2 (07/11/2020)

• Tweak: Some refactoring

v2.0.1 (07/08/2020)

• some tweaks and status improvement