From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Single File Expanding Ad

A single expanding banner format consists of collapsed part (smaller size) and on tap/click, the ad expands to wider/higher instance. The expanded banner can offer video and other rich media experience. The expanded part accommodates a link to the predefined landing page. The ad maintains expanded size until the “Close” button is clicked.

  • Single Expanding Component

    Single Expanding javascript component helps to easily create animated single file expanding banner. In order to use SingleExpanding component, user should add component script to his HTML asset and initialize component by calling SingleExpanding.init() method (see the example). To destroy single expanding component SingleExpanding.destroy() method should be used.

    In order to start with the Single Expanding Component, it has to be loaded to your document:

    <script>
       var preloadQueue = [ 'SingleExpanding' ];
       document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
    </script>
  • Settings

    For a complete Single Expanding Component setup, the user may define additional seetings. These settings, however, are optional and have default values.

    Setting

    Meaning

    X

    Type: Number
    Description: Collapsed member x coordinate. The value cannot be smaller than 0 and higher than whole asset width minus collapsed part width.
    Default: 0

    Y

    Type: Number
    Description: Collapsed member y coordinate. The value cannot be smaller than 0 and higher than whole asset height minus collapsed part height.
    Default: 0

    collapsedWidth

    Type: Number
    Description: Collapsed member width.
    Default: 0

    collapsedHeight

    Type: Number
    Description: Collapsed member height.
    Default: 0

    expandEasing

    Type: Function
    Description: Expand animation easing function. The animation depends of expand time.
    Default: linear

    collapseEasing

    Type: Function
    Description: Collapse animation easing function. The animation depends of collapse time.
    Default: linear

    expandTime

    Type: Number
    Description: Expand animation duration in seconds.
    Default: 0

    collapseTime

    Type: Number
    Description: Collapse animation duration in seconds.
    Default: 0

  • Easing animations

    expandEasing and collapseEasing properties are used to set animation easing type. User can pass his own easing function or use one of the following static properties:

    var SingleExpanding = Adform.Component.SingleExpanding;
    var index = Math.floor(Math.random() * 15);
    var easing = [
        SingleExpanding.regularEaseIn,
        SingleExpanding.regularEaseOut,
        SingleExpanding.regularEaseInOut,
        SingleExpanding.backEaseIn,
        SingleExpanding.backEaseOut,
        SingleExpanding.backEaseInOut,
        SingleExpanding.strongEaseIn,
        SingleExpanding.strongEaseOut,
        SingleExpanding.strongEaseInOut,
        SingleExpanding.bounceEaseIn,
        SingleExpanding.bounceEaseOut,
        SingleExpanding.bounceEaseInOut,
        SingleExpanding.elasticEaseIn,
        SingleExpanding.elasticEaseOut,
        SingleExpanding.elasticEaseInOut 
    ][index];
  • Supported events

    SingleExpanding.on() and SingleExpanding.off() methods should be used to add or remove single expanding event listeners. All the available events are listed below.

    Event Meaning
     SingleExpanding.EXPAND_START Value: 'expandStart'
    Description: Event is emited on expand start.
    SingleExpanding.EXPAND_END Value: 'expandEnd'
    Description: Event is emited on expand end.
    SingleExpanding.EXPAND_UPDATE Value: 'expandUpdate'
    Description: Event is emited on expand update.
    SingleExpanding.COLLAPSE_START Value: 'collapseStart'
    Description: Event is emited on collapse start.
    SingleExpanding.COLLAPSE_END Value: 'collapseEnd'
    Description: Event is emited on collapse end.
    SingleExpanding.COLLAPSE_UPDATE Value: 'collapseUpdate'
    Description: Event is emited on collapse update.

  • Code snippet example
    <html>
    
    <head>
        <script>
            var preloadQueue = ['SingleExpanding'];
            document.write('<script src="' + (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv=' + Math.random()) + '"><\/script>');
       <script>
    </head>
    
    <body>
        <script type="text/javascript">
            var SingleExpanding = Adform.Component.SingleExpanding;
            var settings = {
                x: 200,
                y: 310,
                collapsedWidth: 728,
                collapsedHeight: 90,
                expandEasing: SingleExpanding.regularEaseOut,
                collapseEasing: SingleExpanding.elasticEaseIn,
                expandTime: 1,
                collapseTime: 1
            };
            SingleExpanding.init(settings);
    
            SingleExpanding.on(SingleExpanding.EXPAND_START, function() {
                console.log(SingleExpanding.EXPAND_START);
            });
    
            SingleExpanding.on(SingleExpanding.COLLAPSE_START, function() {
                console.log(SingleExpanding.COLLAPSE_START);
            });
        </script>
    </body>
    
    </html>