Раздвижной блок на JQuery

Данная заметка расскажет вам о том, как сделать выдвижной блок кода на своем сайте. Область будет выезжать не по вертикали (не сворачиваться), а по горизонтали. В некоторых случаях такой вариант является более удобным нежели стандартные полосы прокрутки браузера, — ведь не с каждым дизайном они будут смотреться приемлемо?

Раздвижной блок JQuery

Итак, далее представлен листинг. Подключите скрипт к веб-странице, предварительно подгрузив сам JQuery:

jQuery(document).ready(function($) {

  $("pre").hover(function() {
    var codeWidth = $("code", this).width() + 10;
    if (codeWidth > $(this).css("width").replace("px", "")) {
    $(this)
      .stop(true, false)
      .css({
        'position': 'relative',
        'zIndex': "99",
      })
      .animate({
        width: codeWidth + "px"
      });
    }
  }, function() {;
    $(this).stop(true, false).animate({
      width: $("pre").css("width")
    });
  });

});

HTML разметка при этом должна выглядеть, как минимум вот так:

<pre><code>
echo "Hello, world!";
/* ... */
</code></pre>

Суть показанного сниппета, заключается в том, что с помощью JQuery на основе текущей ширины блока с программным кодом я меняю значения CSS — в частности свойства width и zindex.

Опубликовано 5-04-2013 в 15:24


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Свежие комментарии

  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »
  • Владимир: к записи А как теперь будет выглядеть ссылка для перехода н »
  • Администратор: к записи Не знаю. »

Статистика спама

Последние твиты