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

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

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 (другого способа определить Оперу не нашел). Поэтому, если у посетителя вашего сайта Опера замаскирована под другой браузер, то прокрутка будет работать некорректно. Спасибо Владимиру за подсказку, теперь в Опере все налажено.

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

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

  2. 2

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

  3. 4
    @

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

    var isOpera = !!window.opera;
    • 5

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

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

      • 6
        @

        Ну 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;
        

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

        • 7

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

          • 8
            @

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

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

            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...");
            }
            

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

            • 9

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

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

  4. 10
    Бирамакс

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

  5. 12

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

  6. 14

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

  7. 16
    Biramax

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

  8. 17

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

  9. 19
    alexpts

    На 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

  10. 21
    @

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

  11. 26
    @

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

    <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');
    ?>

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