"Расширитель" кода

На сайтах которые по своей специфике нуждаются в предоставлении в статьях или сообщениях исходного кода какого-либо языка программирования, в частности, как например, и наш сайт, остро встает необходимость в более экономном использовании пространства веб-страницы. То есть размещенный на странице слишком длинный код вынуждает посетителя, которому в данный момент его содержание не важно, прокручивать довольно долго страницу вниз, так сказать к самой "соли". Можно конечно  разбивать код на несколько кусочков, но анализировать такой код не очень удобно и пространство все равно меньше не становится. Использование полос прокрутки в коде тоже довольно спорное решение, так как весь код не видно одновременно.
Так вот в этом уроке пойдет речь о создании "экспандера" (расширителя) кода на jQuery. Просто наведите на область с приведенным кодом и произойдет его раскрытие.
Но прежде чем что-то раскрыть, нужно сначала это что-то ужать.

HTML

HTML очень прост, нужно лишь указать класс jcexpander для тега pre, и заключить код в теги code:

<pre class="jcexpander"><code>
   <!-- Тут помещается отображаемый код -->
</code></pre>

CSS

Вот основной стиль

pre.jcexpander { 
     width:80%; 
     height:400px; 
     overflow:hidden; 
     background-color:#eee; 
     background-image:url("../images/code_bg.png"); 
     background-repeat:repeat-x; 
     padding:10px; 
     border:5px solid #bfe1f1;
    -moz-box-shadow: 5px 5px 10px #050505; 
    -webkit-box-shadow: 5px 5px 10px #050505; 
    }

Как видим мы с помощью свойств CSS обрезаем видимую область с кодом.

JS

Подключаем jQuery библиотеку:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

И файл script.js со скриптом экспандера:

$(document).ready(function() {
  // Циклично будем выполнять каждый <pre> элемент
  // с классом "jcexpander"
  $("pre.jcexpander").each(function() {
    // Выполнять только тогда, когда внутренний элемент (элемент <code>)
    // больше чем родитель (элемент <pre>)
    if ($("code", this).height() > $(this).height() || $("code", this).width() > $(this).width()) {
      // Будем нуждаться в сохранении оригинальных значений размеров
      // чтобы могли к ним вернуться в последствии
      $(this).data('originalHeight', $(this).height());
      $(this).data('originalWidth', $(this).width()); // Создать изображение IMG накладываемое поверх кода
      var icon = document.createElement("img");
      $(icon).css({
        'position': 'absolute'
      });
      $(icon).attr("src", "images/fullscreen.png"); // Добавляет изображение к элементу <pre>
      $(icon).prependTo($(this)); // При наведении на элемент <pre>, будет происходить следующее:
      // первая функция "over", вторая - "out"
      $(this).hover(function() {
        // Постепенное скрытие изображения
        $(icon).fadeOut(); // Считываем размеры элемента <code>
        var codeWidth = $("code", this).width();
        var codeHeight = $("code", this).height(); // Размер <pre> элемента будет таким же большим как
        // и элемента <code>
        $(this).stop().animate({
          width: codeWidth + "px",
          height: codeHeight + "px"
        }, 1500);
      }, function() {
        // Постепенное появление изображения
        $(icon).fadeIn(); // Возвращаем размеры <pre> элемента
        // к первоначальному значению
        $(this).stop().animate({
          width: $(this).data('originalWidth') + "px",
          height: $(this).data('originalHeight') + "px"
        }, 1500);
      });
    }
  });
});