Немного переделал bbcode cut
Но никак не могу добиться, что бы строка "читать далее" оставалась (как бы была продолжением) основного текста.
А если есть возможность, чтобы последние буквы основного текста, немного "мутнели" было бы вообще здорово!
Пример https://www.ozon.ru/context/detail/id/138403352/
Можете помочь?
Код: Выделить всё
<dl class="mone"><dt>{TEXT2} <a href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = 'читать дальше'; };">читать дальше</a></dt><dd style="display: none;">{TEXT1}</dd></dl>
А если есть возможность, чтобы последние буквы основного текста, немного "мутнели" было бы вообще здорово!
Пример https://www.ozon.ru/context/detail/id/138403352/
Можете помочь?
Комментарии: 36
Помимо кода нужно еще и стили прописать...
Так:
Код: Выделить всё
<dl class="mone"><dt>{TEXT2} <a class="link-more" href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0];if ( spoiler.style.display == 'none' ) { this.parentNode.parentNode.classList.toggle('open'); spoiler.style.display = 'inline'; this.innerHTML = '-'; } else { this.parentNode.parentNode.classList.toggle('open'); spoiler.style.display = 'none'; this.innerHTML = 'читать дальше'; };">читать дальше</a></dt><dd style="display: none;"> {TEXT1}</dd></dl>
Код: Выделить всё
.mone dt {
display: inline;
}
.mone dt > a {
position: relative;
}
.mone dt > a:after {
content: '';
position: absolute;
left: -180px;
top: 0;
height: 19px;
width: 180px;
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
}
.open.mone dt > a:after {
display: none;
}
180px
, оба на одинаковое число, грубо говоря 100 и -100.После открытия замутнение убирается, при повторном сворачивании (если нажать на тире) появляется снова.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Если используете хром, то есть смысл почистить его куки и кеш. Есть у него такая особенность. На крайний случай можно посмотреть с другого браузера и если там всё отображается, значит дело точно в браузерных куках.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Сейчас делал новую тему с использование этого тэга и уловил в чем проблема. Получается что в одной строке с (после разворачивания текста), рядом с "—" становится скрытый текст. А нужно чтобы "читать дальше" было в одной строке с открытым фрагментом. Как продолжение.
Но "затухания" как не было, так и нет. Ни в открытом фрагменте (как надо), ни в скрытом.
Но "затухания" как не было, так и нет. Ни в открытом фрагменте (как надо), ни в скрытом.
Если вы используете просильвер, то в него. А так, по сути, все правки добавляются в файлы стиля используемого по умолчанию.
Если честно не понял, перечитал ещё раз и всё равно не понял...
Так должно быть?:
Код: Выделить всё
-- Текст который видно -- "читать дальше"
Код: Выделить всё
-- Текст который видно -- "-" -- Текст который появился после нажатия "читать дальше" --
Либо стилей нет, либо стили не соответствуют классу в элементе. Если ничего в html коде не меняли, то должно работать. Если всё равно не работает - добавьте стили напрямую в замену ббкода с помощью
<style>
, так:
Код: Выделить всё
<dl class="mone"><dt>{TEXT2} <a class="link-more" href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0];if ( spoiler.style.display == 'none' ) { this.parentNode.parentNode.classList.toggle('open'); spoiler.style.display = 'inline'; this.innerHTML = '-'; } else { this.parentNode.parentNode.classList.toggle('open'); spoiler.style.display = 'none'; this.innerHTML = 'читать дальше'; };">читать дальше</a></dt><dd style="display: none;"> {TEXT1}</dd></dl>
<style>
.mone dt {
display: inline;
}
.mone dt > a {
position: relative;
}
.mone dt > a:after {
content: '';
position: absolute;
left: -180px;
top: 0;
height: 19px;
width: 180px;
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
}
.open.mone dt > a:after {
display: none;
}
</style>
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Приношу свои извинения. Это я немного накосячил. Не подумал, что последнее слово основного текста должно быть уже в тэге.
Получается так
Вот только почему фон беловатый, а не форумный?
Не сочтите это рекламой моего форума, просто для наглядности дам ссылку на тему.
http://impossible-crimes.ru/Forum/viewt ... 675#p18675
Кстати, все равно, текст в тэге "уходит" на следующую строку.То есть:
И получается
Основной текст
Затухающий и "читать далее"
Получается так
Вот только почему фон беловатый, а не форумный?
Не сочтите это рекламой моего форума, просто для наглядности дам ссылку на тему.
http://impossible-crimes.ru/Forum/viewt ... 675#p18675
Кстати, все равно, текст в тэге "уходит" на следующую строку.То есть:
Код: Выделить всё
Основной текст [cutпоследние слова, которые затухают]и далее скрытый текст[/cut]
Основной текст
Затухающий и "читать далее"
Последний раз редактировалось Питер 01 ноя 2017, 22:15, всего редактировалось 1 раз.
Все таки пока еще не совсем гут. Сегодня посмотрел на работу bbcode на другом мониторе, более большом, и получается, что та часть текста, которая включается в тэг (то есть "затухающая") и соответственно "читай дальше" автоматически переходит на следующую строку. И никак не получается оставить его на месте. <dl которая стоит вначале замены HTML подразумевает переход на другую строку. Неужели нету какого "нейтрализатора"?
http://www.moscowbooks.ru/book/890160/
Вот пример. Как не меняй размер браузера "затухающий" текст и "читать дальше" остается в той же строке. И еще. "Закрыть описание" переходит в конец всего текста. Как все таки добиться именно такого эффекта, как на приведенном примере?
http://www.moscowbooks.ru/book/890160/
Вот пример. Как не меняй размер браузера "затухающий" текст и "читать дальше" остается в той же строке. И еще. "Закрыть описание" переходит в конец всего текста. Как все таки добиться именно такого эффекта, как на приведенном примере?
Тогда так:
и сам ббкод:
Стили:
Особо не проверял.
Код: Выделить всё
<div class="more more-close">{TEXT} <a class="link-more" href="javascript: void(0);" onclick="var s = this.parentNode.getElementsByClassName('more-close')[0];if(s){ this.parentNode.classList.toggle('more-close'); this.innerHTML = 'читать дальше'; } else { this.parentNode.classList.toggle('more-close'); this.innerHTML = 'свернуть'; };">читать дальше</a></div>
Код: Выделить всё
[cut]{TEXT}[/cut]
Код: Выделить всё
.more {
position: relative;
}
.more-close {
overflow: hidden;
max-height: 54px;
}
.more-close .link-more {
position: absolute;
right:0;
bottom:0;
background: #fff;
}
.link-more {
margin-left:5px;
}
.more-close .link-more:after {
content: '';
position: absolute;
left: -180px;
top: 0;
height: 19px;
width: 180px;
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,1) 100%);
}
background: #fff;
изменить под цвет форума, плюс затухание последние строки.max-height: 54px;
количество показываемых строк.Особо не проверял.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Не уловил пару моментов
Что значить количество показываемых строк? Строк скрытого текста? "Потухающие строки?
И. Надо ли менять фон в трех строках background в концовке фрагмента в стилях?
Кроме того. Вы поменяли сам bbcode. Сейчас стоит [cut{TEXT2}]{TEXT1}[/cut], в котором TEXT2 — затухающий текст, а TEXT1 непосредственно скрытый. Новый [cut]{TEXT}[/cut]? Это как?
Фон форума #EDE7D9. Так и прописать background: #EDE7D9 ?
Что значить количество показываемых строк? Строк скрытого текста? "Потухающие строки?
И. Надо ли менять фон в трех строках background в концовке фрагмента в стилях?
Кроме того. Вы поменяли сам bbcode. Сейчас стоит [cut{TEXT2}]{TEXT1}[/cut], в котором TEXT2 — затухающий текст, а TEXT1 непосредственно скрытый. Новый [cut]{TEXT}[/cut]? Это как?
Похожие темы
-
Здравствуйте.
Нужен простой ббкод для вставки youtube. Искал на просторах все не рабочие может у кого есть в наличии поделитесь пожалуйста.
Версия... -
{TEXT2}
{TEXT2} | + {TEXT1}
Стандартный BBcode скрытого текста. Хочу использовать его в качестве примечаний в тексте поста. То есть, во-первых... -
CabinetAdmin , приветствую!
Использование BBCode
{TEXT}
Замена HTML
Spoiler :
{TEXT}
Подсказка
Spoiler с паролем: СООБЩЕНИЕ...