Skip to content

Latest commit

 

History

History
46 lines (31 loc) · 2.97 KB

README.md

File metadata and controls

46 lines (31 loc) · 2.97 KB
Raw

Resizer

Resizer - скрипт, который автоматически подстраивает высоту IFrame-приложения.

Как работает?

Resizer отслеживает положение заданных элементов страницы и изменяет высоту IFrame так, чтобы эти элементы оставались видимыми.

Как использовать?

  1. Разместите на своем сервере файл resizer.min.js

  2. В тег HEAD добавьте следующий код:

     <script type="text/javascript" src="resizer.min.js"></script>

После подключения файла resizer.min.js становится доступным глобальный объект Resizer, который имеет следующие методы:

  • Resizer.add(element[, extra]) - добавляет element в список отслеживаемых объектов. Возвращает объект Resizer. В качестве element может быть передан либо id элемента, либо сам элемент, либо массив элементов или их id. Параметр extra задает отступ от нижнего края элемента. Важно! На момент вызова этого метода добавляемые элементы должны существовать.

      <script type="text/javascript">
    // Примеры вызова метода Resizer.add
    Resizer.add(document.body);
    Resizer.add('content', 30);
    Resizer.add(document.getElementsByClassName('message_box'));
    Resizer.add(['tooltip1', 'tooltip2'], 10);
  </script>

  • Resizer.setInterval(interval) - устанавливает интервал между вызовами функции проверки изменения высоты в миллисекундах. Возвращает объект Resizer. По умолчанию интервал равен 100.

Для того, чтобы Resizer начал работу достаточно добавить хотя бы один элемент.

Обычно для приложения достаточно одного вызова Resizer.add после загрузки страницы:

<body onload="Resizer.add(document.body);">
  ...
</body>

Однако, если в приложении есть элементы с абсолютным позиционированием, которые могут выйти за границы body (выпадающие списки, окна, всплывающие подсказки, etc), их также необходимо добавить в список:

...
<div id="user_tooltip" style="position: absolute; left: 30px; top: 1150px;">Это Вы</div>
...
<script type="text/javascript">
  Resizer.add('user_tooltip', 20);
</script>