Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как можно реализовать следующую задачу с помощью JavaScript? (https://javascript.ru/forum/misc/12577-kak-mozhno-realizovat-sleduyushhuyu-zadachu-s-pomoshhyu-javascript.html)

tolian_27 24.10.2010 09:50
Как можно реализовать следующую задачу с помощью JavaScript?
 
Добрый день. Есть следующая задача; верстка страницы приведена ниже.
Необходимо чтобы нижний блок (block_bottom) был виден только в том случае если высота окна браузера больше высоты главного контейнера ".main", в ином случае этот блок не виден (для примера вставил block_right - блок справа он работает так как и нужно). Каким образом можно сделать это через JavaScript? Заранее благодарю.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
       
        .wrapper {
                        height: auto;
            overflow: hidden;
            padding-bottom: 50px;
                        position: absolute; left: 0; top: 0; bottom: auto; right: 0;
        }
       
        .main {
            position: relative;
            width: 980px;
            height: 900px;
            margin: 0 auto;
            padding: 10px;
            background: gray;
        }
       
        .block_right {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 0;
            right: -100px;
        }

        .block_bottom {                       
            width: 200px;
            height: 100px;
                        margin-left: -100px;
            background: red;
                        position: absolute;
                        bottom: -100px;
                        left: 50%;
        }
               
    </style>
</head>

<body>
   
    <div class="wrapper">
        <div class="main">
                        <div class="block block_right"></div>     
                        <div class="block block_bottom"></div> 
            <p>
                text text text
            </p>
        </div>
    </div>
   
</body>
</html>

Aetae 24.10.2010 10:16
Не что конца понятно, что должно происходить с block_bottom если высота окна браузера больше main но промежуток между main и низом меньше block_bottom: видна частично нижняя часть, видна частино верхняя часть, не виден пока не будет достаточно места, виден сразу весь внахлёст на main?

В любом случае проблема вроде решаема на чистом html+css.

monolithed 24.10.2010 10:43 
<style type="text/css">

#main {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 200px;
}
       
#bottom {    
    background: red;
    margin-top: 100px;
    width: 100px;
    height: 100px;
}
</style>

<div id="main">
     <div id="bottom"></div>      
</div>  

<script type="text/javascript">
window.onload = function(){
     document.getElementById('bottom').style.display = (window.screen.height > 200) ? 'block' : 'none';
};
</script>

tolian_27 24.10.2010 10:49
В этом случае должна быть видна только (верхняя) часть блока block_bottom. (т.е. та которая "показалась" в окне браузера). Если все равно несовсем понятно могу зарисовать.

Да нет на чистом html+css скорее всего не сделаешь, я не у одного человека уже интересовался (кто очень хорошо в верстке шарит), мне сказали что с низу только скриптами. (Слева и справа это работает без проблем на css+html, снизу - нет)

tolian_27 24.10.2010 11:01
monolithed, Дружище, объясни пожалуйста что означает строчка -
window.onload = function(){
     document.getElementById('bottom').style.display = (window.screen.height > 200) ? 'block' : 'none';
};

monolithed 24.10.2010 11:21
Цитата:
Сообщение от tolian_27
monolithed, Дружище, объясни пожалуйста что означает строчка -
 

window.onload = function(){ //если JS код расположен после html кода
     document.getElementById('bottom').style.display = (window.screen.height > 200) ? 'block' : 'none'; //если высота экрана больше 200px (соответствует #main), то блок #bottom - показывается, если меньше то скрывается
};


в твоем случае нужно заменить class="block block_bottom" и ,block block_bottom на id="block_bottom" и #block_bottom и высоту указать равную 900

tolian_27 24.10.2010 11:29
Блин я чо то делаю не так или фиг знает, - у меня не работает(( т.е. всмысли нижний блок все равно отображается

monolithed 24.10.2010 11:45 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrapper {
            height: auto;
            overflow: hidden;
            padding-bottom: 50px;
            position: absolute; left: 0; top: 0; bottom: auto; right: 0;
        }
        
        #main {
            position: relative;
            width: 980px;
            height: 900px;
            margin: 0 auto;
            padding: 10px;
            background: gray;
        }
        
        .block_right {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 0;
            right: -100px;
        }

        #block_bottom {             
            width: 200px;
            height: 100px;
            margin-left: -100px;
            background: red;
            position: absolute;
            bottom: -100px;
            left: 50%;
        }
        
    </style>
</head>

<body>
    
    <div class="wrapper">
        <div id="main">
            <div class="block_right"></div>      
            <div id="block_bottom"></div>  
            <p>
                text text text
            </p>
        </div>
    </div>
    
<script type="text/javascript">
window.onload = function(){
   var block_bottom = document.getElementById('block_bottom');
   var main = document.getElementById('main');
   block_bottom.style.display = (window.screen.height > main.offsetHeigh) ? 'block' : 'none';
};
   
</script>
</body>
</html>

tolian_27 24.10.2010 12:50
Спасибо! + в репу
Правда строку (почему то он ее не понимает)
block_bottom.style.display = (window.screen.height > main.offsetHeigh) ? 'block' : 'none'
я заменил на
if(main.offsetHeight < window.screen.height) block_bottom.style.display ='block'
else block_bottom.style.display ='none'; - все как надо работает.

Блин все ничего - вот только при масштабировании не работает - если уменьшить масштаб - блок все равно не появляется. Надо наверно заместо window.screen.height другую переменную? или вообще что-то нето(((

tolian_27 25.10.2010 00:26
Цитата:
Сообщение от tolian_27 (Сообщение 75662)
Блин все ничего - вот только при масштабировании не работает - если уменьшить масштаб - блок все равно не появляется. Надо наверно заместо window.screen.height другую переменную? или вообще что-то нето(((
monolithed, - не знаешь как можно обойти это?, (хотя бы просто на мысль навести)


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