Веб-дайджест

14 11.10
4
  • Понятие потока
    В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком»…
  • Кросс-браузерный @font-face
    Статья о свойстве CSS @font-face, с помощью которого легче и удобнее всего использовать произвольный шрифт на сайте.
  • Веб в кривых. Второе рождение SVG
    Видео-запись доклада «Веб в кривых. Второе рождение SVG», прозвучавшего в Самаре на 404 фестивале
  • Какой расклад?
    Статья о самых распространенных вопросах, сомнениях и критике по поводу необходимости создания и внедрения новых механизмов раскладки.

CSS табы

19 09.10
33

Обнаружил в интернете очень простой способ создания табов без использования JS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<ul class="tabs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
</ul>
<div class="tabs-content">
    <ul>
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three">3</li>
        <li id="four">4</li>
        <li id="five">5</li>
    </ul>
</div>

Разметка простая. Список .tabs используется для навигации. Далее идет контейнер .tabs-content со списком, в котором каждый элемент li это отдельный слайд.

1
2
3
4
5
6
7
8
9

.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content li {
    width:960px;
    height:300px;
}

Ссылки в навигации указывают на соответствующие id слайдов. Слайдам установлена ширина и высота равные внешнему контейнеру.

Работает в Firefox, Opera (для старых версий нужно немного дополнить CSS), Safari, IE6+.

Теги: •

Делаем горизонтальный скроллбар

05 08.10
26

После публикации статьи «Делаем вертикальный скроллбар» многие спрашивали по поводу аналогичного, но горизонтального варианта. В этой статье рассмотрим пример создания простой горизонтальной полосы прокрутки.

Для создания будет использоваться jQuery плагин jScrollHorizontalPane.

Контент, который будет скроллиться, нужно обернуть в блок. В данном случае #scroll-box.

1
2
3

<div id="scroll-box">
    <!-- Контент -->
</div>

Подключаем CSS файл плагина jScrollHorizontalPane.css, и пишем следующие стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#scroll-box{
    width:300px;
    height:150px;
    overflow:hidden;
    float:left;
}
#scroll-box p{
    width:1000px;
}
a.jScrollArrowLeft{
    height:20px;
}
a.jScrollArrowRight{
    height:20px;
}

У контента ширина должна быть больше, чем у внешнего блока.

Подключаем скрипты:

1
2
3

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.min.js"></script>
1
2
3
4
5
6
7
8

$(function(){
    $('#scroll-box').jScrollHorizontalPane({
        showArrows:true,
        arrowSize:20,
        scrollbarHeight:20,
        scrollbarMargin:0
    });
});

Здесь используются следующие параметры:

  • showArrows — отвечает за отображение кнопок «Назад» «Вперёд» на полосе прокрутки
  • arrowSize — ширина этих кнопок в px (если не указана здесь, должна быть установлена в CSS)
  • scrollbarHeight — высота полосы прокрутки в px
  • scrollbarMargin — отступ справа от полосы прокрутки
Теги: • • •