Питер 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

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

Питер писал(а): Так и прописать
Так и прописать.
Питер писал(а): Что значить количество показываемых строк?
Тут я немного неправильно выразился, это высота. 54 будет равно трём строкам показываемого текста, т.е. текста, который видно в самом начале.
Питер писал(а): Надо ли менять фон в трех строках
Да. У вас сейчас уже подобранный цвет, просто скопируйте его.
Питер писал(а): Кроме того
Правильно. В последнем примере, что вы дали, именно такая реализация. Если у вас нет возможности изменить (слишком много раз использован по всему форуму и уже муторно это всё менять) могу попробовать переделать как раньше, сегодня/завтра.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

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

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

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

[cut={TEXT2}]{TEXT1}[/cut]
Чтобы не редактировать уже имеющиеся ббкоды в сообщениях, сделал вам на прежний манер. Стили добавил в замену. В принципе без разницы, будут ли стили в самом ббкоде или в стилевом файле. В ббкоде он будет сразу обрабатываться браузером, в стилях нужно будет чистить кеш браузера.

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

ПитерПетр 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;
}
  • 0

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>
Исполнение ббкода одинаковое у обоих, стили в третей вкладке.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

.more-close .link-more {
	position: absolute;
	right:0;
	bottom:0;
	background: #EDE7D9;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

CabinetAdmin писал(а): Мой косяк, забыл предупредить
Как когда то говорил мой шеф, не ошибается только тот, кто ничего не делает)))

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

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

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

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

Сейчас стоит 500 и - 500 ))) никакого эффекта. Нигде.
CabinetAdmin писал(а): Можно где-то посмотреть?
http://impossible-crimes.ru/Forum/viewt ... =184&t=809
  • 0

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

Найдите:

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

.link-more {
	margin-left: 5px;
}
и замените на:

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

.link-more {
	margin-left: 5px;
	position: relative;
}
После удаления этих стилей не стало позиционирования элемента.
Питер писал(а): И осталось это
Понял о чём речь, я по началу подумал что происходит переход по якорю... Всё верно, просто страница остаётся на том же месте.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы