BBCode

BBCode — это специальный вариант HTML
С помощью BBcode - вы сможете отформатировать текст в сообщении, вставить видео, картинки и многое другое.
Питер

BBCode

Питер 29 окт 2017, 16:21 Сообщение

Немного переделал 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/

Можете помочь?

GoDFaTHeR

BBCode

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

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

Аватара пользователя
CabinetAdmin

BBCode

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.

После открытия замутнение убирается, при повторном сворачивании (если нажать на тире) появляется снова.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBCode

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

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

Аватара пользователя
CabinetAdmin

BBCode

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

В любой, можно в конец content.css.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBCode

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

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

Аватара пользователя
CabinetAdmin

BBCode

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

Если используете хром, то есть смысл почистить его куки и кеш. Есть у него такая особенность. На крайний случай можно посмотреть с другого браузера и если там всё отображается, значит дело точно в браузерных куках.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBCode

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

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

Питер

BBCode

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

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

Аватара пользователя
CabinetAdmin

BBCode

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>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBCode

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

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


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

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

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

Основной текст [cutпоследние слова, которые затухают]и далее скрытый текст[/cut]

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

Питер

BBCode

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

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

Питер

BBCode

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

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

Аватара пользователя
CabinetAdmin

BBCode

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

Особо не проверял.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBCode

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

Не уловил пару моментов
CabinetAdmin писал(а):Источник цитаты background: #fff; изменить под цвет форума, плюс затухание последние строки.
max-height: 54px; количество показываемых строк.


Фон форума #EDE7D9. Так и прописать background: #EDE7D9 ?
Что значить количество показываемых строк? Строк скрытого текста? "Потухающие строки?

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

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



Похожие темы

Вернуться в «Пользовательские BBCode для phpBB»

Кто сейчас на конференции

Сейчас этот форум просматривают: Bing [Bot] и 2 гостя