Сделать содержание статьи с помощью якоря

[Stethem]

Столкнулся с проблемой в установки якоря для оглавления большого описания, стандартный код не работает.

<div style="border: 1px dotted black; padding: 5px 5px 0 15px; margin: 5px;">

<strong>Содержание статьи:</strong>

        <ol>

        <li><a href="#name1">Подзаголовок 1</a></li>

        <li><a href="#name2">Подзаголовок 2</a></li>

        </ol>

</div>

в тексте:

<h2 id="name1">Подзаголовок 1</h2>

<h3 id="name2">Подзаголовок 2</h3>

нашёл решение прописав страницу:

<li><a href="galan-ochag.html#1">Кому заказать Галан Очаг выгодно?</a></li>

В Хроме все работает отлично

НО!!!

МАЗИЛА страницу прокручивает в конец.

Подскажите кто сталкивался, как решается этот вопрос.

 

Ссылка на страницу:

fillheat.ru/elektrodnyie-kotlyi/galan-ochag.html

Хотелось бы подсказку интересного кода:

1. Чтобы было оглавление.

2. Статья была частично спрятана и раскрывалась при клике на оглавление ( как вариант читать дальше)

 

 

[savage4pro]

В Хроме все работает отлично

 

и в хроме все плохо, и где угодно

 

первое (обязательное) - для применения якоря, давайте в ссылке весь адрес от вашего

<base href="http://fillheat.ru/" />

либо уберите base вовсе, а в ссылке указывайте просто "#anchor"

 

второе (крайне желательное) - если уж используете id, они должны быть уникальны, и начинаться с буквы латинского алфавита

[Stethem]

Да получилось спасибо.

base вовсе убирать побоялся, на сколько понимаю он указывает браузеру где находится документ, если удалю, каких артефактов можно ожидать?

Если лучший вариант, чтобы если даже отключен java у пользователя все работало, как лучше сделать оглавление к статье?

Хотелось бы еще чтобы все таки статья частично была спрятана а раскрывалась когда пользователи кликнут по оглавлению.

Что такое вам встречалось.?

[savage4pro]

Хотелось бы подсказку интересного кода:

1. Чтобы было оглавление.

2. Статья была частично спрятана и раскрывалась при клике на оглавление ( как вариант читать дальше)

 

решение на коленке примерно следующее

1. в описании статьи втыкаете куда хотите заголовки типа <h3 class="articleContents">Пункт содержания</h3>

в шаблоне пишете что-то вроде такого (чуть подправил preg_match_all 2015-10-27 09:57)

$contentsClass = "articleContents";//preg_match_all("%(<h[0-9].*class\=\"".$contentsClass."\"[^>]*)>(.*)</h[^>]+>%U",$description,$matches,PREG_SET_ORDER);preg_match_all("%(<h[0-9].*class\=\"".$contentsClass."\"[^>]*)>([^<]+)</h[^>]+>%Uis",$description,$matches,PREG_SET_ORDER);$contentsList = array();$replaceFrom = array();$replaceTo = array();if (!empty($matches)) {  foreach($matches as $idx => $contentsItem) {    $iterated = ' contentsItem="idx-'.$idx.'"';    $replaceFrom[] = $contentsItem[0];    $replaceTo[] = str_replace($contentsItem[1],$contentsItem[1].$iterated,$contentsItem[0]);    $contentsList[] = '<li contentsTarget="idx-'.$idx.'">'.trim(strip_tags($contentsItem[2])).'</li>';  }}$contents = '';if (!empty($contentsList)) {  $contents = "\n\n<ul class=\"contents-list\">\n".implode("\n",$contentsList)."\n</ul>\n\n";}if (!empty($contents) && !empty($replaceFrom) && !empty($replaceTo)) {  $description = '<div class="hiddenArticleDescription" style="display:none">'.str_replace($replaceFrom,$replaceTo,$description).'</div>';}echo '<div class="description-wrap">'.$contents.$description.'</div>';

2. в JS примерно такую конструкцию jquery

var gotoProcess = false;$('ul.contents-list>li').click(function() {  if (gotoProcess == false) {    gotoProcess = true;    var descel = $(this).closest('.description-wrap').find('.hiddenArticleDescription');    if (descel.is(":visible") == false) {      descel.show();    }    var tgt = descel.find('[contentsItem="' + $(this).attr('contentsTarget') + '"]').first();    $('html, body').animate({      scrollTop: tgt.offset().top    }, 500, function() {      gotoProcess = false;    });    return false;  }});

в стилях уж наверное оформите как-нибудь

[Stethem]

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

[savage4pro]

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

 

шаблон товара здесь

catalog/view/theme/ваша_тема/template/product/product.tpl

рекомендую все же создать новую тему и в нее поместить только те файлы шаблонов, которые вами меняются, а дефолтный бы не трогал

 

js здесь

catalog/view/javascript/common.js

если будете создавать мультистор, имеет смысл для отдельных тем подключать дополнительно свои js-скрипты, так же, как и css

 

по теме

если нужно, чтобы посетители без JS не страдали, то стоит убрать

style="display:none"

а прятать блок с текстом описания самим js-ом

ну и чтобы сохранить функциональность, то и тыркать надо заставлять не на <li>, а на <a>, и у целевых тэгов не атрибут contentsItem добавлять, а все же id

и в этом случае надо по click'у в ссылку элемента содержания запрещать js-ом переход по ней: event.preventDefault();

вот, тогда все будут довольны, без JS - просто прыгнет на нужное место, с JSом отобразит текст и плавно съедет

 

всех благ