Главная›WordPress

jQuery-скрипт: прокрутка к родительскому комментарию и обратно

26 комментариев

Мне нравятся, как оформлены комментарии на популярном Хабрахабре. В частности приглянулись такие финтифлюшки в виде стрелок «Ответа на» и «Обратно«, которые при клике плавно прокручивают страницу до родительского комментария и соответственно обратно:

jQuery-скрипт: прокрутка к родительскому комментарию и обратно

Раньше я на это внимание как-то особо не обращал, а где-то с недельку назад глаз вдруг туда «упал». И я, конечно же, захотел на своем блоге реализовать точно такую же штуку. Ну и, как вы уже наверняка поняли, я это сделал. И… угадайте на чем… естественно, на jQuery =)

Посмотреть сию гламурную вещицу в действии вы можете, в комментариях, например, к этому посту. Мне очень нравится, плавненько так, красиво скроллит.

Установка скрипта на WordPress

Я создал отдельную страницу с примером, в исходном коде которого вы найдете написанный мною jQuery-скрипт. В примере я использовал HTML-код комментариев, создаваемый WordPress-темой «по умолчанию» (default).

Учитывая то, что структура HTML-тегов в комментариях вашей темы может отличаться от дефолтной темы (читай — от моей страницы с примером), при интеграции скрипта вам необходимо сделать соответствующие корректировки в коде комментариев и, возможно, в коде предлагаемого скрипта (конкретнее об этом рассказываю ниже).

Несмотря на то, что следующее описание процесса установки может вас ужаснуть, на самом деле, все просто.

  1. Если вы не дружите с HTML и CSS, то лучше не стоит браться за установку скрипта.
  2. Скрипт имеет смысл использовать только в том случае, если на блоге используются древовидные комментарии. Т.е. должна быть активирована соответствующая опция в админке WordPress.
  3. В шаблон комментариев в нужное вам место необходимо добавить следующий код, который выводит стрелку «Ответ на»: 
    <?php if ($comment->comment_parent != 0) { ?><a class="up2parent" title="Ответ на" href="#comment-<?php echo $comment->comment_parent; ?>">&uarr;</a><?php } ?>
  4. Если это еще не сделано ранее, подключите в своему шаблон фреймворк jQuery, например, вот так: 
    <?php
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
?>

    Этот код нужно поместить до следующего кода (в файле header.php):

    	<?php wp_head(); ?>
</head>

    иначе фреймворк не подключится.

  5. Подключите мой скрипт либо аналогично примеру, либо поместив в отдельный файл, например, script.js: 
    <script type="text/javascript" src="полный_путь_до_скрипта/script.js"></script>
  6. В шаблоне комментариев вашей темы обязательно должна стоять вот такая штука: 
    id="comment-<?php comment_ID() ?>"

    Чтобы проверить ее наличие, нужно либо заглянуть в код шаблона комментариев, либо открыть в браузере страницу с комментариями и посмотреть ее код. Во втором случае в коде должно присутствовать примерно следующее:

    <li class="тут_куча_классов" id="comment-45">

    (цифра после comment- может быть любая).

    Если у вас вместо тега <li> используется другой, например, <div>, тогда в моем скрипте необходимо найти вот такую строку:

    var thisID = $(this).parents('li').attr('id').replace('comment-', '');

    и заменить li на имя соответствующего тега.

  7. В примере стрелки размещены в контейнере <div class="commentmetadata"></div>.

    Если вы в своем шаблоне помещаете их в контейнер с другим классом, то необходимо внести соответствующие корректировки в следующих двух строках моего скрипта:

    $('#comment-' + parentID + ' div.commentmetadata:first a.down2child').remove();
$('#comment-' + parentID + ' div.commentmetadata:first').append('<a class="down2child" title="Обратно" href="#comment-' + thisID + '">&darr;</a>');

    Т.е., например, если у вас используется контейнер <span class="meta"></span>, тогда в вышеуказанных строчках необходимо заменить div.commentmetadata на span.meta.

  8. Если нужно, оформите стрелки с помощью CSS. Для стрелки «вверх» используется класс .up2parent, для стрелки «вниз» — .down2child.

Вот, в принципе, и все.

P.S. В браузере Opera обнаружился один косяк, и мне пришлось для него использовать проверку браузера на userAgent (другого способа определить Оперу не нашел). Поэтому, если у посетителя вашего сайта Опера замаскирована под другой браузер, то прокрутка будет работать некорректно. Спасибо Владимиру за подсказку, теперь в Опере все налажено.

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

jQuery-скрипт для WordPress "Привет, комментатор!"

88 комментариев

Написал небольшой jQuery-скриптик, который призван несколько повысить удобство комментирования на WordPress-блоге. Как работает скрипт Все очень просто. Он проверяет, заполнены ли обязательные поля Имя/E-mail, и выполняет следующее: Если посетитель блога ...

UserJS-скрипт на jQuery для авторизации в WordPress

18 комментариев

Давно я обещал опубликовать данный пост и вот, наконец, делаю это сегодня. Как я уже писал ранее, я интегрировал в браузер Opera свой любимый фреймворк jQuery и по мере необходимости ...

WordPress плагин "jQuery Comment Links"

18 комментариев

Описание Плагин «jQuery Comment Links» заменяет ссылку автора комментария и (или) ссылки в тексте комментария на jQuery-ссылки, т.е. по сути превращает все внешние ссылки в комментариях во внутренние. Что такое ...

Плагин для WordPress "Предпросмотр комментария" на jQuery

249 комментариев

Описание Плагин «Предпросмотр комментария» (jQuery Comment Preview) подключает к форме комментирования WordPress функцию предпросмотра комментария без перезагрузки страницы. Работает на популярном фреймворке jQuery. Для работы плагина требуется версия WordPress: 2.9 ...

Комментарии (26)

  1. ioni
    2 ноября 2009 г. в 10:05

    Шикарно1
    сделаю обязательно!

  2. Sosnovskij
    2 ноября 2009 г. в 10:30

    Dimox, не перестаю тобой удивляться :) Это, конечно, здорово, когда на блоге столько комментариев, что нужен такой интересный функционал.

    1. Dimox
      2 ноября 2009 г. в 14:17 / ответ на коммент Sosnovskij

      Спасибо! Да, я такой =))) И да, лучше юзать это, если на блоге оставляют довольно много комментов.

  3. Vladimir
    2 ноября 2009 г. в 10:32

    Dimox, а не лучше ли сделать проверку на Оперу как

    var isOpera = !!window.opera;
    1. Dimox
      3 ноября 2009 г. в 20:23 / ответ на коммент Vladimir

      Владимир, большое спасибо! Супер!

      Где можно найти аналогичные способы для других браузеров?

      1. Vladimir
        4 ноября 2009 г. в 02:23 / ответ на коммент Dimox

        Ну Prototype делает такие проверки:

          Browser: {
    IE:     !!(window.attachEvent && !window.opera),
    Opera:  !!window.opera,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
    MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
  },

        var isChrome = !!window.chrome;

        А еще есть хорошая статья.

        1. Dimox
          4 ноября 2009 г. в 09:13 / ответ на коммент Vladimir

          Т.е. от используемого фреймворка работоспособность этого кода не зависит?

          1. Vladimir
            4 ноября 2009 г. в 09:19 / ответ на коммент Dimox

            Я вопрос не понял :-)

            Делаешь, например, так:

            var isIE = !!(window.attachEvent && !window.opera);
var isOpera = !!window.opera;
var isWebKit = navigator.userAgent.indexOf('AppleWebKit/') > -1;
var isKHTML = navigator.userAgent.indexOf('KHTML') != -1;
var isGecko = navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1;
var isMobileSafari = !!navigator.userAgent.match(/Apple.*Mobile.*Safari/);
var isChrome = !!window.chrome;

            Проверки используют возможности JavaScript и могут работать безо всяких фреймворков.

            А потом там, где нужно осуществлять проверку на браузер, делаешь так:

            if (isIE) {
   alert("Internet Explorer! Make me unsee it...");
}

            Что-то в таком духе.

            1. Dimox
              4 ноября 2009 г. в 09:47 / ответ на коммент Vladimir

              Просто ты упомянул Prototype, а в статье про jQuery, поэтому запутал меня =) (я же в JavaScript не спец). Теперь все ясно. Вопрос снимается.

              Большое спасибо за информацию!

  4. Бирамакс
    2 ноября 2009 г. в 12:44

    Было бы еще интересней, если бы скролл был с некоторым замедлением перед остановкой :) Такое где-то видел несколько раз, не вспомню где…
    Еще, не в тему, но полезно знать успешному верстальщику — рекомендую в html или body этого сайта принудительно установить background-color белый, иначе в IE боковые поля будут такого же цвета, который пользователь установил себе в качестве цвета окна в Windows. Это смотрится нехорошо, а любителей такой персонализации Windows не мало.

    1. Ян
      3 ноября 2009 г. в 11:25 / ответ на коммент Бирамакс

      Во многих джумлавских шаблонах в футере есть стрелочка, нажав на которую экран переезжает в самый верх с плавным замедлением в самом конце.

  5. rotor
    3 ноября 2009 г. в 14:53

    Поставил себе — всё отлично работает. Дмитрий, еще раз спасибо за оперативность.

    1. Dimox
      3 ноября 2009 г. в 20:15 / ответ на коммент rotor

      Пожалуйста =)

  6. mechitov
    3 ноября 2009 г. в 16:27

    Мне не понравилось, не понял смысла, и не очень удобно в использовании

    1. Sun
      10 ноября 2009 г. в 04:33 / ответ на коммент mechitov

      Когда будет на каком-то уровне нцать комментариев, вот тогда и поймешь необходимость этой вещи.

  7. Biramax
    4 ноября 2009 г. в 00:43

    Автор блога меня услышал :) Так стало гораздо лучше.

  8. WOLF BESPREDEL
    5 ноября 2009 г. в 06:58

    А в случае использования WP Ajax Edit Comments на блоге делать всё по такому же принципу или придётся его отключить и использовать только стандартный вывод комментариев?

    1. Dimox
      5 ноября 2009 г. в 09:18 / ответ на коммент WOLF BESPREDEL

      Одно другому не мешает, поэтому отключать не требуется.

  9. alexpts
    29 января 2010 г. в 17:30

    На jQuery браузер проверяется с так

    if ($.browser.opera) {
alert("opera");
}

    и по аналогии свойства
    msie
    mozilla
    safari
    webkit (jQuery 1.4)

    В версии jQuery 1.4 рекомендуется использовать jQuery.support — http://docs.jquery.com/Utilities/jQuery.support

    1. Dimox
      29 января 2010 г. в 18:49 / ответ на коммент alexpts

      По-моему эту штуку не рекомендовали использовать еще начиная с версии 1.3. Не помню уже, по какой причине.

  10. Евгений
    4 октября 2012 г. в 11:06

    Дмитрий, интересная реализация!) А где же взять сам скрипт? С примера вытянуть?

    1. Dimox
      4 октября 2012 г. в 11:21 / ответ на коммент Евгений

      Да, в статье про это написано.

      1. Евгений
        4 октября 2012 г. в 11:34 / ответ на коммент Dimox

        Да я так и подумал, спасибо, сейчас юудем пилить! Ваш блог постоянно радует, а кстати маленький вопросик не по теме! Вы траф сливаете на RMS, через свой скрипт? или через что-то вроде SimpleTDS?

        1. Dimox
          4 октября 2012 г. в 11:42 / ответ на коммент Евгений

          Пожалуйста. Напрямую, там простой редирект.

          1. Евгений
            4 октября 2012 г. в 11:51 / ответ на коммент Dimox

            Понял, спасибо за все!)

  11. Евгений
    4 октября 2012 г. в 13:44

    Думаю было бы не плохо в статью добавить еще вот такое вот подключение:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    Есть блоггеры, у которых подключены скрипты табы и другие, вручную, без плагинов, так вот они не будут работать, если вот это вот:

    <?php
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"), false, '1.3.2');
  wp_enqueue_script('jquery');
?>

    будет подключаться после тех файлов.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2025 Dimox.name. Все права защищены. Перепечатка запрещена.