Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   div на все окно независимо от скроллинга (https://javascript.ru/forum/dom-window/7193-div-na-vse-okno-nezavisimo-ot-skrollinga.html)

Vladimir1980 20.01.2010 12:33

div на все окно независимо от скроллинга
 
Киньте в меня примером как сделать div на весь браузер.
У меня сейчас сделано так, но если проскролить окно вниз то этот див высоко остается.

#wait_div
{
position:absolute;
left:0px;
top:0px;
float:top;
z-index:80;
background-color: #E1E1E1;
height:100%;
width:100%;
-moz-opacity: 0.2; /* код для движков Mozilla */
opacity:.20; /*свойство из спецификации CSS3, которое поддерживается не всеми браузерами*/
filter: alpha(opacity=20); /* код для IE */
}

Подозреваю что этому диву надо скриптом при скроллинге топ менять.

Kolyaj 20.01.2010 12:43

Цитата:

Сообщение от Vladimir1980
Подозреваю что этому диву надо скриптом при скроллинге топ менять.

Лучше высоту/ширину дива сразу поставить равной высоте/ширине документа. А при ресайзе окна скрывать див, пересчитывать размеры документа и опять показывать.

Vladimir1980 20.01.2010 13:03

Ну а все же: как top скриптом менять при скроллинге?

Kolyaj 20.01.2010 13:11

el.style.top = '100px';

Nekromancer 20.01.2010 13:38

по идее див должен перекрывать весь документ, и скролл.. как вариант всё обернуть в один контейнер место боди, а в боди контейнер и этот див..
<body>
<div id="conteiner"></div>
<div id="wait_div"></div>
</body>


ну всё в принципе :)

Vladimir1980 20.01.2010 13:45

Цитата:

Сообщение от Nekromancer (Сообщение 41209)
по идее див должен перекрывать весь документ, и скролл.. как вариант всё обернуть в один контейнер место боди, а в боди контейнер и этот див..
<body>
<div id="conteiner"></div>
<div id="wait_div"></div>
</body>


ну всё в принципе :)

А если по центру экрана еще картинку "Ждите..." надо

Nekromancer 20.01.2010 13:56

#wait_div {background: url('loading.png') center center no-repeat;}

HelpeR 20.01.2010 21:37

if(!this.ie6 && window.innerWidth && window.innerHeight && window.screen && window.screen.width && window.screen.height) {
            winWidth  = parseInt(window.innerWidth);
	        winHeight = parseInt(window.innerHeight);
	  
	        maxWidth  = parseInt(window.screen.width);
	        maxHeight = parseInt(window.screen.height);
        }
        if(this.ie) {
            if(document.documentElement.clientWidth && document.documentElement.clientHeight && document.body && document.body.offsetWidth && document.body.offsetWidth) {
                winWidth    = parseInt(document.documentElement.clientWidth);
	            winHeight   = parseInt(document.documentElement.clientHeight); 
		
		        maxWidth    = parseInt(document.body.offsetWidth);
	            maxHeight   = parseInt(document.body.offsetHeight);
            }
        }
получаете полный размер документа (с учетом скроллинга)

subzey 21.01.2010 01:18

Для нормальных браузеров используем position: fixed.
Для остального, шестой версии, используем фикс: http://www.howtocreate.co.uk/fixedPosition.html

PeaceCoder 24.01.2010 02:25

Цитата:

Сообщение от subzey
Для нормальных браузеров используем position: fixed.
Для остального, шестой версии, используем фикс: http://www.howtocreate.co.uk/fixedPosition.html

Фишка fixed не в том чтобы элемент стоял на месте, его и через этот фикс да можно сделать, а в том что бы небыло полос прокрутки если элемент за пределами браузера.


Часовой пояс GMT +3, время: 19:40.