Javascript.RU

jquery и прокрутка в табах

Столкнулся недавно с одной проблемкой. Надо было сделать jquery табы, по высоте 100% пользовательского окна, и чтобы при переполнении таба текстом появлялась вертикальная прокрутка.
Вроде ничего сложного, но я весь день курил форумы, пока не нашел сам решение. Оказывается, если задать высоту в процентах, то прокрутка никогда не появится, не помогут никакие

<div overflow="auto"></div>

и т.д. Правда, если в overflow поиграть, то красно-лис и хром отображают все как надо, но опера начинает свою музыку...
И так, решение. Лучше всего, высоту задавать статичным числом.
Для этого нам потребуется вычислить высоту клиентской области, с помощью

$(window).height()

И этим значение задаем высоту таба. Должно выйти что-нить типа этого

<div id="main-tabs" class="tabs-main" style="height:100%; padding:0;">
	<ul class="tabs-main-menu">
		<li><a href="#main">Главная</a></li>
		<li><a href="#blogs">Блоги</a></li>
..............................
..............................
	</ul>
	<div id="main" class="tab-main" style="overflow: auto;">
		<script type="text/javascript">
		$("div.tab-main").innerHeight($(window).height()-$("ul.tabs-main-menu").height()-60);
		</script>

		</div>
..........................
..........................
</div>

Именно в строке

<script type="text/javascript">
		$("div.tab-main").innerHeight($(window).height()-$("ul.tabs-main-menu").height()-60);
		</script>

Мы и задавали высоту нашего таба. Но в этом примере этот скрипт находится прямо внутри таба, что дает нам результат только при открытии, или обновлении страницы. Если менять размер окна браузера, то меняться высота таба не будет. Для этого кидаем эту строчку в какой-нить обработчик OnResize нашего документа и все работает.
Кстати

$("ul.tabs-main-menu").height()"

Это высота поля меню, с названиями таба.
-60 - это число я взял методом подбора, чтобы во всех браузерах отображалось нормально. Без него хром и огнелис отображают как надо, а вот опера на 60 пикселей слазит вниз.
Можно, конечно, делать проверку браузера и применять -60 только к опере, но это уже как-нибудь без меня.
Всем приятного коддинга!

+2

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 02:11
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:28
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
2 + 10 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
Больше записей нет. Прокомментируйте эту запись - может быть, тогда он что-нибудь еще хорошее напишет ;)
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum