Container settings

Alignment

If the received content is smaller than the container, it can be aligned within the container using alignX and alignY.

Margins

Vertical margins are set using marginTop and marginBottom. A fill container will apply these settings as soon as it is active, while a non-fill container will apply the margins when content has been received.

Developer mode

Containers can run in live or dev mode. In live mode the container will load content from the linked content provider. In developer mode, placeholder elements will be displayed instead of live content. This can be very useful while developing the site.

Developer mode is enabled by settings the devMode option.

Fade

By default, containers fade content in and out when applicable which can create a better user experience. Control fade using the fade option.

Filling

When content is loaded dynamically and the environment is subject to latency, elements of a web page may jump as the content is received. To avoid such content shifting a container can fill the expected space while waiting for the content to arrive. Filling is enabled by setting the fill option.

The color of the filled space can be set with the fillBackground option.

Inheritance

Containers can inherit the settings from another container by the use of extends. If a container is set to abstract it cannot be instantiated.

Containers that are not to be instantiated should always be abstract, since the configuration validation will fail for any non-abstract container with incomplete configuration.

Labels

Containers can show a label at the top. This can be used to mark content as an advertisement. Set the label with the label option and control color using labelColor. Custom classes can be added using option labelClasses. Labels are displayed only when content has been received by the container.

Lazy loading

Lazy load is a utility that makes the container postpone loading of its content until it is likely that it will be viewable. The container will load when the user scrolls towards it or when it is in the viewport. Lazy load is enabled by setting the container option lazy.

The lazyDistance option controls how close to the viewport the container should load its content.

Load parameters

Load parameters are provider-specific parameters that are passed to the provider every time a container loads or unloads content. Parameters are set with the params option. A typical use case is to pass placement identifiers to an ad server.

Responsive containers

ADK containers can be responsive. This means that containers will only load when the viewport fulfills certain width conditions. Breakpoints are configured in the breakpoints config object. The default setting is that there are no breakpoints, meaning that the container will load on any viewport width.

A container can be configured to show on multiple breakpoints. Container breakpoints are configured using the breakpoints container option.

Stickiness

Sticky containers make the content stay in the viewport as the visitor scrolls. Stickiness is enabled by setting the container option sticky.

The default behavior is that the container will slide within the extent of its parent, meaning that it is restricted vertically by the parent's top and bottom. Options stickyTop and stickyBottom can be used to restrict the container using other elements than the parent.

Margins can be set for the outer positions with the stickyTopMargin and stickyBottomMargin options.

If a specific z-index is required for the sticky container to flow on top of other content, it can be set with stickyZIndex.

The stickiness can be disabled after a certain time using the option stickyDuration. This will cause a lingering behavior, where the container will first be sticky and then return to its position in the normal flow of the page. This is useful for increasing viewability of top placements.

Unload and reload

Unload is a function that can be used to automatically unload content from a container under certain conditions. The content provider must support unload for the unload settings to have effect. Unloading is enabled by setting the option unload.

The unloadInscreen option controls whether unload is allowed when some portion of the container is in the viewport.

A timeout can be set using option unloadTime to ensure that a certain amount of time has passed since the content was loaded before it can be unloaded. This is useful for placements that should be unloaded while in the viewport. The unloadNonViewable option controls whether content that has not been deemed viewable will be unloaded.

Reload is a related option that is used to setup automatic reload of an unloaded container. Reload is controlled with the reload container option.