0

Есть страница с выводом данных из таблицы. Сделал кнопки перехода по страницам (в начало, назад, 1,2,3,4,5,6, вперед, в конец). Сделал так: выводятся кнопки перехода по страницам, ниже выведенные данные и ниже еще раз кнопки перехода по страницам. Если на странице мало данных (например на последней), то оба блока кнопок находятся почти вместе. Как сделать так, чтобы нижние кнопки появлялись только если высота блока больше 450px?

    Выглядит так:
    <div id="block">
      <div id="knopki"></div>
      <div id="data"></div>
      <div id="knopki"></div> <!-- Показывается только если id="block" выше 450px -->
    </div>

2 ответа 2

1

Может просто установить элементу <div id="data"></div> минимальную высоту?

#data {
   min-height: 450px;
}
1
  • Я думал про это, но мне все же нужно, чтобы кнопки появлялись при высоте больше 450px и исчезали при высоте меньше 450px
    – Ant1mas
    15 апр 2015 в 10:38
-1

Набросал простенький пример, функцию для проверки высоты блока нужно вызывать после загрузки контента на страницу, кнопку для растягивания сделал для наглядности. И не используйте на странице одинаковые id, например id="knopki", это не рекомендуется и вредно.

isShownButtons();

var changeBtn = document.getElementById('changeBtn');

function isShownButtons() {
  var blockHeight = document.getElementById('block').offsetHeight;
  if (blockHeight > 110) {
    document.getElementById("buttonsTwo").className = 'active';
  }
}

function changeBlockHeight() {
  document.getElementById('data').className = 'big';
  isShownButtons();
}
#data {
  height: 50px;
}
#data.big {
  height: 100px;
}
#buttonsTwo {
  display: none;
}
#buttonsTwo.active {
  display: block;
}
<div id="block">
  <div id="buttonsOne">
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div id="data">Информация</div>
  <div id="buttonsTwo">
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
</div>
<hr />
<button id="changeBtn" onclick="changeBlockHeight()">Растянуть блок</button>

2
  • id одинаковые 100% нельзя юзать, но вычислять высоту в рантайме чревато дёрганьем страницы, особенно будет заметно, если данные в #data грузятся динамически и нужно каждый раз вызывать эту функцию при нажатии на button, имхо) 15 апр 2015 в 13:54
  • высоту никто не собирается вычислять каждый раз нажимая на кнопку, кнопка была для примера, а если данные грузятся динамически, то функция добавляется в загрузчик данных и выполнится 1 раз, а именно когда высота блока превысит нужную. По поводу дёргаться, это совсем другая история, дёргаться оно может и при динамическом добавлении контента.
    – MasterAlex
    15 апр 2015 в 14:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.