This Might Be Useful
« Valid XHTML Flash SWF Objects embedding (updated)
Устранение проблемы с переименованием папок в Windows Vista »

Показываем блок по центру страницы

При создании web-страниц с завидной регулярностью возникает необходимость динамически позиционировать блоки. Для этого бывает нужно узнать ширину и высоту видимой части страницы и уточнить, насколько страница прокручена вниз и вбок. Причем делать это надо так, чтобы работало везде. Приведенный ниже код располагает блок по центру страницы. Таким образом, совершается максимум действий. Так что код этот можно с успехом использовать как целиком, так и по частям.

Блок у нас будет примерно такой:

PLAIN TEXT
HTML:
  1. <div id="some_center_block"></div>

Для него делаем небольшой CSS:

PLAIN TEXT
CSS:
  1. #some_center_block {
  2.   border: 1px solid #555555;
  3.   padding: 3px;
  4.   z-index: 1000;
  5.   position: absolute;
  6.   display: none;
  7.   background-color: #ffffff;
  8.   cursor: pointer;
  9. }

И теперь немного JavaScript'а:

PLAIN TEXT
JAVASCRIPT:
  1. function toggle_center_block(block_id, w, h) {
  2.   f = document.getElementById(block_id);
  3.  
  4.   if (f.style.display == "block") {
  5.     f.style.display = "none";
  6.   } // прячем блок
  7.   else {
  8.     // Для начала узнаем размеры видимой области страницы
  9.     var myWidth = 0, myHeight = 0;
  10.     if (typeof(window.innerWidth) == 'number') {
  11.       // для всего кроме MSIE
  12.       myWidth = window.innerWidth;
  13.       myHeight = window.innerHeight;
  14.     } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
  15.       // IE6+
  16.       myWidth = document.documentElement.clientWidth;
  17.       myHeight = document.documentElement.clientHeight;
  18.     } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
  19.       // IE4
  20.       myWidth = document.body.clientWidth;
  21.       myHeight = document.body.clientHeight;
  22.     }
  23.  
  24.     // Теперь уточняем, насколько страница прокручена вниз и вбок
  25.     var scrOfX = 0, scrOfY = 0;
  26.     if(typeof(window.pageYOffset) == 'number') {
  27.       // Netscape и его родственники
  28.       scrOfY = window.pageYOffset;
  29.       scrOfX = window.pageXOffset;
  30.     } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
  31.       // DOM
  32.       scrOfY = document.body.scrollTop;
  33.       scrOfX = document.body.scrollLeft;
  34.     } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
  35.     // IE6
  36.     scrOfY = document.documentElement.scrollTop;
  37.     scrOfX = document.documentElement.scrollLeft;
  38.   }
  39.  
  40.     // А теперь позиционируем наш блок
  41.     f.style.top = String(Math.round((myHeight - h) / 2) + scrOfY) + 'px';
  42.     f.style.left = String(Math.round((myWidth - w) / 2) + scrOfX) + 'px';
  43.     f.style.width = w + ((3 + 1) * 2);
  44.     f.style.height = h + ((3 + 1) * 2);
  45.     f.style.display = "block";
  46.   } // показываем блок
  47. } // toggle_center_block

Вызывать это дело мы будет при каком-либо событии как-то так:

PLAIN TEXT
JAVASCRIPT:
  1. toggle_center_block("some_center_block", 200, 100);

- Дата публикации: Tuesday, October 9th, 2007, 13:06
- Автор: Filosoff
- Разделы: CSS, HTML, JavaScript
- Лента коментариев: RSS 2.0

- Схожие по тематике заметки:

· Page break в HTML-документе
· Как качать с Rutube
· Отключаем нежелательные HTML-элементы с помощью CSS
· Улучшаем семантику ссылок
· Bookmarklets: from Simple Ones to Real Hardcore

- Коментировать
- Trackback

6 Responses to “Показываем блок по центру страницы”


  1. Hairgel_Addict Says:
    October 9th, 2007 at 13:44 Quote

    Можно проще сделать при помощи CSS-а :)

    добавить к имеющемуся CSS-у:

    top: 50%;
    left: 50%;

    А блок вставлять следующим образом:

    <div id="some_center_block" style="width: 200px; height: 50px; margin: -25px 0 0 -100px;">bla bla bla</div>

    В margin минус половина высоты и ширины блока соответственно ;)

  2. d4n Says:
    October 28th, 2007 at 20:15 Quote

    Hairgel_Addict - rulez!
    А то у Философа реально большой код.

  3. Filosoff Says:
    October 29th, 2007 at 07:11 Quote

    d4n @ 28.10.2007, 20:15 #

    Hairgel_Addict - rulez!
    А то у Философа реально большой код.

    так это для разных случаев :)

  4. Hairgel_Addict Says:
    October 29th, 2007 at 12:51 Quote

    Filosoff @ 29.10.2007, 07:11 #

    так это для разных случаев

    для каких таких "разных"? о_О

  5. Filosoff Says:
    October 29th, 2007 at 12:59 Quote

    Hairgel_Addict @ 29.10.2007, 12:51 #

    для каких таких "разных"? о_О

    мой код используется для показа во свплывающих div'ах картинок в галерее. размеры картинок могут быть разные.

  6. Hairgel_Addict Says:
    October 29th, 2007 at 13:20 Quote

    ну дык ты ж при вызове функции все равно указываешь размеры. что мешает указывать и половинные значиния для минусовых margin-ов? они ж в style="" прописаны, как размеры блока, так и margin.. можно даже для "красоты" кода функцию использовать для вычесления половин размеров :)

Leave a Reply

code