Здесь курят мануал.

Добро пожаловать на Пыху!

Логин:
Пароль:
 

Нет прописки? Зарегистрируйся!

Новости

Пыха переехала на новый сервер, ура!

Краснодарское время: 23 Май, 2012, 12:33:46

Страниц: [1]
Печать
Автор Тема: Как определить середину экрана с учётом скрола?  (Прочитано 3640 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Z-MODe    ↓ 
06 Декабрь, 2008, 12:28:47
НЕ ХУЕТА! ХУЕТА!


Карма: 1
Сообщений: 201
Сила слова: 0.5

Цель вообщем типа как у lightbox выводить на центр экрана по высоте и ширине(именно экрана, а не сайта) див с изображением внутри и кнопочкой закрыть.
 
Так вот как узнать на сколько сайт вниз прокручен и прокручен ли вообще?
Или использовать position:fixed?
И второй вопрос как запретить скролинг, когда я этот див выведу?
Записан

Некоторые программисты на столько суровы, что сохраняют логи аськи на баше...
adw0rd    ↓ 
06 Декабрь, 2008, 12:08:01 , спустя 11 часов 39 минут 14 секунд
НЕ ХУЕТА! ХУЕТА!

эдво
Группа: в ухо

Карма: не нужна
Сообщений: 17615
Сила слова: 1.67

Z-MODe
Так вот как узнать на сколько сайт вниз прокручен и прокручен ли вообще?

JavaScript'ом...
если это jQuery, то наверное $('#id').width() и $('#id').height() или $('#id').css('width') и $('#id').css('height') соответственно...
 
Z-MODe
Или использовать position:fixed?

По своим свойствам это значение аналогично absolute, но в отличие от него привязывается к указанной атрибутами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данное значение.

тогда уж лучше absolute
 

Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
Записан

Python, Django, Git, Emacs, Nginx, MySQL, SphinxSearch, FreeBSD/Linux
Мой блог * Кинсбург * Либург * Я на GitHub
Z-MODe    ↓ 
07 Декабрь, 2008, 02:38:32 , спустя 14 часов 30 минут 31 секунду
НЕ ХУЕТА! ХУЕТА!


Карма: 1
Сообщений: 201
Сила слова: 0.5

брр... не понял.
Впринципе jquery подключать буду полюбому.. поэтому да лучше жквери.
$('#id').width() и $('#id').height() - если не ошибаюсь оно же мне высоту и ширину вернёт объекта с id="id" ?
а мну впринципе надо узнать высоту на которую сайт прокрутили...
Просто страница будет оочень высокая и поэтому надо на какую бы превьюшку юзер не тыкнул будь она в самом низу или в середине, фотка полноразмерная должа появится в аккуратно в середине экрана. Т.е. мне всегда надо знать сколько прокручено вниз ну, а дальше выводить див с абсолютным позиционирование прибавляя к top ту высоту на которую сайт вниз прокручен..
 
или я туплю про абсолют??
Записан

Некоторые программисты на столько суровы, что сохраняют логи аськи на баше...
phpdude    ↓ 
07 Декабрь, 2008, 07:57:30 , спустя 5 часов 18 минут 58 секунд
НЕ ХУЕТА! ХУЕТА!

я - ЭМО
Группа: в ухо

Карма: 344
Сообщений: д-о-х-у-я!
Сила слова: 1.66

document.scrollTop & scrollLeft
 
попробуй :)
Записан

забанен. могу забанить других, пишите в личку
BEER. Helping ugly people have sex since 1862.
riddler    ↓ 
05 Январь, 2009, 11:14:34 , спустя 29 дней 15 часов 17 минут 4 секунды
НЕ ХУЕТА! ХУЕТА!

Карма: 0
Сообщений: 1
Сила слова: 0

Вот две функции по этому случаю. Должны работать в разных браузерах: IE, Mozilla Firefox, Safari.
 
Text

function getScrollY()
{
    scrollY = 0;   
    if (typeof window.pageYOffset == "number") {
        scrollY = window.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
        scrollY = document.documentElement.scrollTop;
    }  else if (document.body && document.body.scrollTop) {
        scrollY = document.body.scrollTop;
    } else if (window.scrollY) {
        scrollY = window.scrollY;
    }
    return scrollY;
}
 
function getInnerHeight()
{
    height = 0;
    if (window.innerHeight) {
        height = window.innerHeight - 18;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        height = document.documentElement.clientHeight;
    } else if (document.body && document.body.clientHeight) {
        height = document.body.clientHeight;
    }
    return height;
}
 
Записан
ecolora    ↓ 
09 Апрель, 2010, 06:07:46 , спустя 458 дней 5 часов 53 минуты 12 секунд
НЕ ХУЕТА! ХУЕТА!

Карма: 0
Сообщений: 1
Сила слова: 0

А теперь сложим воедино полученные знания и таким вот образом можно вывести окно посередине экрана с произвольным содержимым (на выбор 2 варианта содержимого), даже с учётом прокрутки.
 
Text
<html>
 
<head>
  <title></title>
</head>
 
<script>
function getClientWidth() {
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}
 
function getClientHeight() {
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}
 
function getScrollY()
{
    scrollY = 0;   
    if (typeof window.pageYOffset == "number") {
        scrollY = window.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
        scrollY = document.documentElement.scrollTop;
    }  else if (document.body && document.body.scrollTop) {
        scrollY = document.body.scrollTop;
    } else if (window.scrollY) {
        scrollY = window.scrollY;
    }
    return scrollY;
}
 
function swsubis(obj1, obj2, obj3, txt) {
  obj2.innerHTML = txt;
  obj1.style.display='';
  obj1.style.top=Math.round((getClientHeight()-obj3.clientHeight)/2)+getScrollY()+'px';
  obj1.style.left=Math.round((getClientWidth()-obj3.clientWidth)/2)+'px';
}
</script>
<body>
 
<div id="subis" style="position: absolute; display: none;">
          <table border=0 id="subt" width="550px"><tr><td align=right>
          <div style="border: 1px solid black; width: 100px; text-align: center; overflow:auto; border-style: solid; opacity:1; filter:alpha(opacity=100); background: #ffff99;"><a href="#" onclick="document.getElementById('subis').style.display = 'none'">
          Закрыть</a><div><tr><td>
          <div id="subsi" style="border: 1px solid black; padding: 5 5 5 5; width: 100%; text-align: left; overflow:auto; border-style: solid; opacity:1; filter:alpha(opacity=100); background: #FFffCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;">
          <div></table></div>
 
<table>
<tr><td onmouseover="swsubis(document.getElementById('subis'),document.getElementById('subsi'),document.getElementById('subt'),'BlaBla');">Показать
<td onmouseover="swsubis(document.getElementById('subis'),document.getElementById('subsi'),document.getElementById('subt'),'FFFFFFFFFFFFFFFFFFFFFFFFFFFF');">Показать
</table>
 
</body>
 
</html>
Записан
Страниц: [1]
Печать
 

Перейти в:  

Этот топик скрыли: adw0rd, artoodetoo