Reference: Uberflip Hub Events for JavaScript

Follow

A reference guide to the various Uberflip-specific HTML events that you can use with Custom Code.


 

Before You Begin

  • This article describes Uberflip Hub events that you can hook into when writing JavaScript Custom Code, along with the correct method to use them. To learn more about Custom Code and how to use it on your Hub, see this article.

 

Hub Events Method and Usage

You can use Uberflip-specific HTML events, called Hub Events, as triggers for your JavaScript Custom Code. To create event handlers for Hub Events, use the following method:

Hubs.Events.on('eventName', myFunction)

For eventName, substitute the Hub Event to be used (see table below).

For myFunction, substitute your JS function. This must be a function declaration, not a function call. For example:

Acceptable (declaration):

function myFunction() {/*Do action*/}

Not acceptable (call):

myFunction()

 

Available Hub Events

This table lists the Hub Events that you can use:

  • eventName lists the eventName to be used in the event handler
  • Parameters lists any parameters for which arguments will be passed to the handler function
eventName Description Parameters Notes
load
When major Hub elements are loaded None  
resize
When browser window finishes changing size None Debounced version of native browser event, i.e. won't fire as soon as or during a size change, only after
scroll
When a user finishes a scroll movement None Debounced version of native browser event, i.e. won't fire as soon as or while a user scrolls, only after
ctaActivate
When a user clicks on a Form CTA, and the CTA enters the "Focus" state
  • ctaId
Any changes aimed at Form CTAs must be on this event
ctaFormSubmitSuccess
When a user submits a Form CTA, and the CTA enters the "Success" state
  • ctaId
  • ctaData
  • ctaName
 
itemsLoaded

When more Items in a Stream load, either when a user reaches the bottom of the page and more Items load automatically, or when the user clicks the "Load More" button

  • itemIds
  • selector
  • Fires when the additional Items have finished loading, not as soon as they begin to load
  • itemIds provides an array of the Items that were loaded
  • selector can be used to get all the elements, e.g with jQuery:
    "$("+selector+")"
recoItemsLoaded

When Items served by the Content Recommendations feature finish loading

None
  • Depending on setup and user screen size, target Items may load in any of the recommendation panel, More Content carousel, or Next Item flyout

 

Notes

  • Hub Events can be chained like other jQuery functions, e.g.
    Hubs.Events
    .on('eventName', myFunction)
    .on('eventName', myFunction)
    ...
  • Event listeners can be turned off, e.g.
    Hubs.Events.off('scroll')
5 out of 5 found this helpful

Comments

0 comments

Please sign in to leave a comment.