THEMETRIAL

Highlight DOM Elements On Hover – TheRoom

Author:hsynlms
Views Total:0 views
Official Page:Go to website
Last Update:May 1, 2021
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="https://www.cssscript.com/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.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)

v2.0.1 (07/08/2020)

  • some tweaks and status improvement

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.