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 .html document:

    <script>
            document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
        </script>
        <!-- Components -->
        <script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding.js"></script>
        <!-- Components -->
  • 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

    Bellow examples shows how to simply setup Single Expand component inside the banner. 

    1. Place provided code bellow inside .html document:
       <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="utf-8">
          <title>Expandable (SingleFile) v 1.5</title>
          <link rel="stylesheet" href="//s1.adform.net/banners/scripts/components/styles/Adform.Styles-1.css" />
          <link rel="stylesheet" href="styles/custom.css" />
          <script>
              document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
          </script>
          <!-- Components -->
          <script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer-1.js"></script>
          <script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding-1.js"></script>
          <!-- Components -->
      </head>
      <body>
          <div id="adf-banner" class="adf-Banner u-sizeFull">
              
              <!-- Banner contents -->
              <div id="adf-collapsed" class="adf-Collapsed adf-Background adf-Border u-sizeFull">
              
                  <!-- Logo - feel free to remove this element -->
                  <div id="adf-logo-collapsed" class="adf-Logo"></div>
                  
                  <!-- Banner info - feel free to remove this element -->
                  <div id="adf-info-collapsed" class="adf-Info">
                      <div class="adf-Info-title">Collapsed Section</div>
                      300x250 px
                  </div>
              </div>
              
              <div id="adf-expanded" class="adf-Expanded adf-Background adf-Border u-sizeFull">
              
                  <!-- Logo - feel free to remove this element -->
                  <div id="adf-logo-expanded" class="adf-Logo"></div>
                  
                  <!-- Banner info - feel free to remove this element -->
                  <div id="adf-info-expanded" class="adf-Info">
                      <div class="adf-Info-title">Expanded Section</div>
                      500x300 px
                  </div>
                  
                  <!-- Click area - do NOT remove this element -->
                  <div id="adf-click-area" class="adf-ClickArea"></div>
                  
                  <!-- Close button - do NOT remove this element -->
                  <div id="adf-close-button" class="adf-Button adf-Close">
                      Close
                  </div>
              </div>
              <!-- Banner contents end -->
          </div>
      
          <script src="scripts/custom.js"></script>
          
          <!-- User code -->
          <script>
              var banner = document.getElementById('adf-banner');
              var collapsed = document.getElementById('adf-collapsed');
              var expanded = document.getElementById('adf-expanded');
              var closeButton = document.getElementById('adf-close-button');
              var clickArea = document.getElementById('adf-click-area');
              var clickTAGvalue = Adform.getVar('clickTAG') || 'http://www.adform.com'; // Adform.getVar() gets clickTAG variable from Adform, if it is not defined (e.g. banner is being tested locally) it will fallback to second value
              var landingpagetarget = Adform.getVar('landingPageTarget') || '_blank'; // same as above - landingPageTarget from Adform or falls back to _blank
      
              var settings = ({
                  banner: banner,
                  collapsed: collapsed,
                  expanded: expanded,
                  clickArea: clickArea,
                  closeButton: closeButton,
                  clicktag: clickTAGvalue,
                  target: landingpagetarget,
                  collapsedBackground: Adform.getAsset(4), // set background image from additional assets for collapsed stage
                  expandedBackground: Adform.getAsset(5) // set background image from additional assets for expanded stage
              });
      
              
              var expandable = new Adf.Expandable(settings);
      
              expandable.init(); // initialize expandable
          </script>
          <!-- User code -->
    2. Create scripts folder, then create custom.js file and place inside newly created folder.
    3. Inside custom.js place code which you can find bellow:
      /* Set expanding and collapsing events and animations, add/remove classes and background images */
      (function (Adf) {
      
          "use strict";
      
          var SingleExpanding = Adform.Component && Adform.Component.SingleExpanding;
      
          // REUSABLE BLOCK LANDING FUNCTION - valid for mraid formats //
          function land(options) {
              if (!options.clicktag) {
                  return;
              }
              if (window.dhtml === undefined) {
                  mraid.open(options.clicktag);
              } else {
                  window.open(options.clicktag, options.target || "_blank");
              }
          }
      
          /* REUSABLE UTILITIES */
      
          /* SETS IMAGE AS BACKGROUND */
          function setBackgroundImage(elem, background, position, size) {
              if (elem && background) {
                  elem.style.background = "url('" + background + "') no-repeat " + (position || "50% 50%") + " / " + (size || "cover");
              }
          }
      
          /* REMOVES ELEMENTS WHEN IMAGE IS SET AS BACKGROUND */
          function removeElems() {
              [].forEach.call(arguments, function (id) {
                  var elem = document.getElementById(id);
                  elem && elem.parentNode.removeChild(elem);
              });
          }
      
          // REAL CUSTOM FUNCTION //
          function Expandable(options) {
              var offsetX = -1 * _AdformContent._position.x;
              var offsetY = -1 * _AdformContent._position.y;
              var isExpanding = false;
              var isCollapsing = false;
      
              var settings = {
                  x: offsetX,
                  y: offsetY,
                  collapsedWidth: dhtml.collapsedWidth,
                  collapsedHeight: dhtml.collapsedHeight,
                  expandEasing: (SingleExpanding && SingleExpanding.regularEaseOut) || "linear",
                  collapseEasing: (SingleExpanding && SingleExpanding.regularEaseIn) || "linear",
                  expandTime: Adform.getVar("expandTime") || "0",
                  collapseTime: Adform.getVar("collapseTime") || "0",
                  clicktag: null,
                  target: null,
                  video: null
              };
      
              function setup(options, settings) {
                  var prop;
                  var prop2;
                  for (prop in options) {
                      if (options.hasOwnProperty(prop)) {
                          if (settings[prop] instanceof Object) {
                              for (prop2 in options[prop]) {
                                  if (options[prop].hasOwnProperty(prop2)) {
                                      settings[prop][prop2] = options[prop][prop2];
                                  }
                              }
                          } else {
                              settings[prop] = options[prop];
                          }
                      }
                  }
              }
      
              setup(options, settings);
      
              function addEvents() {
                  if (settings.collapsed && settings.banner) {
                      settings.collapsed.addEventListener("click", function () {
                          dhtml.external.expand && dhtml.external.expand();
                          SingleExpanding || expandBanner();
                      });
                  }
      
                  if (settings.expanded && settings.clickArea) {
                      settings.clickArea.addEventListener("click", function () {
                          land(settings);
                      });
                  }
      
                  if (settings.closeButton && settings.banner) {
                      settings.closeButton.addEventListener("click", function (event) {
                          event.preventDefault();
                          event.stopPropagation();
                          dhtml.external.close && dhtml.external.close();
                          SingleExpanding || collapseBanner();
                      });
                  }
      
                  SingleExpanding && SingleExpanding.on(SingleExpanding.COLLAPSE_END, function () {
                      if (isCollapsing) {
                          settings.banner.classList.remove("adf-Transition");
                          settings.banner.classList.add("adf-FullyCollapsed");
                          isCollapsing = false;
                      }
                  });
      
                  SingleExpanding && SingleExpanding.on(SingleExpanding.COLLAPSE_START, function () {
                      collapseBanner();
                  });
      
                  SingleExpanding && SingleExpanding.on(SingleExpanding.EXPAND_END, function () {
                      if (isExpanding) {
                          settings.banner.classList.remove("adf-Transition");
                          settings.banner.classList.add("adf-FullyExpanded");
                          isExpanding = false;
                      }
                  });
      
                  SingleExpanding && SingleExpanding.on(SingleExpanding.EXPAND_UPDATE, function () {
                      if (!isExpanding) {
                          expandBanner();
                      }
                  });
      
                  SingleExpanding && SingleExpanding.on(SingleExpanding.EXPAND_START, function () {
                      expandBanner();
                  });
              }
      
              function expandBanner() {
                  if (isExpanding) return;
                  isExpanding = true;
                  isCollapsing = false;
                  settings.banner.style.transition = "all " + settings.expandTime + "s ease-out";
                  settings.banner.style.height = dhtml.height + "px";
                  settings.banner.style.width = dhtml.width + "px";
                  settings.banner.style.left = 0;
                  settings.banner.style.top = 0;
                  settings.banner.classList.add("adf-Transition");
                  settings.banner.classList.remove("adf-FullyCollapsed");
                  SingleExpanding || alternativeExpandEnd();
              }
      
              function collapseBanner() {
                  if (isCollapsing) return;
                  isCollapsing = true;
                  isExpanding = false;
                  settings.banner.style.transition = "all " + settings.collapseTime + "s ease-out";
                  settings.banner.style.height = dhtml.collapsedHeight + "px";
                  settings.banner.style.width = dhtml.collapsedWidth + "px";
                  settings.banner.style.left = offsetX + "px";
                  settings.banner.style.top = offsetY + "px";
                  settings.banner.classList.add("adf-Transition");
                  settings.banner.classList.remove("adf-FullyExpanded");
                  SingleExpanding || alternativeCollapseEnd();
              }
      
              function alternativeExpandEnd() {
                  if (!SingleExpanding) {
                      setTimeout(function () {
                          settings.banner.classList.remove("adf-Transition");
                          settings.banner.classList.add("adf-FullyExpanded");
                      }, settings.expandTime * 1000);
                      isExpanding = false;
                  }
              }
      
              function alternativeCollapseEnd() {
                  if (!SingleExpanding) {
                      setTimeout(function () {
                          settings.banner.classList.remove("adf-Transition");
                          settings.banner.classList.add("adf-FullyCollapsed");
                      }, settings.collapseTime * 1000);
                      isCollapsing = false;
                  }
              }
      
              function setBG() {
                  if (settings.collapsedBackground) {
                      setBackgroundImage(settings.collapsed, settings.collapsedBackground);
                      removeElems("adf-logo-collapsed", "adf-info-collapsed");
                      settings.collapsed.classList.remove("adf-Background", "adf-Border");
                  }
                  if (settings.expandedBackground) {
                      setBackgroundImage(settings.expanded, settings.expandedBackground);
                      removeElems("adf-logo-expanded", "adf-info-expanded");
                      settings.expanded.classList.remove("adf-Background", "adf-Border");
                  }
              }
      
              this.init = function () {
                  var initiallyExpanded = Adform.getVar("initiallyExpanded") || 0;
                  if (initiallyExpanded && settings.banner) {
                      settings.banner.classList.add("adf-Expanding");
                  } else if (!initiallyExpanded && settings.banner) {
                      settings.banner.style.height = dhtml.collapsedHeight + "px";
                      settings.banner.style.width = dhtml.collapsedWidth + "px";
                      settings.banner.style.left = offsetX + "px";
                      settings.banner.style.top = offsetY + "px";
                  }
                  SingleExpanding && SingleExpanding.init(settings);
                  setBG();
                  addEvents();
              };
      
              this.expand = function () {
                  dhtml.external.expand && dhtml.external.expand();
                  SingleExpanding || expandBanner();
              };
      
              this.collapse = function () {
                  dhtml.external.close && dhtml.external.close();
                  SingleExpanding || collapseBanner();
              };
      
              this.SingleExpanding = SingleExpanding;
          }
      
          Adf.Expandable = Expandable;
      
      }(Adf = window.Adf || {}));
      
    4. Create styles folder, then create custom.css file and place inside newly created folder.
    5. Inside custom.css place code which you can find bellow:
      /* Collapsed and Expanded stages styles - do NOT remove */
      
      .adf-Transition .adf-Expanded, .adf-FullyExpanded .adf-Expanded {
      	display: block;
      }
      
      .adf-Transition .adf-Collapsed, .adf-FullyExpanded .adf-Collapsed {
      	display: none;
      }
      
      /* Hide expanded stage's elements when banner is collapsed */
      
      .adf-Close,
      #adf-logo-expanded {
          display: none;
      }
      
      /* Show expanded stage's elements when banner is expanded */
      
      .adf-FullyExpanded .adf-Close,
      .adf-FullyExpanded #adf-logo-expanded {
          display: block;
      }
      
      /* Removable elements styles */
      
      .adf-Collapsed .adf-Logo {
      	left: auto;
      	right: 15px;
      }
      
      .adf-Info {
      	bottom: 10px;
      }