Питер 29 окт 2017, 16:21

BBCode

Немного переделал bbcode cut

Код: Выделить всё

<dl class="mone"><dt>{TEXT2}   <a href="javascript&#058; 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

GoDFaTHeR 30 окт 2017, 15:54 Сообщение

Помимо кода нужно еще и стили прописать...
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

CabinetAdmin 30 окт 2017, 16:29 Сообщение

Питер писал(а): строка "читать далее" оставалась (как бы была продолжением) основного текста
Так:

Код: Выделить всё

<dl class="mone"><dt>{TEXT2} <a class="link-more" href="javascript&#058; 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.

После открытия замутнение убирается, при повторном сворачивании (если нажать на тире) появляется снова.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 30 окт 2017, 17:22 Сообщение

CabinetAdmin, Признаюсь честно, последние моды и дргие операции, требующие различные изменив в стилях и т.д. Можно уточнить в каком именно файле (и в каком месте файла, если это имеет значение, нужно прописать стиль?
  • 0

CabinetAdmin 30 окт 2017, 19:54 Сообщение

В любой, можно в конец content.css.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 30 окт 2017, 21:15 Сообщение

Ничего не изменилось.
Стили и темы обновлял. Кеш почистил.
  • 0

CabinetAdmin 31 окт 2017, 17:21 Сообщение

Если используете хром, то есть смысл почистить его куки и кеш. Есть у него такая особенность. На крайний случай можно посмотреть с другого браузера и если там всё отображается, значит дело точно в браузерных куках.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 31 окт 2017, 17:34 Сообщение

Использую MacBook c Safari. Проверял и на айпаде, и на айфоне. И на настольном с обычной виндой. Словно ничего не делал.
content.css. ведь один? Стили — prosilver — темы
  • 0

ПитерПетр 01 ноя 2017, 16:59 Сообщение

Сейчас делал новую тему с использование этого тэга и уловил в чем проблема. Получается что в одной строке с (после разворачивания текста), рядом с "—" становится скрытый текст. А нужно чтобы "читать дальше" было в одной строке с открытым фрагментом. Как продолжение.
Но "затухания" как не было, так и нет. Ни в открытом фрагменте (как надо), ни в скрытом.
  • 0

CabinetAdmin 01 ноя 2017, 18:08 Сообщение

Питер писал(а): Стили — prosilver — темы
Если вы используете просильвер, то в него. А так, по сути, все правки добавляются в файлы стиля используемого по умолчанию.
Питер писал(а): нужно чтобы "читать дальше" было в одной строке с открытым фрагментом. Как продолжение.
Если честно не понял, перечитал ещё раз и всё равно не понял...
Так должно быть?:

Код: Выделить всё

-- Текст который видно -- "читать дальше" 
нажали:

Код: Выделить всё

-- Текст который видно -- "-" -- Текст который появился после нажатия "читать дальше" --
вроде так сейчас и должно быть.
Питер писал(а): Но "затухания" как не было, так и нет.
Либо стилей нет, либо стили не соответствуют классу в элементе. Если ничего в html коде не меняли, то должно работать. Если всё равно не работает - добавьте стили напрямую в замену ббкода с помощью <style>, так:

Код: Выделить всё

<dl class="mone"><dt>{TEXT2} <a class="link-more" href="javascript&#058; 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>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 01 ноя 2017, 19:12 Сообщение

Приношу свои извинения. Это я немного накосячил. Не подумал, что последнее слово основного текста должно быть уже в тэге.
Получается так Изображение
Вот только почему фон беловатый, а не форумный?


Не сочтите это рекламой моего форума, просто для наглядности дам ссылку на тему.
http://impossible-crimes.ru/Forum/viewt ... 675#p18675

Кстати, все равно, текст в тэге "уходит" на следующую строку.То есть:

Код: Выделить всё

Основной текст [cutпоследние слова, которые затухают]и далее скрытый текст[/cut]
И получается
Основной текст
Затухающий и "читать далее"
  • 0
Последний раз редактировалось Питер 01 ноя 2017, 22:15, всего редактировалось 1 раз.

ПитерПетр 01 ноя 2017, 21:35 Сообщение

Все! Вопрос с фоном снят!
Огромное спасибо за помощь!
  • 0

ПитерПетр 02 ноя 2017, 15:47 Сообщение

Все таки пока еще не совсем гут. Сегодня посмотрел на работу bbcode на другом мониторе, более большом, и получается, что та часть текста, которая включается в тэг (то есть "затухающая") и соответственно "читай дальше" автоматически переходит на следующую строку. И никак не получается оставить его на месте. <dl которая стоит вначале замены HTML подразумевает переход на другую строку. Неужели нету какого "нейтрализатора"?
http://www.moscowbooks.ru/book/890160/
Вот пример. Как не меняй размер браузера "затухающий" текст и "читать дальше" остается в той же строке. И еще. "Закрыть описание" переходит в конец всего текста. Как все таки добиться именно такого эффекта, как на приведенном примере?
  • 0

CabinetAdmin 02 ноя 2017, 19:55 Сообщение

Тогда так:

Код: Выделить всё

<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; количество показываемых строк.

Особо не проверял.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 02 ноя 2017, 20:17 Сообщение

Не уловил пару моментов
CabinetAdmin писал(а): background: #fff; изменить под цвет форума, плюс затухание последние строки.
max-height: 54px; количество показываемых строк.
Фон форума #EDE7D9. Так и прописать background: #EDE7D9 ?
Что значить количество показываемых строк? Строк скрытого текста? "Потухающие строки?

И. Надо ли менять фон в трех строках background в концовке фрагмента в стилях?

Кроме того. Вы поменяли сам bbcode. Сейчас стоит [cut{TEXT2}]{TEXT1}[/cut], в котором TEXT2 — затухающий текст, а TEXT1 непосредственно скрытый. Новый [cut]{TEXT}[/cut]? Это как?
  • 0

Похожие темы