MARKETPLACE
PLUGINS
ELEMENT MONITORS
Element Monitors logo

Element Monitors

Published June 2022
   •    Updated December 2025

Plugin details

This plugin provides sevelal utility elements: - Visibility Monitor allows to detect visibility level of an element in browser viewport using IntersectionObserver API and fires correspoding appearance and disappearance events.
- Resize Monitor allows to track size characteristics of a target element and fires corresponding resize events.
- Browser Info provides touch device flag and some other user-agent properties.
- Component element provides general-purpose communication functionality and actions to upload and download files.

Visibility Monitor was initially created to track appearance of Group element in browser's viewport and start related animations in that group. Unlike standard IntersectionObserver concept, Visibility Monitor is able to calculate intersection ratio relative to viewport size instead of target element's size which makes it more user-friendly when it comes to large blocks. An Element Appeared event is fired when share of target element visible area relative to either its own size of the veiwport exceeds certain value. Similarly, Element Disappeared event is fired when target element's share of its visible area/size becomes less than a certain value.
It also monitors target element's visibility state. Unlike standard css ":visible" property, it considers "visibility:hidden" state as invisible (fires Element Disappeared event). The ability to monitor target element's visibility state is limited to element itself only. The case when target element disappears due to its container becoming invisible is currently missing.
Some limitations apply to Visibility Monitor placed inside Repeating Group depending on the nature of its datasource as it may cause a messy of Element Appeared events during its initialization. To provide consistent behaviour consider Visibility Monitor's state in conjunction with "loading" state of that Repeating Group. I'd suggest to rely on "Do when condition is true" actions to determine if element appeared with condition: Visibility Monitor's Element Visible = "yes" and Repeating Group loading = "no".

Resize Monitor element is able to track target element's size and to synchronize width and/or height of other elements with the observed values. An example of usage is synchronization of width of Group Focus element that display an option list of a custom dropdown to match width of it's input control.

Visibility Monitor and Resize Monitor elements can be attached to targets in two possible ways: by specifying target element's ID or by putting an element into a group container it will attach to. If you specify target element ID, location of plugin element is not important providing that it is initially visible even if its target element is not.

Component element provides general-purpose utility functions:
- Messaging functionality: allows to send or broadcast messages between elements to overcome existing limitations of bubble.io engine that provides no means for communication between elements inside Repeating Group.
- Upload and download functionality with both server- and client-side actions allows to transfer files to app's bubble (S3) storage and to external APIs in conjunction with API Connector plugin.
An important tip when using Component element is that each message handling operation must end with Message Processed action of Component element. This action indicates that handler completed message processing and Component can start delivering next message in a queue. If you forget to place this action at the end of event handling workflow, no further events in the event queue will be processed.

More details can be found on demo page:
https://visibilitymonitorpluginexample.bubbleapps.io/version-test

Free

For everyone

stars   •   0 ratings
295 installs  
This plugin may track or collect your data. Learn how.

Other actions

Platform

Web & Native mobile

Contributor details

Codium logo
Codium
Joined 2022   •   3 Plugins
View contributor profile

Instructions

Instructions: 1. Install the plugin
2. Either put plugin element into a target container without target element ID specified or anywhere on the page with target element ID specified.
3. Set up plugin element parameters.
4. Create workflows triggered by plugin element's events or use its states in conditions.

Data collection and tracking

This author has not yet disclosed their data usage policy. Learn more by contacting the author.

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble