При разработаке одного проекта возникла проблема позиционирования дива посередине страницы независимо от ширины дива и от того, есть ли скролл на странице.
Если страница влезается на экран — можна делать через сss (position:absolute; left i top), но и тут надо учитывать в каждом варианте ширину дива.
Если же на странице появляется скроллинг — тогда есть некоторые проблемы.
Так как последним временем (и в том проекте тоже) пользуюсь Javascript-фреймворком jQuery — решил оформить в виде плагина.
Так появился плагин positioning.
Плагин имеет 2 методы:
positioning(leftOffset, topOffset, scroll) — позиционирует элемент на странице
leftOffset — сдвиг по горизонтале
topOffset — сдвиг по вертикали
scroll — параметр, который задает позиционирование относительно «абсолютной» верхней левой точки браузера, или позицинирование относительно верхней левой точки уже проскролленной страницы.
Вызов centering() — позиционирует элемент точно по центру страницы.
Плагін тестировал в FF 3.0, IE6.0+, Safari 3.1, Opera 9.6
Пример можно посмотреть здесь
yablog.org.ua/jquery/index.html
Внизу страницы есть 3 кнопки — кликая на них можно посмотреть плагин в действии
Если страница влезается на экран — можна делать через сss (position:absolute; left i top), но и тут надо учитывать в каждом варианте ширину дива.
Если же на странице появляется скроллинг — тогда есть некоторые проблемы.
Так как последним временем (и в том проекте тоже) пользуюсь Javascript-фреймворком jQuery — решил оформить в виде плагина.
Так появился плагин positioning.
Плагин имеет 2 методы:
positioning(leftOffset, topOffset, scroll) — позиционирует элемент на странице
leftOffset — сдвиг по горизонтале
topOffset — сдвиг по вертикали
scroll — параметр, который задает позиционирование относительно «абсолютной» верхней левой точки браузера, или позицинирование относительно верхней левой точки уже проскролленной страницы.
Вызов centering() — позиционирует элемент точно по центру страницы.
Плагін тестировал в FF 3.0, IE6.0+, Safari 3.1, Opera 9.6
Пример можно посмотреть здесь
yablog.org.ua/jquery/index.html
Внизу страницы есть 3 кнопки — кликая на них можно посмотреть плагин в действии
