Highlight DOM Elements On Hover – TheRoom

Category: Javascript | October 23, 2020
Author: hsynlms
Views Total: 75 views
Official Page: Go to website
Last Update: October 23, 2020
License: MIT

Preview:

Highlight DOM Elements On Hover – TheRoom

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.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

You Might Be Interested In:


Leave a Reply