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

05 08/10
24

После публикации статьи «jQuery: Настраиваем внешний вид скроллбара» многие спрашивали про аналогичный пример, но с горизонтальной полосой прокрутки. Собственно вот и он.

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

Контент, который будет «скроллиться», необходимо обернуть в блок:

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 — отступ справа от полосы прокрутки
Теги: • • •

jQuery: Сворачиваемые блоки

12 02/10
80

Небольшой пример демонстрирующий эффект сворачивания однотипных блоков (например постов в блоге или виджетов в сайдбаре) с помощью jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        <!-- Контент -->
    </div>
</div>
 
<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        <!-- Контент -->
    </div>
</div>
 
…

В данном примере присутствуют несколько постов. Сворачиваться будет их содержимое.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

.post {
    padding:10px 20px;
    position:relative;
    background:#eee;
    margin-bottom:20px
}
.inactive {
    color:#bbb
}
.post .title {
    position:relative;
    height:1%
}
.post .title h3 {
    font-size:1.4em
}
.post .title h3 a {
    text-decoration:none;
    color:#000
}
.inactive .title h3 a {
    color:#bbb
}
.post .title p {
    font-size:0.7em;
    font-style:italic;
    font-weight:bold;
    margin:0
}
.post .title span {
    position:absolute;
    right:0;
    top:30%;
    cursor:pointer;
    width:14px;
    height:14px;
    background:url(trigger.gif) no-repeat left bottom;
    display:block;
    font-size:0
}
#content .inactive .title span {
    background-position:left top
}
#content .post .entry {
    padding:10px 0
}

Span служит кнопкой для сворачивания и разворачивания блоков и добавляется с помощью js. Поэтому пользователи с отключенным js его не увидят.

1
2
3
4
5
6
7
8
9

$('.title').append('<span></span>');
$('.post span').each(function() {
   var trigger = $(this), state = false, el = trigger.parent().next('.entry');
   trigger.click(function(){
      state = !state;
      el.slideToggle();
      trigger.parent().parent().toggleClass('inactive');
   });
});
Теги:

DD_belatedPNG – фикс PNG24 в IE6

24 08/09
52

DD_belatedPNG – еще один способ решения проблем с полупрозрачными PNG в IE6.

В DD_belatedPNG позволяет использовать background-position, background-repeat и :hover. Ссылки и элементы форм в блоке с полупрозрачным фоном остаются кликабельны.

Использовать скрипт очень просто:

  • Скачайте js файл.
  • Подключите его к странице.
  • Укажите какие элементы необходимо исправить. 
1
2
3
4
5
6

<!--[if IE 6]>
  <script src="DD_belatedPNG.js" type="text/javascript"></script>
  <script type="text/javascript">
    DD_belatedPNG.fix('.png-elem');
  </script>
<![endif]-->
Теги: •

Альтернативные картинки для отсутствующих изображений

06 04/09
32

Отсутствующие изображения на вашем сайте могут показать вас или то, что вы предлагаете не с лучшей стороны. Со временем изображения по тем или иным причинам могут быть удалены без вашего ведома. В этом случае браузеры предлагают посетителю альтернативный контент. К несчастью у каждого браузера своё видение того, как этот контент представить и не всегда это выглядит лучшим образом.

Альтернативный контент для изображений

В качестве альтернативного решения можно использовать jQuery и специально подготовленное изображение, которое будет отображаться вместо отсутствующих картинок.

Альтернативное изображение

Создайте изображение, подключите фреймворк и добавьте следующий javascript код:

1
2
3
4
5
6
7
8

$(document).ready(function() {
    $('img').error(function() {
        $(this).attr({
        src: 'missing.png',
        style:'border:3px solid #999;width:144px;height:144px;'
        });
    });
});

Оригинал: Use Custom Missing Image Graphics Using jQuery

Теги:

jQuery: слайдшоу с помощью Cycle Plugin

21 11/08
13

Сегодня поговорим о том, как, используя библиотеку jQuery и плагин Cycle Plugin, создать небольшое слайдшоу из обычного содержимого страницы. Это могут быть новости, изображения, различные виджеты и т.п. Это значительно экономит место на странице и может пригодится в определённых случаях. (далее…)

Теги: •