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

В блогах, которые любят делиться фрагментами кода, подобным этому, обычно используется <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. Вот логика:

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

5. 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 режиме:

var $j = jQuery.noConflict();