Алексей Ильин » Javascript

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

Alex — Thu, 05 Aug 2010 15:06:20 +0000

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

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

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

1
2
3

<div id="scroll-box">
    
</div>

Подключаем CSS файл плагина jScrollHorizontalPane.css, и пишем необходимые для работы и оформления стили:

#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>

И активируем прокрутку у нужного элемента:

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

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

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

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

Alex — Fri, 12 Feb 2010 13:13:41 +0000

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

<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>
 
…

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

.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 его не увидят.

$('.title').append('');
$('.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

Alex — Mon, 24 Aug 2009 15:19:05 +0000

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

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

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

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

Демо

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

Alex — Mon, 06 Apr 2009 19:07:33 +0000

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

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

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

$(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

Alex — Fri, 21 Nov 2008 10:19:29 +0000

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

Начнём с HTML кода:

<div id="container">
  <a id="prev" href="" title="">?</a>
  <a id="next" href="" title="">?</a>
  <div id="content">
    <div class="contbox">
      
    </div>
    <div class="contbox">
      
    </div>
 
    
 
  </div>
</div>

Внешний контейнер (#container) в данном примере необходим лишь для позиционирования. Элементы управления (#prev и #next) управляют просмотром содержимого, однако можно использовать автоматический просмотр слайдшоу и необходимости в элементах управления не будет. Содержимое находится в блоках с классом contbox. При необходимости замените эти блоки на нужные вам элементы, ротацию которых вы хотите реализовать.

CSS:

#container{
  width:500px;
  margin:20px auto 0 auto
}
#prev, #next{
  display:block;
  width:50%;height:40px;
  text-align:center;
  color:#fff;
  font:2em/35px Arial, Helvetica, sans-serif;
  text-decoration:none;
  background:#757364
}
#prev:hover, #next:hover{
  background:#D9AA81
}
#prev{
  float:left
}
#next{
  float:right
}
#content{
  background:#E6E6D1;
  clear:both
}
  #content .contbox{
    padding:10px;
    width:480px
}

Подключаем следующие файлы в секцию head:


<script type="text/javascript" src="jquery.js"></script>
 

<script type="text/javascript" src="jquery.cycle.js"></script>
 

<script type="text/javascript" src="jquery.easing.js"></script>

jQuery Easing Plugin подключать необязательно. Этот плагин даёт возможность использовать дополнительные эффекты перехода. Нужный эффект передаётся в значении параметра easing.

Далее пишем следующий javascript в той же секции head:

<script type="text/javascript">
  jQuery(window).bind("load", function() {
    $('#content').cycle({ 
      fx:     'scrollHorz',
      prev:   '#prev',
      next:   '#next',
      height: 250,
      timeout: 0,
      easing: 'easeInOutExpo'
    });
  });
script>

В данном примере используется эффект easeInOutExpo, но вы можете использовать другие. С примерами можно ознакомится на официальной странице плагина Easing Plugin.

Вот собственно и всё. Наслаждайтесь!