Раздвижной блок на 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>











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

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

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