Генерация оглавления и размещение в модуле

  • 43 Ответов
  • 567 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн Lovrentiy

Доброго дня, форумчане!

Появилась потребность организовать оглавление к некоторым документам на сайте. Можно сделать в ручную, но это не камильфо. При попытке найти расширение, модуль или плагин по сути нашел только Article Auto ToC.

Знакомы ли с альтернативными расширениями?

Необходимо генерировать оглавление из определенных слов в нужных тегах (например заголовки h2 и т.д.), а так же выводить их не в материале, а в модуле, слева например.

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

Буду премного благодарен за помощь и наводку.

Спасибо!

P.S. сайт на Joomla 3.6

*

Оффлайн Septdir

Делать на js на и все. находим все элементы с определенным селектором(ну классом например)
и добавляем в какой либо блок их содержимое(text) и # +  id используем в качестве ссылки.
Простейшая логика писать минут 15-20 с оформлением. А может и готовое есть гуглите.
P.S но автоматика не есть хорошая затея. мало ли что попадется
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
________
Мои Контакты: Сайт | skype:septdir | Telegram | VK | Facebook | Twiter | Все контакты

*

Оффлайн Lovrentiy

Делать на js на и все. находим все элементы с определенным селектором(ну классом например)
и добавляем в какой либо блок их содержимое(text) и # +  id используем в качестве ссылки.
Простейшая логика писать минут 15-20 с оформлением. А может и готовое есть гуглите.
P.S но автоматика не есть хорошая затея. мало ли что попадется
Увы с JS не дружу, да и зачастую есть уже готовые решения, потребность то тривиальная.
По поводу гуглить, так пытался, просто или не знаю правильны слов или... скорее первое =)
По поводу вреда автоматики. Вредна не автматика, а неоднородность данны, в моем случае информация обрабатывается в ручную, поэтому фактически сбоев быть не должно, а если есть они правятся легко.

В любом случае спасибо за уделенное внимание.

*

Оффлайн Lovrentiy

Ниаких вариантов не знаете? Может кто то сталкивался и решал этот вопрос?

Относительно формирования заголовков несколько расширений есть ToC, Article Auto ToC, но вот вывод оглавления материала в отдельном модуле я не нашел. Буду благодарен за подсказку!

*

Онлайн voland

  • ********
  • 9939
  • [+]520 / [-]101
  • Пол: Мужской
  • СКАЙП утерян! Пишите в телеграм @volandku
    • Просмотр профиля
    • webstudio.pro
О, кстати, подпишусь.
Искал сегодня готовый CSS под bootstrap, кое-что нашел, но как бы оформить всплывающей от края вертикально по центру всегда..

*

Онлайн voland

  • ********
  • 9939
  • [+]520 / [-]101
  • Пол: Мужской
  • СКАЙП утерян! Пишите в телеграм @volandku
    • Просмотр профиля
    • webstudio.pro

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
Вот такое пытаюсь приспособить
готовое решение для ТС, разве что ID тут лишние, имхо, проще его на лету генерировать, используя счетчик, иначе в код надо будет лезть, чтобы разметить страницу

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
смотрю готовый плагин JU ToC.
вроде там все есть для счастья, кроме самого счастья - не заводится на протостаре :)

*

Онлайн voland

  • ********
  • 9939
  • [+]520 / [-]101
  • Пол: Мужской
  • СКАЙП утерян! Пишите в телеграм @volandku
    • Просмотр профиля
    • webstudio.pro
ЗЫ
https://css-tricks.com/automatic-table-of-contents/

Вот такое пытаюсь приспособить
Этот просто в JS - и отлично завёлся.
Но мне бы хоть одним глазком глянуть на модальный..

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
в общем, в топку плагины кривые и закодированные :)
берем пример от Волонда и чуток правим (чтобы ID-шники для заголовков автоматом ставились, вам останется просто как h3 - h6 помечать нужные заголовки).
код цепляем к шаблону.

в коде вот эта строка
$('.item-page').find('h3, h4, h5, h6')отвечает за выбор.
т.е. все h3, h4, h5, h6 внутри блока с классом item-page попадут в оглавление.

ну и вывод в модуле делается просто: создаем модуль Custom HTML (произвольный код), вставляем туда
<div class="all-questions">...</div>и публикуем. где хотим

это цеплляем как js к шаблону
(function($)
{
$(document).ready(function()
{

var ToC =
  "<nav role='navigation' class='table-of-contents'>" +
    "<h2>On this page:</h2>" +
    "<ul>";

var newLine, el, title, link;
count=0;
$('.item-page').find('h3, h4, h5, h6').each(function() { // выбираем нужные заголовки
 cls=$(this).prop("tagName").toLowerCase(); // получаем имена тегов, чтобы сделать выделить вложенные теги лесенкой
  
  $(this).attr('id', "mytoc" + count);
  el = $(this);
  title = el.text();
 // link = "#" + el.attr("id");
 link = "#mytoc" + count;
 count++;

  newLine =
    "<li class='pad_" + cls + "' >" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";

  ToC += newLine;

});

ToC +=
   "</ul>" +
  "</nav>";

$(".all-questions").prepend(ToC);


})
})(jQuery);

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
Воланд, а что у тебя за траблы с позиционированием модуля?
вроде и готовые плавающие есть позиции и примеров тьма должна быть.

*

Онлайн voland

  • ********
  • 9939
  • [+]520 / [-]101
  • Пол: Мужской
  • СКАЙП утерян! Пишите в телеграм @volandku
    • Просмотр профиля
    • webstudio.pro
Воланд, а что у тебя за траблы с позиционированием модуля?
вроде и готовые плавающие есть позиции и примеров тьма должна быть.
Наверно не могу нагуглить, так как плохо знаю термины.
Суть - хочу плавающий блок (сдвигающийся при прокрутке страницы), находящийся вертикально по центру (горизонтально - прижат вправо).
А в идеале еще и спрятанный в кнопочку и раскрывающийся по клику

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
Наверно не могу нагуглить

Вот есть простенькое с демкой : http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/

находящийся вертикально по центру (горизонтально - прижат вправо).

Там отступы от topa можно указать в CSS, можно и в %.

А в идеале еще и спрятанный в кнопочку и раскрывающийся по клику

Сделайте обычным спойлером раскрытие потом на CSS в плавающем.

[spoiler]Зы. Тут мне нравиться вариант, если надоел плавающий блок-юзер может убрать его наверх/вернуть обратно.
На демке видно, о чём я.  ;)

http://truequery.ru/r_plavayshiy_blok_pri_prokrytke_stranici.html[/spoiler]
« Последнее редактирование: 15.12.2016, 14:47:22 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
ну да. я на хомяке что-то такое сделал.
тоже не выгуглил ничего на тему спец. решения от бутстрапа, а модалка это не то все же.

*

Онлайн voland

  • ********
  • 9939
  • [+]520 / [-]101
  • Пол: Мужской
  • СКАЙП утерян! Пишите в телеграм @volandku
    • Просмотр профиля
    • webstudio.pro
Да-да, вот что-то подобное.
Попозже потестирую.
А на чистом CSS нет вариантов?

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
А на чистом CSS нет вариантов?

Врятли, если только position:fixed;  ^-^

Вот ещё проще, меньше скриптов и подключений:

HTML:

[spoiler]<div id="fixed">
// бла-бла-бла
</div>[/spoiler]

Script:

[spoiler]<script type="text/javascript">
$(document).ready(function () {
      var offset = $('#fixed').offset();
    var topPadding = 0;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            $('#fixed').stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
        }
        else {
            $('#fixed').stop().animate({marginTop: 0});
        }
    });
});
</script>[/spoiler]

CSS:

[spoiler]#fixed{width:200px;position:absolute;}
Ну и тут делаем по центру, вправо, куда надо, размер указан просто.[/spoiler]
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Онлайн voland

  • ********
  • 9939
  • [+]520 / [-]101
  • Пол: Мужской
  • СКАЙП утерян! Пишите в телеграм @volandku
    • Просмотр профиля
    • webstudio.pro
А, еще забыл, ширина и высота заранее не известны..

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
А, еще забыл, ширина и высота заранее не известны..

Можно оставить (не знаю, правильно ли) : #fixed{width:100%;height:auto;position:absolute;}
Или танцы с бубном:

@media {/////} и поехали для каких экранов сколько в % или в emах для width.

Например:

@media screen and (min-width:480px) and (max-width:800px) {
#fixed{width:30%;height:auto;position:absolute;}
}

[spoiler]Кстати, в скрипте указано:var topPadding = 0, // это отступ от верха.
Если надо сделать так, что остановился внизу, указать надо (добавить):
var topPadding = 100, //высота отступа от topa экрана
bottomPadding = 210; //высота остановки от bottoma экрана[/spoiler]
« Последнее редактирование: 15.12.2016, 15:20:51 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
исправил код.
теперь можно выбирать h3 - h6 и строить их лесенкой, т.к. пункты оглавления получают класс на основе имени тега (.pad_h3, .pad_h4 ...)

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
кстати, путем легкой модернизации можно сделать вообще по красоте: интегрировать оглавление текущей страницы в результат работы page_break... и тащить все это в модуль :)
или не тащить :).
в общем, надо будет плагинчик забацать, мне давно не нравилось встроенное в статью оглавление, а тут оказия такая :)


*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
в общем, надо будет плагинчик забацать, мне давно не нравилось встроенное в статью оглавление, а тут оказия такая :)

И плавающий блок туда с z-indexoм, чтоб сверху плавал, а не по канавке справа с пустым внизу местом.
Точнее: галочку в админку-блок фиксед или плавает.
« Последнее редактирование: 16.12.2016, 11:59:49 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн Lovrentiy

в общем, в топку плагины кривые и закодированные :)
берем пример от Волонда и чуток правим (чтобы ID-шники для заголовков автоматом ставились, вам останется просто как h3 - h6 помечать нужные заголовки).
код цепляем к шаблону.

в коде вот эта строка
$('.item-page').find('h3, h4, h5, h6')отвечает за выбор.
т.е. все h3, h4, h5, h6 внутри блока с классом item-page попадут в оглавление.

ну и вывод в модуле делается просто: создаем модуль Custom HTML (произвольный код), вставляем туда
<div class="all-questions">...</div>и публикуем. где хотим

это цеплляем как js к шаблону
(function($)
{
$(document).ready(function()
{

var ToC =
  "<nav role='navigation' class='table-of-contents'>" +
    "<h2>On this page:</h2>" +
    "<ul>";

var newLine, el, title, link;
count=0;
$('.item-page').find('h3, h4, h5, h6').each(function() { // выбираем нужные заголовки
 cls=$(this).prop("tagName").toLowerCase(); // получаем имена тегов, чтобы сделать выделить вложенные теги лесенкой
 
  $(this).attr('id', "mytoc" + count);
  el = $(this);
  title = el.text();
 // link = "#" + el.attr("id");
 link = "#mytoc" + count;
 count++;

  newLine =
    "<li class='pad_" + cls + "' >" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";

  ToC += newLine;

});

ToC +=
   "</ul>" +
  "</nav>";

$(".all-questions").prepend(ToC);


})
})(jQuery);

Огромное спасибо за помощь! Действительно просто и очень удобно. Нужно наверняка запилить плагин, а можно и, заодно, плавающий модуль =)

На странице используется такой код:
$(document).ready(function() {
    $("a.scroll_p").click(function () {
        var elementClick = $(this).attr("href");
        var destination = $(elementClick).offset().top;
        $('html,body').animate( { scrollTop: destination }, 1100 );
        return false;
    });
});

по коду понятно, что для всех ссылок с классом scroll_p идет плавная прокрутка до ид. К сожалению в модуле это дело не работает.
добавил в код класс для ссылок:  "<a class='scroll_p' href='" + link + "'>" + но переход происходит резко.

Подскажите почему?

Я прошу прощения, но по плавающему блоку запутался, дайте пожалуйста ссылку на варинт исполнения, как правильно поступить? Модуль создал по образу и подобию от efrit

*

Оффлайн Lovrentiy

С использование данной статьи http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/ вопрос с путешествующим блоком отпал. Все работает

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
С использование данной статьи http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/ вопрос с путешествующим блоком отпал. Все работает

Вот ещё проще, меньше скриптов и подключений:

Там же проще и меньше левого. То я первую из Google Воланду дал для анализа.

Скрипт образно одинаков по событиям, но у вас будет новое квери просить из той ссылки, тут не будет.
« Последнее редактирование: 16.12.2016, 23:23:32 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
а я вот измышляю над плагином сижу.
с учетом того, что это должно быть универсальное решение, надо ли вообще эти летательный функции ему?
просто если оглавление будет перемещаться в модуль, то там оно нафиг не надо.
а если внутри статьи останется, то тоже под вопросом, с учетом миллиона разных шаблонов.

имхо, кому надо - сами допишут летание и сворачивание.

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
а я вот измышляю над плагином сижу.
а если внутри статьи останется, то тоже под вопросом, с учетом миллиона разных шаблонов.

вот и говорю, не надо пустую колонку, т.к. шабы разные, надо поз:абсолюд и галочку=плавает или нет.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
имхо, кому надо - сами допишут летание и сворачивание.

не напишут.тюлень нынче ленив: глобальное потепление идёт! ;)
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн effrit

  • *****
  • 7587
  • [+]822 / [-]7
  • Пол: Мужской
  • effrit.com
    • Просмотр профиля
    • effrit.com
по ходу в текущем виде чревато глюками, если URL страница УЖЕ содержит якоря, то скрипт не срабатывает )
а якоря используют для всяких там табов.
так что пришлось совсем по красоте делать - добавлять ссылкам preventDefault() и делать плавный скролл.
на js уже все работает, осталось заколупать в плагин ).

*

Оффлайн fbr

Делал такой модуль. На базе скриптов UIKit (с возможностью подключения этих скриптов из модуля)
Оглавление заполняется вручную, т.к заголовки могут быть очень длинными и тупо вставлять 3-х этажный пункт - не очень ...
Демо тут http://demo.wantweb.ru/anchor-list/ancholist-default
До продакшн не доводил, документацию еще не писал.
Если кому из разработчиков интересно покопаться/доработать - скину в личку