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

Lovrentiy

  • Осваиваюсь на форуме
  • 97
  • -2
Доброго дня, форумчане!

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

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

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

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

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

Спасибо!

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

Septdir

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

Lovrentiy

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

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

Lovrentiy

  • Осваиваюсь на форуме
  • 97
  • -2
Ниаких вариантов не знаете? Может кто то сталкивался и решал этот вопрос?

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

voland

  • Профи
  • 9509
  • 422
  • Эта строка съедает место на вашем мониторе
О, кстати, подпишусь.
Искал сегодня готовый CSS под bootstrap, кое-что нашел, но как бы оформить всплывающей от края вертикально по центру всегда..
*

voland

  • Профи
  • 9509
  • 422
  • Эта строка съедает место на вашем мониторе
*

effrit

  • Группа развития
  • 7572
  • 819
  • effrit.com
Вот такое пытаюсь приспособить
готовое решение для ТС, разве что ID тут лишние, имхо, проще его на лету генерировать, используя счетчик, иначе в код надо будет лезть, чтобы разметить страницу
*

effrit

  • Группа развития
  • 7572
  • 819
  • effrit.com
смотрю готовый плагин JU ToC.
вроде там все есть для счастья, кроме самого счастья - не заводится на протостаре :)
*

voland

  • Профи
  • 9509
  • 422
  • Эта строка съедает место на вашем мониторе
ЗЫ
https://css-tricks.com/automatic-table-of-contents/

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

effrit

  • Группа развития
  • 7572
  • 819
  • 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

  • Группа развития
  • 7572
  • 819
  • effrit.com
Воланд, а что у тебя за траблы с позиционированием модуля?
вроде и готовые плавающие есть позиции и примеров тьма должна быть.
*

voland

  • Профи
  • 9509
  • 422
  • Эта строка съедает место на вашем мониторе
Воланд, а что у тебя за траблы с позиционированием модуля?
вроде и готовые плавающие есть позиции и примеров тьма должна быть.
Наверно не могу нагуглить, так как плохо знаю термины.
Суть - хочу плавающий блок (сдвигающийся при прокрутке страницы), находящийся вертикально по центру (горизонтально - прижат вправо).
А в идеале еще и спрятанный в кнопочку и раскрывающийся по клику
*

vipiusss

  • Профи
  • 5618
  • 322
  • Круглая ава-зло!
Наверно не могу нагуглить

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

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

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

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

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

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

effrit

  • Группа развития
  • 7572
  • 819
  • effrit.com
ну да. я на хомяке что-то такое сделал.
тоже не выгуглил ничего на тему спец. решения от бутстрапа, а модалка это не то все же.
*

voland

  • Профи
  • 9509
  • 422
  • Эта строка съедает место на вашем мониторе
Да-да, вот что-то подобное.
Попозже потестирую.
А на чистом CSS нет вариантов?
*

vipiusss

  • Профи
  • 5618
  • 322
  • Круглая ава-зло!
А на чистом CSS нет вариантов?

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

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

HTML:

Спойлер
[свернуть]

Script:

Спойлер
[свернуть]

CSS:

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

voland

  • Профи
  • 9509
  • 422
  • Эта строка съедает место на вашем мониторе
А, еще забыл, ширина и высота заранее не известны..
*

vipiusss

  • Профи
  • 5618
  • 322
  • Круглая ава-зло!
А, еще забыл, ширина и высота заранее не известны..

Можно оставить (не знаю, правильно ли) : #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;}
}

Спойлер
[свернуть]
« Последнее редактирование: 15.12.2016, 13:20:51 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

effrit

  • Группа развития
  • 7572
  • 819
  • effrit.com
исправил код.
теперь можно выбирать h3 - h6 и строить их лесенкой, т.к. пункты оглавления получают класс на основе имени тега (.pad_h3, .pad_h4 ...)
*

effrit

  • Группа развития
  • 7572
  • 819
  • effrit.com
кстати, путем легкой модернизации можно сделать вообще по красоте: интегрировать оглавление текущей страницы в результат работы page_break... и тащить все это в модуль :)
или не тащить :).
в общем, надо будет плагинчик забацать, мне давно не нравилось встроенное в статью оглавление, а тут оказия такая :)
*

vipiusss

  • Профи
  • 5618
  • 322
  • Круглая ава-зло!
в общем, надо будет плагинчик забацать, мне давно не нравилось встроенное в статью оглавление, а тут оказия такая :)

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

Lovrentiy

  • Осваиваюсь на форуме
  • 97
  • -2
в общем, в топку плагины кривые и закодированные :)
берем пример от Волонда и чуток правим (чтобы 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

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

vipiusss

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

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

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

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

effrit

  • Группа развития
  • 7572
  • 819
  • effrit.com
а я вот измышляю над плагином сижу.
с учетом того, что это должно быть универсальное решение, надо ли вообще эти летательный функции ему?
просто если оглавление будет перемещаться в модуль, то там оно нафиг не надо.
а если внутри статьи останется, то тоже под вопросом, с учетом миллиона разных шаблонов.

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

vipiusss

  • Профи
  • 5618
  • 322
  • Круглая ава-зло!
а я вот измышляю над плагином сижу.
а если внутри статьи останется, то тоже под вопросом, с учетом миллиона разных шаблонов.

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

vipiusss

  • Профи
  • 5618
  • 322
  • Круглая ава-зло!
имхо, кому надо - сами допишут летание и сворачивание.

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

effrit

  • Группа развития
  • 7572
  • 819
  • effrit.com
по ходу в текущем виде чревато глюками, если URL страница УЖЕ содержит якоря, то скрипт не срабатывает )
а якоря используют для всяких там табов.
так что пришлось совсем по красоте делать - добавлять ссылкам preventDefault() и делать плавный скролл.
на js уже все работает, осталось заколупать в плагин ).
*

fbr

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

Кнопка прокрутки страницы в МОДУЛЕ

Автор b4zic

Ответов: 1
Просмотров: 127
Последний ответ 22.07.2017, 23:09:14
от yandex_hb
Плагин для создания оглавления в статья по тегам

Автор Victor333

Ответов: 2
Просмотров: 206
Последний ответ 25.04.2017, 22:00:48
от effrit
Размещение нескольких изображений в материале Joomla 3

Автор Prtoy

Ответов: 11
Просмотров: 324
Последний ответ 07.02.2017, 15:40:03
от SeBun
Запись с сайта и размещение своего аудио и видео

Автор nick71

Ответов: 5
Просмотров: 428
Последний ответ 12.06.2015, 09:00:51
от nick71
Генерация метатегов по заданным шаблонам

Автор Web-Simple

Ответов: 9
Просмотров: 895
Последний ответ 16.04.2015, 16:12:24
от Очередной вебмастер