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 только к опере, но это уже как-нибудь без меня.
Всем приятного коддинга!
|
Roksa kórnik
Roksa walcz
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.