Содержание

Создание расширенного кодового pre окна

Пример того как можно реализовать анимированный разворот по горизонтали кодового блока при помощи css и jQuery

В блогах, которые любят делиться фрагментами кода, подобным этому, обычно используется <pre> тег для обертывания кода. Чтобы поддерживать интервал, отступы и длинные строки – строки кода не переносятся. Ведь в большинстве случаев веб мастерам не хотелось бы чтобы эти не обернутые строки выходили из своих контейнеров и перекрывали другой контент. Но а что если контейнер PRE будет показываться во всю длинну при наведении курсора?

В данном примере мы будем использовать JavaScript (jQuery) для воплощения идеи в жизнь. Одним из решений может быть использование только CSS и расширение ширины с чем-то вроде pre:hover, но JavaScript более элегантный по разным причинам:

Расширяется только при необходимости.
Расширяется только по мере необходимости
Расширяется с анимацией

Пример расширяющегося кода, который мы сделаем в данном уроке:

CSS

<pre> Тег естественно блок-уровня, который мы будем использовать, для стиля наших блоков кода.


pre { 
  background: #eee; 
  padding: 10px; 
  border: 2px solid #c94a29; 
  overflow: hidden;
  margin: 0 0 15px 0; 
  width: 563px; 
  font-family: Courier, Monospace;
}

JQuery

Настоящий трюк заключается в том, что блоки кода обернуты не только <pre> тегами, но и <code> тегами. В конечном итоге код может быть отключен пре-блоком, но внутренний тег кода по-прежнему имеет естественную ширину, которую можно измерить с помощью JavaScript. Вот логика:

Когда предварительный блок зависает …
Измерение ширины внутренних кодовых блоков
Если эта ширина больше, чем предварительный блок …
Происходит развертывание предварительного блока, чтобы он был достаточно широким

mouseOut вернет пре-блок в исходный размер


var $j = jQuery.noConflict();
$j("pre").hover(function() {
    var codeInnerWidth = $j("code", this).width() + 10;
    if (codeInnerWidth > 563) {
        $j(this)
            .stop(true, false)
            .css({
                zIndex: "100",
                position: "relative"
            })
            .animate({
                width: codeInnerWidth + "px"
            });
        }
    }, function() {
            $j(this).stop(true, false).animate({
                width: 563
        });
});

Пара примечаний здесь. codeInnerWidth Рассчитываются при каждом наведении, так как разные блоки будут иметь разную внутреннюю ширину. stop функция предотвращает анимацию. Также обратите внимание на то, что $j используется только потому, что мы используем jQuery в noConflict режиме: