вкл/откл блока в зависимости от размера отображаемой области

arthur1974 · April 11, 2012

Помогите пожалуйста реализовать включение-отключение блока (текст + картинки) в зависимости от размера отображаемой области страницы. Т.е. если страница меньше определённого размера, что бы часть информации (я условно называю это как блок) исчезала, а находящийся под ним блок занимал его место (т.е. смещался вверх). Объясню детальнее: на странице идёт символ и почтовый адрес, ниже - символ и расписание работы, ещё ниже - символ и телефоны. Вот мне нужно, что бы при уменьшении размера интернет-проводника (или если у клиента недостаточное разрешение экрана) нужно, что бы отключался блок с почтовым адресом, а вверх смещались режим работы, телефоны. При ещё уменьшении размера проводника, что бы отключался и блок с режимом работы.

Что бы не включался скрол и что бы не залазили текст и картинки вниз за отображаемую область, а просто культурно отключались.

Как такое реализовать?

hedgehog · April 11, 2012

JavaScript или MediaQueries

arthur1974 · April 11, 2012

JavaScript или MediaQueries

т.е.?

Я только начинающий - не знаю как это реализовать можно. Поэтому и обратился за помощью сюда на сайт к специалистам

Vin · April 11, 2012

http://htmlbook.ru/css/media

Как видите, Android и iOS (именно для них чаще всего подобное и нужно) поддерживают, а вот IE вплоть до 9-й версии — нет. Если нужно кроссбраузерно для ПК, нужен JS.

Вот простейший пример, как это примерно делается с помощью js.

Edited April 11, 2012 by Vin

arthur1974 · April 11, 2012

http://htmlbook.ru/css/media
Как видите, Android и iOS (именно для них чаще всего подобное и нужно) поддерживают, а вот IE вплоть до 9-й версии — нет. Если нужно кроссбраузерно для ПК, нужен JS.
Вот простейший пример, как это примерно делается с помощью js.

Спасибо. Вот попытался воспользоваться Вашим примером. Воткнул нужный мне кусок внутрь <div class="adr_block">... </div> но почему-то не работает:

function height_adr() {

if ( $(window).height() > 600)

return 300

else return 0

}

</script>

.adr_block {

width: 200px;

background: #b3c2d1;

height: height_adr;

}

</style>

Подскажите, пожалуйста, что я не правильно сделал?

Vin · April 11, 2012

Сразу скажу, что я сам пока не мастер в скриптописании, но сразу могу сказать, что подобную конструкцию

<script language=JavaScript>

следует заменить на такую

<script type="text/javascript">
...
</script>

Синатаксис скрипта использует библиотеку jquery. Она подключена?

Про остальное позже скажу, может даже скриптик сделаю рабочий, когда домой приду, если меня не опередят

Edited April 11, 2012 by Vin

CalvinKlein · April 11, 2012

по-моему вариант с media лучше всего

да и юзать целую библиотеку jQuery ради такой мелочи как минимум странно

Vin · April 11, 2012

Просто примеры используют jquery, можно и без неё. Впрочем, вот здесь http://habrahabr.ru/post/119127/ решение, необходимость в в велосипедах отпадает.

arthur1974 · April 12, 2012

Сразу скажу, что я сам пока не мастер в скриптописании, но сразу могу сказать, что подобную конструкцию
<script language=JavaScript>
следует заменить на такую
<script type="text/javascript">
...
</script>
Синатаксис скрипта использует библиотеку jquery. Она подключена?
Про остальное позже скажу, может даже скриптик сделаю рабочий, когда домой приду, если меня не опередят

Подправил текст с учётом Ваших подсказок:

function height_adr() {

if ( $(window).height() > 700)

return 300

else return 0

}

</script>

.adr_block {

width: 200px;

background: #b3c2d1;

height: height_adr;

}

</style>

</head>

<body>

...

<p><img border="0" src="pics/s_mail2.png" width="24" height="24" align="left" hspace="3"></p> <font color="#FFFFFF">Адреса:</font>

<br>

<font color="#8CB2FE">ХХХХХХХХХХ ХХХХХХХХХХХХХ ХХХХХХХХ </font>

<br>

</div>

...

НО!:

в описании стилей

height: height_adr;

1. функция почему-то либо не вызывается, либо не возвращает значения.

2. когда прописываю значение руками, то следующие <div> блоки за <div class="adr_block"> почему-то налазят на него (текст и картинки налазят сверху), но в нём информация тоже остаётся на экране. Т.е. в описании стиля ставлю height: = 0px и фон убирается, а картинка и текст остаются (на которые и налазит следующий блок <div> )

Что я делаю не правильно?

hedgehog · April 12, 2012

if ( $(window).height() > 700)
 return 300
 else return 0
 }

еще бы...

if(условие){
  выражение
}else{
  выражение
}

arthur1974 · April 12, 2012

if ( $(window).height() > 700)
 return 300
 else return 0
 }

еще бы...

if(условие){
  выражение
}else{
  выражение
}

так ведь если одна команда, то её ж можно не заключать в {}

но вот исправил на:

function height_adr() {

if ( $(window).height() > 800) {return 300} else {return 0}

}

ничегошеньки не изменилось

вообще, на сколько я заметил, форматирование блока <div> и ячейки <table> т.е. уменьшение их высоты хоть до "0" не делает его меньше по высоте, чем текст внутри его. А мне надо блоки отключать совсем (или уменьшать их высоту до "0").

То каким другим способом можно уменьшить высоту до "0" или убрать часть данных на станице динамически?

Неужели только разбираться с Media Queries и других более простых и понятным способов новичку нет???

Great Rash · April 12, 2012

А с чего вы взяли, что height_adr, просто подставленный в CSS будет работать? Да и jQuery вам тут не нужен совсем.


<script type="text/javascript">
  function setHeight() {
    var div = document.getElementById('adrBlock');
    div.style.height = (document.body.offsetHeight > 800 ? 300 : 0) + 'px';
  }

  window.onload = function() {
    setHeight();
  }

  window.onresize = function() {
    setHeight();
  }
</script>


<div class="adr_block" id="adrBlock"> 
  <p>
     <img border="0" src="pics/s_mail2.png" width="24" height="24" align="left" hspace="3">
  </p>
  <p>
     <font color="#FFFFFF">Адреса:</font>
  </p>
  <p>
    <font color="#8CB2FE">ХХХХХХХХХХ ХХХХХХХХХХХХХ ХХХХХХХХ</font>
  </p>
</div>

UPD: И вообще, наверное лучше не менять высоту блока, а менять его видимость (display: none/block)

arthur1974 · April 12, 2012

А с чего вы взяли, что height_adr, просто подставленный в CSS будет работать? Да и jQuery вам тут не нужен совсем.
<script type="text/javascript">
  function setHeight() {
    var div = document.getElementById('adrBlock');
    div.style.height = (document.body.offsetHeight > 800 ? 300 : 0) + 'px';
  }

  window.onload = function() {
    setHeight();
  }

  window.onresize = function() {
    setHeight();
  }
</script>
<div class="adr_block" id="adrBlock"> 
  <p>
     <img border="0" src="pics/s_mail2.png" width="24" height="24" align="left" hspace="3">
  </p>
  <p>
     <font color="#FFFFFF">Адреса:</font>
  </p>
  <p>
    <font color="#8CB2FE">ХХХХХХХХХХ ХХХХХХХХХХХХХ ХХХХХХХХ</font>
  </p>
</div>
UPD: И вообще, наверное лучше не менять высоту блока, а менять его видимость (display: none/block)

УРА!!!!!

С Вашей подсказкой получилось вот так:

function setHeight() {

var div = document.getElementById('adrBlock');

div.style.display = (document.documentElement.clientHeight > 500 ? "" : "none");

}

window.onload = function() {

setHeight();

}

window.onresize = function() {

setHeight();

}

Sign In

вкл/откл блока в зависимости от размера отображаемой области

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information