Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2010, 09:50
Интересующийся
Отправить личное сообщение для tolian_27 Посмотреть профиль Найти все сообщения от tolian_27
 
Регистрация: 24.10.2010
Сообщений: 16

Как можно реализовать следующую задачу с помощью 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>
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2010, 10:16
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

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

В любом случае проблема вроде решаема на чистом html+css.
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2010, 10:43
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 24.10.2010, 10:49
Интересующийся
Отправить личное сообщение для tolian_27 Посмотреть профиль Найти все сообщения от tolian_27
 
Регистрация: 24.10.2010
Сообщений: 16

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

Да нет на чистом html+css скорее всего не сделаешь, я не у одного человека уже интересовался (кто очень хорошо в верстке шарит), мне сказали что с низу только скриптами. (Слева и справа это работает без проблем на css+html, снизу - нет)
Ответить с цитированием
  #5 (permalink)  
Старый 24.10.2010, 11:01
Интересующийся
Отправить личное сообщение для tolian_27 Посмотреть профиль Найти все сообщения от tolian_27
 
Регистрация: 24.10.2010
Сообщений: 16

monolithed, Дружище, объясни пожалуйста что означает строчка -
window.onload = function(){
     document.getElementById('bottom').style.display = (window.screen.height > 200) ? 'block' : 'none';
};
Ответить с цитированием
  #6 (permalink)  
Старый 24.10.2010, 11:21
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от 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

Последний раз редактировалось monolithed, 24.10.2010 в 11:30.
Ответить с цитированием
  #7 (permalink)  
Старый 24.10.2010, 11:29
Интересующийся
Отправить личное сообщение для tolian_27 Посмотреть профиль Найти все сообщения от tolian_27
 
Регистрация: 24.10.2010
Сообщений: 16

Блин я чо то делаю не так или фиг знает, - у меня не работает(( т.е. всмысли нижний блок все равно отображается
Ответить с цитированием
  #8 (permalink)  
Старый 24.10.2010, 11:45
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

<!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>
Ответить с цитированием
  #9 (permalink)  
Старый 24.10.2010, 12:50
Интересующийся
Отправить личное сообщение для tolian_27 Посмотреть профиль Найти все сообщения от tolian_27
 
Регистрация: 24.10.2010
Сообщений: 16

Спасибо! + в репу
Правда строку (почему то он ее не понимает)
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 другую переменную? или вообще что-то нето(((
Ответить с цитированием
  #10 (permalink)  
Старый 25.10.2010, 00:26
Интересующийся
Отправить личное сообщение для tolian_27 Посмотреть профиль Найти все сообщения от tolian_27
 
Регистрация: 24.10.2010
Сообщений: 16

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

Последний раз редактировалось tolian_27, 25.10.2010 в 08:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить имя компа через JavaScript? Бурундук Общие вопросы Javascript 3 19.09.2009 16:44
Как реализовать? Fliand Элементы интерфейса 4 22.08.2009 19:47
Можно ли с помощью javascript создать онлайн(ролевую) игру? eXiN Общие вопросы Javascript 7 23.06.2009 20:57
как можно дебажить JavaScript кроме Firebug? subaru Общие вопросы Javascript 4 02.07.2008 11:16
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 20:43