NEW PLUGIN: Element Observer


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 Version / Pro

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

Element Observer looks cool, thank you @jon2 for building it.

Can this plugin be used to detect whether a CSS class has been added to my Bubble app?

For context, I am using Progressier to manage my PWA, and I need to know whether my user is viewing my Bubble app in “standalone” mode vs normal browser window/tab.

Progressier adds a CSS class to my Bubble app’s body when “standalone” is detected, as described here:

Can Element Observer detect the presence of this CSS class?