Технические полезности

Semenar · 14 Янв 2019

Выкладываем коды технических полезностей с кратким описанием.

Semenar · 14 Янв 2019

Колонки

Размер и количество можно регулировать (изменив размеры в строках вверху шаблона и добавив/удалив новые колонки с размерами).

Пояснение по размерам:
Npx - колонка имеет размер в N пикселей
N% - колонка имеет размер в N% от всей таблицы
Nfr - колонка имеет размер, пропорциональный N (среди всех колонок с данным размером)
auto - подобрать размер автоматически

Код:

[PARSEHTML]<div style="display: grid; gap: 5px; grid-template-rows: auto; grid-template-columns:
100px
30%
1fr
2fr
">[/PARSEHTML]

[PARSEHTML]<div style="grid-row: 1; grid-column: 1">[/PARSEHTML]
Колонка 1 (100 пикселей)
[PARSEHTML]</div>[/PARSEHTML]

[PARSEHTML]<div style="grid-row: 1; grid-column: 2">[/PARSEHTML]
Колонка 2 (30%)
[PARSEHTML]</div>[/PARSEHTML]

[PARSEHTML]<div style="grid-row: 1; grid-column: 3">[/PARSEHTML]
Колонка 3
[PARSEHTML]</div>[/PARSEHTML]

[PARSEHTML]<div style="grid-row: 1; grid-column: 4">[/PARSEHTML]
Колонка 4 (вдвое больше)
[PARSEHTML]</div>[/PARSEHTML]

[PARSEHTML] </div>[/PARSEHTML]

Колонка 1 (100 пикселей)

Колонка 2 (30%)

Колонка 3

Колонка 4 (вдвое больше)

Fredrik Mälaren · 26 Мар 2019

Линия

Просто линия, без изысков

Код:

[PARSEHTML]<hr>[/PARSEHTML]

Ta-da

Oh

Semenar · 4 Апр 2019

Обтекание картинки текстом

Отсутствие переводов строки рядом с тегами важно для внешнего вида.

Пояснение по параметрам:
float: с какой стороны находится картинка (left/right).
height, width, max-height, max-width: могут быть использованы, чтобы указать размер картинки.

Код:

[PARSEHTML]<div style='float: left; max-width: 150px'>[/PARSEHTML][IMG]https://otvet.imgsmail.ru/download/255823626_24aa653da3feacaff4a74e3cd51ebe04_800.jpg[/IMG]
[PARSEHTML]</div>[/PARSEHTML]On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

Кшаяршин · 11 Май 2019

Эммм?! А почему тупо нельзя IMG в PARSEHTML всунуть?

Semenar · 11 Май 2019

Конфедерат написал(а):
Эммм?! А почему тупо нельзя IMG в PARSEHTML всунуть?

Формально - потому что это будет не IMG, а <img src=".

Кшаяршин · 11 Май 2019

Понятно, тупо лень писать лишние буквы)))

Semenar · 17 Мар 2020

Прогресс-бар

Пояснение по параметрам:
background-color во второй строке: фоновый цвет полоски.
background-color в третьей строке: цвет заполнения полоски.
width в третьей строке: процент заполнения полоски. Можно прописывать дробями, можно прямо процентами.

Код:

[PARSEHTML]<div style='display: flex; flex-direction: row; align-items: center; width: 90%; margin-left: 10%; margin-right: 10%'>
<div style='height: 0.6rem; margin-right: 1.2rem; flex-grow: 1; background-color: #B2B2B2'>
<div style='height: 100%; width: calc(100% * 5 / 7); background-color: #267F00'>
</div></div>
<p style='margin: 0px'>
71,42%
</p></div>[/PARSEHTML]

71,42%

Batman · 17 Мар 2020

Semenar написал(а):
Прогресс-бар

Пояснение по параметрам:
background-color во второй строке: фоновый цвет полоски.
background-color в третьей строке: цвет заполнения полоски.
width в третьей строке: процент заполнения полоски. Можно прописывать дробями, можно прямо процентами.

Код:

[PARSEHTML]<div style='display: flex; flex-direction: row; align-items: center; width: 100%'> <div style='height: 0.6rem; margin-right: 2rem; flex-grow: 1; background-color: #B2B2B2'> <div style='height: 100%; width: calc(100% * 5 / 7); background-color: #267F00'> </div></div> <p style='margin: 0px'> 71,42% </p></div>[/PARSEHTML]

71,42%

Для донатов что-ли?

Matthieu · 17 Мар 2020

Semenar, спасибо! Классный код, с ним ещё играться и играться в оформлении.

Semenar · 24 Мар 2020

Переключатель языков

ВАЖНО! Данный пример использует Javascript!
Использование Javascript потенциально может "сломать" другие сообщения, использующие тот же шаблон. В связи с этим крайне рекомендуется использовать уникальные названия при использовании данного примера.

Перед использованием замените 90011337 в шаблоне на своё число.
При использовании нескольких переключателей в одном сообщении выбирайте для них разные числа.

Пояснение по использованию примера:
Вместо LA напишите короткое название основного языка текста.
Вместо RU напишите короткое название второго языка текста.
Вставьте исходный текст между тегами "<div id="text_90011337_default" style="display: block">[/PARSEHTML]" и "[PARSEHTML]</div>".
Вставьте переведённый текст между тегами "<div id="text_90011337_changed" style="display: none">[/PARSEHTML]" и "[PARSEHTML]</div>".

Код:

[PARSEHTML]
<script type='text/javascript'>
function changeLanguage_90011337(elid, old_lang, new_lang, lang_sel) {
let old_el = document.getElementById(elid + "_" + old_lang);
let new_el = document.getElementById(elid + "_" + new_lang);
old_el.style.display = "none";
new_el.style.display = "block";

let lang_sel_old = document.getElementById(lang_sel + "_" + old_lang);
let lang_sel_new = document.getElementById(lang_sel + "_" + new_lang);
lang_sel_old.style.backgroundColor = "white";
lang_sel_new.style.backgroundColor = "rgb(0,216,0)";
}
</script>

<div style='float: right; width: 5.5rem; height: 2rem; margin-left: 1rem; margin-bottom: 1rem; display: flex; flex-direction: row'>
<div id="lang_90011337_default" style='overflow: hidden; background-color: rgb(0,216,0); flex-grow: 1; flex-basis: 0; border: 2px black solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_90011337('text_90011337', 'changed', 'default', 'lang_90011337')">
LA
</div>
<div id="lang_90011337_changed" style='overflow: hidden; background-color: white; flex-grow: 1; flex-basis: 0; border: 2px black solid; border-left: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_90011337('text_90011337', 'default', 'changed', 'lang_90011337')">
RU
</div>
</div>

<div id="text_90011337_default" style="display: block">[/PARSEHTML]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, 
[PARSEHTML]</div>

<div id="text_90011337_changed" style="display: none">[/PARSEHTML]Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить 
[PARSEHTML]</div>
[/PARSEHTML]

LA

RU

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

Semenar · 24 Мар 2020

Переключатель языков, вариант с большим числом кнопок

ВАЖНО! Данный пример использует Javascript!
Использование Javascript потенциально может "сломать" другие сообщения, использующие тот же шаблон. В связи с этим крайне рекомендуется использовать уникальные названия при использовании данного примера.

Перед использованием замените 90011337 в шаблоне на своё число.
При использовании нескольких переключателей в одном сообщении выбирайте для них разные числа.

Пояснение по использованию примера:
Для каждого языка требуется добавить два блока: блок вида

<div id="lang_several_90011337_[код языка]" style='overflow: hidden; background-color: white; flex: 1 1 0px; border-left: 1px gray solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_several_90011337('text_several_90011337', '[код языка]', 'lang_several_90011337')">
[название языка]
</div>

(в первую часть)
и блок вида

<div id="text_several_90011337_[код языка]" style="display: none">[/PARSEHTML][текст на языке]
[PARSEHTML]</div>

(во вторую часть).

Код для исходного языка несколько отличается; оставляйте его как есть, за исключением изменения названия и текста.

При необходимости изменить длину полоски с выбором языков меняйте число 7 в "width: 7rem;".

Код:

[PARSEHTML]
<script type='text/javascript'>
var lang_cur_90011337 = "default";

function changeLanguage_several_90011337(elid, new_lang, lang_sel) {
let old_el = document.getElementById(elid + "_" + lang_cur_90011337);
let new_el = document.getElementById(elid + "_" + new_lang);
old_el.style.display = "none";
new_el.style.display = "block";

let lang_sel_old = document.getElementById(lang_sel + "_" + lang_cur_90011337);
let lang_sel_new = document.getElementById(lang_sel + "_" + new_lang);
lang_sel_old.style.backgroundColor = "white";
lang_sel_new.style.backgroundColor = "rgb(0,216,0)";

lang_cur_90011337 = new_lang;
}
</script>

<div style='border: 2px black solid; float: right; width: 7rem; margin-left: 1rem; margin-bottom: 1rem; display: flex; flex-direction: row'>

<div id="lang_several_90011337_default" style='overflow: hidden; background-color: rgb(0,216,0); flex: 1 1 0px; border-left: 1px gray solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_several_90011337('text_several_90011337', 'default', 'lang_several_90011337')">
v.1
</div>

<div id="lang_several_90011337_alt1" style='overflow: hidden; background-color: white; flex: 1 1 0px; border-left: 1px gray solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_several_90011337('text_several_90011337', 'alt1', 'lang_several_90011337')">
v.2
</div>

<div id="lang_several_90011337_alt2" style='overflow: hidden; background-color: white; flex: 1 1 0px; border-left: 1px gray solid; border-right: 1px gray solid; font-size: 1.2rem; font-family: "Ubuntu", serif; text-align: center; cursor: pointer' onclick="changeLanguage_several_90011337('text_several_90011337', 'alt2', 'lang_several_90011337')">
v.3
</div>

</div>

<div id="text_several_90011337_default" style="display: block">[/PARSEHTML]Вот дом,
Который построил Джек.

А это пшеница,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.
[PARSEHTML]</div>

<div id="text_several_90011337_alt1" style="display: none">[/PARSEHTML]Вот дом,
Который построил Джек.

А это пшеница,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.

А это весёлая птица-синица,
Которая часто ворует пшеницу,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.
[PARSEHTML]</div>

<div id="text_several_90011337_alt2" style="display: none">[/PARSEHTML]Вот дом,
Который построил Джек.

А это пшеница,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.

А это весёлая птица-синица,
Которая часто ворует пшеницу,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.

Вот кот,
Который пугает и ловит синицу,
Которая часто ворует пшеницу,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.
[PARSEHTML]</div>
[/PARSEHTML]

v.1

v.2

v.3

Вот дом,
Который построил Джек.

А это пшеница,
Которая в тёмном чулане хранится
В доме,
Который построил Джек.

Semenar · 7 Апр 2020

Разбивка по фракциям

ВАЖНО! Данный пример использует Javascript!
Использование Javascript потенциально может "сломать" другие сообщения, использующие тот же шаблон. В связи с этим крайне рекомендуется использовать уникальные названия при использовании данного примера.

Перед использованием замените 90011337 в шаблоне на своё число.
При использовании нескольких шаблонов в одном сообщении выбирайте для них разные числа.

В этом примере понадобится много всего менять. Я постарался всё объяснить, но у вас могут остаться вопросы по применению; вы их можете задавать здесь.

Описание
Полоска состоит из блоков, по одному на каждую фракцию. Полный код блока приведён ниже:

<div id="90011337_ld" style="position: relative; flex-grow: 2; flex-shrink: 0; flex-basis: 0; background-color: #00137F; padding: 0.3rem; transition: background-color 0.3s linear; display: flex; flex-direction: column; justify-content: center"
onmouseover="document.getElementById('90011337_ld_tooltip').style.display = 'block'; document.getElementById('90011337_ld').style.backgroundColor = 'green';"
onmouseout="document.getElementById('90011337_ld_tooltip').style.display = 'none'; document.getElementById('90011337_ld').style.backgroundColor = '#00137F';">
<p style="color: white; text-align: center; margin: 0px">Либеральные демократы</p>
<div id="90011337_ld_tooltip" style="display: none; position: absolute; width: 240px; left: calc(50% - 120px); top: 2rem; padding: 10px; background-color: white; box-shadow: 0 0 10px black; z-index: 4">
[/PARSEHTML]
[CENTER]Численность: [B]2[/B][/CENTER]

@Matthieu
@Fredrik Mälaren[PARSEHTML]
</div></div>

Жирным выделены части кода, которые потребуется изменить.

ld - уникальный идентификатор фракции. При использовании придумайте короткое обозначение для фракции и подставьте его вместо ld.
2 - численность фракции.
#00137F - цвет, который будет использоваться в полоске для фракции. Смените на соответствующий.
Либеральные демократы - название фракции. Удалите, если оно не влезает в полоску.
@Matthieu и @Fredrik Mälaren - члены фракции.

Код:

[PARSEHTML]<div style="display: flex; width: 100%; min-height: 2rem; flex-direction: row">



<div id="90011337_ld" style="position: relative; flex-grow: 2; flex-shrink: 0; flex-basis: 0; background-color: #00137F; padding: 0.3rem; transition: background-color 0.3s linear; display: flex; flex-direction: column; justify-content: center"
onmouseover="document.getElementById('90011337_ld_tooltip').style.display = 'block'; document.getElementById('90011337_ld').style.backgroundColor = 'green';"
onmouseout="document.getElementById('90011337_ld_tooltip').style.display = 'none'; document.getElementById('90011337_ld').style.backgroundColor = '#00137F';">
<p style="color: white; text-align: center; margin: 0px">Либеральные демократы</p>
<div id="90011337_ld_tooltip" style="display: none; position: absolute; width: 240px; left: calc(50% - 120px); top: 2rem; padding: 10px; background-color: white; box-shadow: 0 0 10px black; z-index: 4">
[/PARSEHTML][CENTER]Численность: [B]2[/B][/CENTER]

[USER=8]Matthieu[/USER]
[USER=2]Fredrik Mälaren[/USER][PARSEHTML]
</div></div>


<div id="90011337_com" style="position: relative; flex-grow: 1; flex-shrink: 0; flex-basis: 0; background-color: #7F1300; padding: 0.3rem; transition: background-color 0.3s linear; display: flex; flex-direction: column; justify-content: center"
onmouseover="document.getElementById('90011337_com_tooltip').style.display = 'block'; document.getElementById('90011337_com').style.backgroundColor = 'green'"
onmouseout="document.getElementById('90011337_com_tooltip').style.display = 'none'; document.getElementById('90011337_com').style.backgroundColor = '#7F1300'">
<p style="color: white; text-align: center; margin: 0px">Трудовики</p>
<div id="90011337_com_tooltip" style="display: none; position: absolute; width: 240px; left: calc(50% - 120px); top: 2rem; padding: 10px; background-color: white; box-shadow: 0 0 10px black; z-index: 4">
[/PARSEHTML][CENTER]Численность: [B]1[/B][/CENTER]

[USER=180]Axel Mälaren[/USER][PARSEHTML]
</div></div>


<div id="90011337_ind" style="position: relative; flex-grow: 1; flex-shrink: 0; flex-basis: 0; background-color: #808080; padding: 0.3rem; transition: background-color 0.3s linear; display: flex; flex-direction: column; justify-content: center"
onmouseover="document.getElementById('90011337_ind_tooltip').style.display = 'block'; document.getElementById('90011337_ind').style.backgroundColor = 'green'"
onmouseout="document.getElementById('90011337_ind_tooltip').style.display = 'none'; document.getElementById('90011337_ind').style.backgroundColor = '#808080'">
<p style="color: white; text-align: center; margin: 0px">Независимые</p>
<div id="90011337_ind_tooltip" style="display: none; position: absolute; width: 240px; left: calc(50% - 120px); top: 2rem; padding: 10px; background-color: white; box-shadow: 0 0 10px black; z-index: 4">
[/PARSEHTML][CENTER]Численность: [B]1[/B][/CENTER]

[USER=3]Пал Сергеич[/USER][PARSEHTML]
</div></div>



</div>[/PARSEHTML]

Matthieu · 7 Апр 2020

Шикарно!

Технические полезности

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

Защищаю вас за ваши налоги

Защищаю вас за ваши налоги

‮тобAGEM

‮тобAGEM

Гражданин войны

Гражданин войны

‮тобAGEM

‮тобAGEM

Гражданин войны

Гражданин войны

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM

‮тобAGEM