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!

Size Adapter

Size Adapter is a component for resize handling.

  • Component Loading

    To start with the SizeAdapter Component, you have to load it in 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.SizeAdapter.js"></script>
        
        <!-- Components -->
  • Public Methods
    add

    function add(width, height, data)

    Adds the item with its properties to the SizeAdapter.

    Parameters
    width:Number - Original item width.
    height:Number - Original item height.
    data:Object - Rest item data.

    Returns SizeAdapter instance.

    get

    function get(width, height)

    Method will execute the fit and crop calculations by specific dimensions and return the result.

    Parameters

    width:Number - A width for fit and crop calculations.
    height:Number - A height for fit and crop calculations.

    Returns an object with size info with the properties:

    • fit Object - an object with data that was calculated to fit the specific dimensions.
    • crop Object - an object with data that was calculated by cropping it according to the specific dimensions.

    Where each of the properties are objects having their own properties:

    • data - original item data;
    • originalWidth Number - original width;
    • originalHeight Number - original height;
    • scale Number - scale coefficient;
    • scalesTo String - 'height' or 'width', which defines how the item should be scaled;
    • width Number - new width;
    • height Number - new height.
    resize

    function resize(width, height)

    Method will execute the fit and crop calculations by the specific dimensions and dispatch some events including the result.

    Parameters

    width:Number - The width for fit and crop calculations.
    height:Number - The height for fit and crop calculations.

    Returns Nothing.

  • Events

    Event listeners can be added and removed using methods {instance}.on() and {instance}.off().

    There are two types of events:

    Fit Events: Crop Events:
    'fit:size' - whenever the size changes;
    'fit:scalesTo' - whenever the scalesTo changes;
    'fit:scale' - whenever the scale changes.
    'crop:size' - whenever the size changes;
    'crop:scalesTo' - whenever the scalesTo changes;
    'crop:scale' - whenever the scale changes.

    Example:

    	
    	<html>
        <head>
            <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.SizeAdapter.js"></script>
        
        <!-- Components -->
    	
        </head>
    <body>
        <script>
            var SizeAdapter = Adform.Component.SizeAdapter;
            var adapter = SizeAdapter();
            adapter.add(320, 320, {src: 'assets/content320x320.jpg'});
            adapter.add(480, 480, {src: 'assets/content480x480.jpg'});
            adapter.add(600, 600, {src: 'assets/content600x600.jpg'});
            adapter.add(768, 768, {src: 'assets/content768x768.jpg'});
            adapter
                .on('fit:size', eventHandler)
                .on('fit:scalesTo', eventHandler)
                .on('fit:scale', eventHandler)
                .on('crop:size', eventHandler)
                .on('crop:scalesTo', eventHandler)
                .on('crop:scale', eventHandler);
            function eventHandler(event) {
            console.log(event.width, event.height, event.scalesTo);}
    
            function update() {
            var width = document.body.offsetWidth
            var height = document.body.offsetHeight;
            adapter.resize(width, height);
            }
    
            window.onresize = update;
            update();
        </script>
     </body>
    </html>