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

 
Поиск по сайту
Другие записи этого автора
Больше записей нет. Прокомментируйте эту запись - может быть, тогда он что-нибудь еще хорошее напишет ;)
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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