Introducing
Element Observer (Free & Pro)
Observe any page element for changes in style values like height, width,background-color
Why use this plugin?
Responsive design - You want to trigger a conditional state when a single element’s exact width is less than a certain number of px.
You want to trigger a conditional based on any style change not just what is available as a built-in trigger in bubble
Demo Pages:
Free vs Pro
-
Free allows for monitoring of one element per page and the element ID must be set to be
el_observer - Pro allows you to set any ID and allows for monitoring unlimited number of elements per page
Plugin Page (Free):
Element Observer Plugin | Bubble
Plugin Page (Pro):
- Waiting on approval by bubble -
Installation instructions
- Place cssobserver element on page.
- In a workflow, run start observer step
- In workflow step, specify CSS property you want to monitor for changes (
height,background-color, etc) - (For pro) specify the element ID you wish to monitor
- In workflow step, specify CSS property you want to monitor for changes (
- The cssobserver page element will now:
- show the monitored value and update it with any changes
- show the previous value so you can compare the changes if you want
- can trigger a workflow each time a change to the property is detected
- Place another cssobserver element on the page and repeat previous steps for each additional property or element (pro) that you want to monitor.
