Forum Academy Marketplace Showcase Pricing Features

NEW PLUGIN: Element Observer

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