ecolora

Статус
  • Активный

Последние сообщения ecolora

  • JavaScriptКак определить середину экрана с учётом скрола? • 9 апреля 2010 г. 6:07

    А теперь сложим воедино полученные знания и таким вот образом можно вывести окно посередине экрана с произвольным содержимым (на выбор 2 варианта содержимого), даже с учётом прокрутки.<html><head> <title></title></head><script>function getClientWidth() { retu...
    А теперь сложим воедино полученные знания и таким вот образом можно вывести окно посередине экрана с произвольным содержимым (на выбор 2 варианта содержимого), даже с учётом прокрутки.

    <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>