ФорумПрограммированиеJavaScript → Как определить середину экрана с учётом скрола?

Как определить середину экрана с учётом скрола?

  • Z-MODe

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 5 декабря 2008 г. 13:28

    Цель вообщем типа как у lightbox выводить на центр экрана по высоте и ширине(именно экрана, а не сайта) див с изображением внутри и кнопочкой закрыть.

    Так вот как узнать на сколько сайт вниз прокручен и прокручен ли вообще?
    Или использовать position:fixed?
    И второй вопрос как запретить скролинг, когда я этот див выведу?
  • adw0rd

    Сообщения: 22900 Репутация: N Группа: в ухо

    Spritz 6 декабря 2008 г. 1:08, спустя 11 часов 39 минут 14 секунд

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


    JavaScript'ом…
    если это jQuery, то наверное $('#id').width() и $('#id').height() или $('#id').css('width') и $('#id').css('height') соответственно…

    Или использовать position:fixed?


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


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


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

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 6 декабря 2008 г. 15:38, спустя 14 часов 30 минут 31 секунду

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

    или я туплю про абсолют??
  • phpdude

    Сообщения: 26611 Репутация: N Группа: в ухо

    Spritz 6 декабря 2008 г. 20:57, спустя 5 часов 18 минут 58 секунд

    document.scrollTop & scrollLeft

    попробуй :)
    Сапожник без сапог
  • riddler

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 5 января 2009 г. 12:14, спустя 29 дней 15 часов 17 минут

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


    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

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 8 апреля 2010 г. 19:07, спустя 458 дней 5 часов 53 минуты

    А теперь сложим воедино полученные знания и таким вот образом можно вывести окно посередине экрана с произвольным содержимым (на выбор 2 варианта содержимого), даже с учётом прокрутки.

    <html>

    <head>
    <title></title>
    </head>

    <script>
    function getClientWidth() {
    return document.compatMode==&#39;CSS1Compat&#39; &amp;&amp; !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
    }

    function getClientHeight() {
    return document.compatMode==&#39;CSS1Compat&#39; &amp;&amp; !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
    }

    function getScrollY()
    {
    scrollY = 0;
    if (typeof window.pageYOffset == &quot;number&quot;) {
    scrollY = window.pageYOffset;
    } else if (document.documentElement &amp;&amp; document.documentElement.scrollTop) {
    scrollY = document.documentElement.scrollTop;
    } else if (document.body &amp;&amp; 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=&#39;&#39;;
    obj1.style.top=Math.round((getClientHeight()-obj3.clientHeight)/2)+getScrollY()+&#39;px&#39;;
    obj1.style.left=Math.round((getClientWidth()-obj3.clientWidth)/2)+&#39;px&#39;;
    }
    </script>
    <body>

    <div id=&quot;subis&quot; style=&quot;position: absolute; display: none;&quot;>
    <table border=0 id=&quot;subt&quot; width=&quot;550px&quot;><tr><td align=right>
    <div style=&quot;border: 1px solid black; width: 100px; text-align: center; overflow:auto; border-style: solid; opacity:1; filter:alpha(opacity=100); background: #ffff99;&quot;><a href=&quot;#&quot; onclick=&quot;document.getElementById(&#39;subis&#39;).style.display = &#39;none&#39;&quot;>
    Закрыть</a><div><tr><td>
    <div id=&quot;subsi&quot; style=&quot;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;&quot;>
    <div></table></div>

    <table>
    <tr><td onmouseover=&quot;swsubis(document.getElementById(&#39;subis&#39;),document.getElementById(&#39;subsi&#39;),document.getElementById(&#39;subt&#39;),&#39;BlaBla&#39;);&quot;>Показать
    <td onmouseover=&quot;swsubis(document.getElementById(&#39;subis&#39;),document.getElementById(&#39;subsi&#39;),document.getElementById(&#39;subt&#39;),&#39;FFFFFFFFFFFFFFFFFFFFFFFFFFFF&#39;);&quot;>Показать
    </table>

    </body>

    </html>
  • 8 апреля 2017 г. 19:37, спустя 2557 дней 30 минут

    Пользователь был удалён, сообщения недоступны


Пожалуйста, авторизуйтесь, чтобы написать комментарий!