«
»
WordPress

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

Создание расширенного кодового 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. Вот логика:

  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();

Статья была переведена для блога TechBlog.SDStudio.top
Источник: https://digwp.com

Связанные записи
ElementorWordPressПлагиныПолезные сайты

Elementor - 10 потрясающих мест для поиска бесплатных или премиальных шаблонов

MailChimpWordPressПлагины

5 лучших плагинов WordPress для Mailchimp (большинство из них бесплатны)

WoocommerceWordPressПлагины

Дропшиппинг: Как импортировать продукты AliExpress в WooCommerce при помощи плагина DropshipMe

WoocommerceWordPressПлагины

8 лучших плагинов для WooCommerce Dropshipping для AliExpress и не только (Или дропшиппинга на WordPress)