Reference: Uberflip Hub events for JavaScript

Jan Griffiths

Last Updated: December 09, 2021 17:10

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.

Important

This article describes how to use Hub events in legacy Front End V1 Hubs. The same Hub events are available in Front End V2 Hubs, but their usage is different. As a result, the information provided in this article is not applicable if you are working with a Front End V2 Hub.

For documentation on how to use Hub events in Front End V2 Hubs, see the Hub events reference guide on Uberflip Developers.

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 default 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 default 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')
```