HTML Expandable

"Русская версия"


HTML layout for banner with possibility of collapsing and expanding for which you could connect CSS styles and JavaScript code.

Banner's funcionality that you could specify when adding in AdFox includes:

  • - dimensions for collapsed and expanded banner are specified only in pixels;

  • - 10 direction for expanding;

  • - setting value of impressions for expanded banner;

  • - setting value of autoexpandings(showing expanded banner right away) and possibility to set session time for autoexpandings for unique user;

  • - setting speed for animation of expanding and collapsing;

  • - shift the content while expanding.


Take a look on the example of HTML expandadble banner.

Download the example of HTML expandable banner.

Requirements for HTML code

Writing a code you have to follow our requirements:

1. Your code shouldn't contain opening and closing tags:

html, head, meta, title, body, doctype

2. It might be no more than 65 000 symbols in code.

More preferable is to place JavaScript and CSS into HTML code.

If your final code consists more than acceptable quantity of symbols, it might be reduced by using JavaScript and CSS in standalone files:

- save js and css in standalone files (not more than 5 files) with .js and .css extensions;

- file size must not be more than 300 kb;

3. Attaching files to HTML code:

You have to use variables instead of links on files if HTML code contains attaching files ( js, css, images, flash):

File 1 - File 5. Manager will upload files to appropriate variables when adding a banner in ADFOX. File links will be replaced by user variables.

Example of attaching js and css files:

<script type="text/javascript" src="%user1%"></script>

<link rel="stylesheet" type="text/css" href="%user2%" />
If there is more that 5 files, it might be used absolute links on files. Files must be available. Its not permitted to use relative links on files.

4. Counting clicks in banner

If you need to collect statistics on clicks in ADFOX, direct links have to be replaced to variable:


To specify location where linked document is opened use a target attribute. If that attribute is not consists linked document is opened inside an iframe, i.e. at banner place.


<a href="%reference%" target="%target%">Advertiser's site</a>

5. Counting clicks with several buttons in HTML banner

There are several links that offers different pages of advertising site, and you need to have statistics on each of them.

<a href="" target="_blank">First link</a>

<a href="" target="_blank">Second link</a>

1. Replace direct links to vaiable %reference% - so system will count common quantity of clicks.

2. By using @%eventHTML1%-@%eventHTML29% redirecting user to a necessary page. After this we have links as:

<a href="%reference%@%eventHTML1%" target="%target%">First link</a>

<a href="%reference%@%eventHTML2%" target="%target%">Second link</a>

Manager, who adds a banner in ADFOX, have to be notified about Compliance of used links and variables.

First link - - %eventHTML1% (Event 1)
Second link - - %eventHTML2% (Event 2)

6. Calling the collapsing/expanding function

Expanding/collapsing functionality implies increasing or decreasing dimensions of container for HTML code. Therefore, changing content that is displayed inside the container is perfomed by HTML code developer.

expandStart - function for increasing container dimensions(expanding the banner).
expandEnd - function for decreasing container dimensions to the original ones(collapsing the banner).

In case mouseover and mouseout events are used it is recommended to set it to the iframe element inside which HTML banner code is located. Expanding(expandStart) and collapsing(expandEnd) functions should be called on that level. It is recommended because in some cases these events might not work properly if it is set for the elements inside iframe.

7. If you use tag textarea, it have to be used as:


8. Information about container, which will be used for HTML code:

If it's used synchronous code on site:

<div id="adfoxHtml5_pseudoPlaceholder_[rnd]">
    <iframe id="adfoxHtml5_iframe_[rnd]" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
        HTML code

If it's used an asynchronous code on your site:

<div id="AdFox_banner_[rnd]">
    <iframe id="adfoxHtml5_iframe_[rnd]" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
        HTML code

You may use variable %random1% if you need to get [rnd] in HTML code.

To a manager who adds banner:

1. There is have to be specified a common link in "URL link" field, that link will not be called.

2. Links have to be specified in tab Banners -> Events in "URL link" field corresponding to it's event.

Statistics includes common quantity of views and clicks on tab Events also you can get data on transition directly for each reference.

Information from developer needed for adding banner in ADFOX

In order to add HTML banner in AdFox it is necessary to receive next information from developers:

1. Project folder with HTML code.

2. If there are additional files connected to the code by variables it is required to match file name and variable.

file1.png - %user1%  
file2.css - %user2%  

3. Link to the adveriser's site(Transition URL)

4. If there are several links in the banner it is necessary to match these links with the number of the event. - %eventHTML1% (Событие 1). - %eventHTML2% (Событие 2).

5. Dimensions for collapsed and expanded banners in pixels.

6. You can also add link to the tracking pixel if it is needed.

7. Function names for expanding and collapsing the banner (default expandStart and expandEnd)

8. For autoexpanding it is necessary to put the content expanding function's name inside the HTML code.

Adding in ADFOX

To add a banner in ADFOX choose necessary Type of banner and HTML код с расхлопом[Sync_Async] temlpate. If there is no template at you template list it might be added from pre-defined.

Values for parametres in "Content" section have to be specified:

URL link - specify a link to advertiser's site.

If you don't need to count clicks or if code of another ad serving system is used then fill the field randomly.

"Target" - is used to specify the location where linked document is opened.

_blank - Opens the linked document in the parent frame.

_parent - Opens the linked document in a new window or tab.

Tracking pixel link - link to a tracking pixel if you need to count views at another ad serving system.

To insert a random number of links use macro %random% established in ADFOX

File 1 - File 5 - if there any ad materials attached to a code it might be uploaded in variables.

Make sure there are variables %user1% - %user5% in your code.

Width before expanding (Ширина до расхлопа в px или 100%) - set width for the first banner(before expanding). If it's 100% width before expanding so it'll be 100% width after expanding.

Width after expanding (Ширина после расхлопа в px или 100%) - set width for the second banner(after expanding). If it's 100% width after expanding so it'll be 100% width before expanding.

Height before expanding (Высота до расхлопа в px) - set height for the first(before expanding) in px.

Height after expanding (Высота после расхлопа в px) - set height for the second banner(after expanding) in px.

Expanding direction (Направление расхлопа) - which direction banner should expand.

Possible values:

Autoexpanding count (Кол-во авторасхлопов default 0) - number of autoexpandings for unique user.

Session time for autoexpanding (Время сессии для авторасхлопа default 20) - time(hours) starting with first autoexpanding during which autoexpanding number's setting is on.

Always autoexpand (авторасхлоп всегда - default no) - takes values yes/no, yes - banner is always shown expanded.

Animation duration (Время анимации default 0) - duration(seconds) of expanding/collapsing animation. If value is 0 there is no animation.

Frames per second (Кадров в секунду FPS default 40) - framerate(in second) for animation.

Function name for expanding container (Имя функции для вызова расхлопа контейнера) (default expandStart)-- JavaScript function in HTML code for expanding animation.

Function name for collapsing container (Имя функции для вызова схлопа контейнера) (default expandEnd)- JavaScript function in HTML code for collapsing animation.

Function name for expanding banner contents (Имя функции для вызова расхлопа креатива) (default expand) - JavaScript function in HTML code for showing the expanded banner.

Styles for banner's block - specify styles for div block, in which code is. Format of styles is inline CSS. For example, to position banner in center: margin: 0 auto;

HTML code - insert HTML code

Expanding direction:

overhead_left_corner – from top-left corner to bottom-right


overhead_right_corner – from top-right corner to bottom-left


lower_left_corner – from bottom-left to top-right


lower_right_corner – from bottom-right to top-left


central_point – from central point










Последнее обновление: 19.10.2015