BBCode

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

BBCode

CabinetAdmin 03 ноя 2017, 16:32 Сообщение

Питер писал(а):Источник цитаты Так и прописать

Так и прописать.
Питер писал(а):Источник цитаты Что значить количество показываемых строк?

Тут я немного неправильно выразился, это высота. 54 будет равно трём строкам показываемого текста, т.е. текста, который видно в самом начале.
Питер писал(а):Источник цитаты Надо ли менять фон в трех строках

Да. У вас сейчас уже подобранный цвет, просто скопируйте его.
Питер писал(а):Источник цитаты Кроме того

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

Питер

BBCode

Питер 03 ноя 2017, 20:33 Сообщение

Новый вариант вообще никак не работает. Ни стили, ни сам ббкод. Текст вставленный непосредственно в код, находится рядом (перед) с "читать дальше", При нажатии на "читать дальше" надпись превращается в "свернуть" и даже ни кликабельна. Вернее как уликабельная, но ничего не происходит на нажатие на нее. О затухании я вообще не говорю. Его нет. Ни переде тегом, ни после, ни в нем))
Этот ббкод пока использован только в двух постах. Пока не отработаю его до совершенства, не редактирую сотни других постов, где он необходим.

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

BBCode

CabinetAdmin 04 ноя 2017, 09:02 Сообщение

Заменить:

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

<dl class="more more-close"><dt>{TEXT2} <a class="link-more" href="javascript: void(0);" onclick="var dd = this.parentNode.parentNode.getElementsByTagName('dd')[0];if (dd.style.display == 'none') { this.parentNode.parentNode.classList.toggle('more-close'); dd.style.display = 'inline'; this.innerHTML = 'Свернуть'; } else { this.parentNode.parentNode.classList.toggle('more-close'); dd.style.display = 'none'; this.innerHTML = 'читать дальше'; };">читать дальше</a></dt><dd style="display: none;"> {TEXT1}</dd></dl> <style> .more { position: relative; } .mone dt { display: inline; } .link-more { position: absolute; right:0; bottom:0; background: #EDE7D9; } .more-close .link-more:after { content: ''; position: absolute; left: -180px; top: 0; height: 19px; width: 180px; background: -moz-linear-gradient(left,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%); background: -webkit-linear-gradient(left,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%); background: linear-gradient(to right,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%); } </style>

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

Питер

BBCode

Питер 04 ноя 2017, 09:22 Сообщение

CabinetAdmin, огромное спасибо, что возитесь со мной! Но в данном варианте (вы очень лаконичны) я не совсем понял.
Пока я вернул работающий (но пока не совсем то что задумал) вариант.
Новый вариант, как я писал, вообще никак не сработал.
Теперь вы даете новый вариант. Это замена HTML для bbcode? В стили что-то ставить? И нужно ли? И в использовании? [cut{TEXT2}]{TEXT1}[/cut] или [cut]{TEXT}[/cut]?

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

BBCode

CabinetAdmin 04 ноя 2017, 15:18 Сообщение

Это замена.
Сам ббкод:

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

[cut={TEXT2}]{TEXT1}[/cut]


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

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

Питер

BBCode

Питер 04 ноя 2017, 15:41 Сообщение

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

На всякий случай вариант который сейчас на форуме, о минусах которого написано выше.

bbcode

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

[cut{TEXT2}]{TEXT1}[/cut]

Замена HTML

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

<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: -50px; top: 0; height: 19px; width: 50px; background: -moz-linear-gradient(left,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%); background: -webkit-linear-gradient(left,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%); background: linear-gradient(to right,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%); } .open.mone dt > a:after { display: none; }

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

BBCode

CabinetAdmin 04 ноя 2017, 19:00 Сообщение

Ладно, пойдём чуть другим путём:)

Вариант 1:

ббкод:

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

<dl class="more more-close"><dt>{TEXT2}<a class="link-more" href="javascript: void(0);" onclick="var dd = this.parentNode.parentNode.getElementsByTagName('dd')[0];if (dd.style.display == 'none') { this.parentNode.parentNode.classList.toggle('more-close'); dd.style.display = 'inline'; this.innerHTML = 'Свернуть'; } else { this.parentNode.parentNode.classList.toggle('more-close'); dd.style.display = 'none'; this.innerHTML = 'читать дальше'; };">читать дальше</a></dt><dd style="display: none;">{TEXT1}</dd></dl>


Вариант 2:

ббкод:

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

<dl class="more more-close"><dt>{TEXT2}</dt><dd style="display: none;">{TEXT1}</dd><dd class="link-more"><a href="javascript: void(0);" onclick="var dd = this.parentNode.parentNode.getElementsByTagName('dd')[0];if (dd.style.display == 'none') { this.parentNode.parentNode.classList.toggle('more-close'); dd.style.display = 'inline'; this.innerHTML = 'Свернуть'; } else { this.parentNode.parentNode.classList.toggle('more-close'); dd.style.display = 'none'; this.innerHTML = 'читать дальше'; };">читать дальше</a></dd></dl>


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

Питер

BBCode

Питер 04 ноя 2017, 19:22 Сообщение

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

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

BBCode

CabinetAdmin 04 ноя 2017, 20:29 Сообщение

Питер писал(а):Источник цитаты И "читать дальше" до развертывания никак не хочет быть рядом с затуханием?

Так надо чтобы оно было рядом?
Во втором варианте удалить из стилей:

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

.more-close .link-more { position: absolute; right:0; bottom:0; background: #EDE7D9; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBCode

Питер 04 ноя 2017, 21:39 Сообщение

Так. Попробовал м испугался))
Вообщем как то так. "читать дальше" на месте (в строке) как и нужно). "свернут" внизу, после текста, только не обратил внимание в другой строке или как продолжение (что в прочем не важно). Эффекта затухания как не было, так и нет. И самое главное. "Добавка" в стили начинается с body и видимо это как-то повлияло на общий стиль. Шрифт по умолчанию на форуме, словно я его увеличил раза в три, как минимум))) Весь вид форума изменился. Вариант замены HTML оставил новый (как в втором варианте), но он, видимо из-за того, что вернул стиль, как в моем сообщении от 15:41, "читать заново" опять "убежало" на другую строку.

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

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

BBCode

CabinetAdmin 05 ноя 2017, 07:49 Сообщение

Мой косяк, забыл предупредить, в стилях в последней вкладке это не нужно добавлять:

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

body { padding: 15px; font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #333333; background-color: #EDE7D9; }

это я добавил для придания фона и нужного размера шрифта в примере. Прошу прощения:)

Питер писал(а):Источник цитаты Эффекта затухания как не было, так и нет.

Почему нет? А в примере выше? У вас же вроде Safari, он должен понимать те стили выше.
В стилях добавлены префиксы для всех популярных браузеров:
background: linear-gradient - для: ie 10, Chrome > 26, Opera, Safari > 6.1 и Firefox > 16
background: -webkit-linear-gradient - для: Chrome < 26, Safari < 6.1 и Android < 4.4
background: -moz-linear-gradient - для Firefox < 16
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBCode

Питер 05 ноя 2017, 09:35 Сообщение

CabinetAdmin писал(а):Источник цитаты Мой косяк, забыл предупредить

Как когда то говорил мой шеф, не ошибается только тот, кто ничего не делает)))

Затухания практически нет. Еле еле видно в браузерах на винде. В Сафари вообще нет. Кстати и в примере выше. left: -180px и width: 180px менял до -10 и 10 и никакого эффекта. Заключаю в тэг два последних слова, и еле еле видно "затухание" (причем только на винде) на последней букве второго слова. И осталось это:
При нажатии на кнопку "свернуть" перекидывает не к "читать далее" а на второй или третий пост в этой ветке — то есть ниже. Я предполагаю, зная примерно размер поста, что вообще не перекидывает, а остается на том же месте. Но так как текст уже свернулся (то есть первый пост как бы стал меньше) то и получится что остается на третьем сообщении.


А так все типи топи.

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

BBCode

CabinetAdmin 05 ноя 2017, 15:42 Сообщение

Питер писал(а):Источник цитаты никакого эффекта

Нет нет нет, надо не в меньшую сторону, чем выше число (не учитывая минус) тем дальше будет затухание.

Питер писал(а):Источник цитаты И осталось это

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

Питер

BBCode

Питер 05 ноя 2017, 15:52 Сообщение

Сейчас стоит 500 и - 500 ))) никакого эффекта. Нигде.
CabinetAdmin писал(а):Источник цитаты Можно где-то посмотреть?

http://impossible-crimes.ru/Forum/viewt ... =184&t=809

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

BBCode

CabinetAdmin 05 ноя 2017, 16:03 Сообщение

Найдите:

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

.link-more { margin-left: 5px; }

и замените на:

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

.link-more { margin-left: 5px; position: relative; }

После удаления этих стилей не стало позиционирования элемента.

Питер писал(а):Источник цитаты И осталось это

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



Похожие темы

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

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

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость