CabinetAdmin, приветствую!

Использование BBCode

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

[pswdspoil={SIMPLETEXT}]{TEXT}[/pswdspoil]
Замена HTML

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

      <div style="margin:20px; margin-top:5px">
    <div class="smallfont" style="margin-bottom:2px">
    <b>Spoiler</b>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="password=prompt('Please enter password to view this message...',' ');
    if (password=='{SIMPLETEXT}')
    {
    alert('Password Accepted!');
    if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
    {
      this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
      this.innerText = '';
      this.value = 'Hide'; }
    else
    {
      this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
      this.innerText = '';
      this.value = 'Show';
    }
    }
    ">
    </div>
    <div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
    <div style="display: none;">
    {TEXT}
    </div>
    </div>
    </div>   
Подсказка

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

Spoiler с паролем:  [pswdspoil=ПАРОЛЬ]СООБЩЕНИЕ[/pswdspoil]

1 Помогите отладить данный ббкод.
Проблемка маленькая, но мне не понятно как её решить.
Существует отступ в всплывающем окне при вводе пароля. Из-за этого не срабатывает правильный ввод пароля. Для того чтобы пароль срабатывал, необходимо сначала этот пробел удалять, очищая тем самым поле ввода, а затем уже прописывать пароль чтобы он срабатывал.
На скриншоте хорошо видно, что пробел существует, когда открывается окно для ввода.
BBCode - Spoiler с паролем - Screenshot_2021-10-12-01-07-41-825.jpeg
Я пытался разрешить эту проблему на стороне источника данного ббкода. Но ответ жду уже третий месяц, и похоже не дождусь, поскольку администрация онлайн датируется 2017 года и там совершенно нет ни какой оживлённости.

Спойлер очень симпатичный, и для определенных задач очень мне подходит, за исключением одного, пользователи жалуются что он не рабочий, хотя они вводят правильный пароль. Они то не знают что пароль автоматически вставляется после пробела. А каждому объяснить как эксплуатировать такой спойлер, нет ни какой возможности.
Буду очень признателен, если вы укажите на ошибку данного кода, и где именно находится изъян.
Заранее большое спасибо.
Комментарии: 8

CabinetAdmin 12 окт 2021, 17:12 Сообщение

Вся проблема кроется вот здесь:

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

password=prompt('Please enter password to view this message...',' ');
пробел между ' ' добавляет его в диалоговое окно.


С вашего позволения могу предложить замену с небольшими косметическими правками.

Первый вариант. Просто исправленный:

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

<div style="margin:20px;margin-top:5px">
	<div class="smallfont" style="margin-bottom:2px">
		<b>Spoiler</b>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0;padding:0;" onclick="
		password=prompt('Please enter password to view this message...','');
		if (password=='{SIMPLETEXT}')
		{
			alert('Password Accepted!');
			if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
			{
				this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
				this.innerText = '';
				this.value = 'Hide'; }
			else
			{
				this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
				this.innerText = '';
				this.value = 'Show';
			}
		}
		">
	</div>
	<div class="alt2" style="margin:0;padding:6px;border:1px inset;">
		<div style="display: none;">{TEXT}</div>
	</div>
</div>

Второй вариант. Запрос пароля только при открытии спойлера (что как бы более логично):

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

<div style="margin:20px;margin-top:5px">
	<div class="smallfont" style="margin-bottom:2px">
		<b>Spoiler</b>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0;padding:0;" onclick="
		if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
		{
			password=prompt('Please enter password to view this message...','');
			if (password=='{SIMPLETEXT}')
			{
				alert('Password Accepted!');
				this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
				this.innerText = '';
				this.value = 'Hide';
			}
		}
		else
		{
			this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
			this.innerText = '';
			this.value = 'Show';
		}
		">
	</div>
	<div class="alt2" style="margin:0;padding:6px;border:1px inset;">
		<div style="display: none;">{TEXT}</div>
	</div>
</div>

Третий вариант. Такой же как и второй, но с выводом сообщения о вводе неправильного пароля:

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

<div style="margin:20px;margin-top:5px">
	<div class="smallfont" style="margin-bottom:2px">
		<b>Spoiler</b>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0;padding:0;" onclick="
		if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
		{
			password=prompt('Please enter password to view this message...','');
			if (password=='{SIMPLETEXT}')
			{
				alert('Password Accepted!');
				this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
				this.innerText = '';
				this.value = 'Hide';
			} else {
				alert('Password Not Accepted!');
			}
		}
		else
		{
			this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
			this.innerText = '';
			this.value = 'Show';
		}
		">
	</div>
	<div class="alt2" style="margin:0;padding:6px;border:1px inset;">
		<div style="display: none;">{TEXT}</div>
	</div>
</div>

Четвёртый вариант. Всё тоже самое что в предыдущем, но без окна с подтверждением правильного ввода пароля:

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

<div style="margin:20px;margin-top:5px">
	<div class="smallfont" style="margin-bottom:2px">
		<b>Spoiler</b>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0;padding:0;" onclick="
		if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
		{
			password=prompt('Please enter password to view this message...','');
			if (password=='{SIMPLETEXT}')
			{
				this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
				this.innerText = '';
				this.value = 'Hide';
			} else {
				alert('Password Not Accepted!');
			}
		}
		else
		{
			this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
			this.innerText = '';
			this.value = 'Show';
		}
		">
	</div>
	<div class="alt2" style="margin:0;padding:6px;border:1px inset;">
		<div style="display: none;">{TEXT}</div>
	</div>
</div>

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

Начивик 12 окт 2021, 19:03 Сообщение

CabinetAdmin, Ухты, как много вариантов, здорово!
Все разумеется перепробую.
Я когда сам ковырял его, интуитивно предполагал, что в этих кавычках кроется проблема. Сколько раз смотрел в эту сторону но не решался трогать. От изначального кода всё поменял по своему вкусу, но так и не попробовал удалить этот лишний пробел. Когда искал в интернете, нашел один форум, но там он оказался аналогичным, видать содрали с первого источника прям как есть с ошибкой. Упоминаний в интернете было всего три где мог найти данный ббкод.
Теперь и у вас есть, только в обвёртке настоящая конфетка. А точнее горсть, на любой вкус.))
Солидарен с вашим мнением о крайнем варианте.
Спасибо большое!
  • 0

Начивик 13 окт 2021, 01:46 Сообщение

CabinetAdmin, В вашем коде есть один нюанс, он отличается от исходника.
Вы убрали пиксели после нолей. Я целый час ломал голову в чем же загвоздка, для того чтобы изменить высоту кнопки. Менял стилистические значения со своего переделанного кода. Но кнопка не менялась в высоте, до тех пор, пока не разглядел, что (рх) у вас отсутствуют. А когда долго смотришь в одно и то же место, особенно в коде, то вообще перестаешь что либо видеть))
В общем вот в этой строчке нужно после нолей, добавить (рх) если кто вдруг вздумает под себя настраивать внешний вид спойлера.
<b>Spoiler</b>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0рх;padding:0рх;" onclick="
В связи с вашим пониманием этого кода, появился вопрос. Честно говоря он появился в то время, когда появился сам код. Можно ли как то сделать так, чтобы в пароль могли вставляется и кириллические символы? Желательно чтобы ещё и с пробелами, ну или хотя бы с нижним подчеркиванием и знаками препинания (точка, запятая и другие знаки) Комбинации сложности пароля (их возможности) увеличились бы. Это была бы МЕГА вещь, а не просто pwspoiler.
  • 0

CabinetAdmin 13 окт 2021, 16:28 Сообщение

Ну да, каюсь, есть такая привычка... Если нет нужды в правке и код уже является итоговым вариантом удаляю ненужные символы, такие как пробелы и рх после нулевых значений.

Добавление русских букв вам не даёт лексема {SIMPLETEXT}, можно заменить её на {TEXT1}, а {TEXT} на {TEXT2} и в использовании и в замене bbcode. В таком варианте можно целые поэмы в пароль засунуть:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Начивик 13 окт 2021, 19:39 Сообщение

CabinetAdmin, Спасибо за русские символы.

1 Вопрос о еще одном спойлере. О создании такого ВВкода спойлера.
Наверно это не спойлер, а всплывашка, или ещё как-то называется, что-то выдвижное.
Пример внешности: (рекламу убрал как мог, извиняюсь если намусорил)
BBCode - Spoiler с паролем - ожигова всплывашка.png
В самом низу страницы, (в футере) там у них реклама размещается, но можно и для других целей использовать.
https://slovarozhegova.ru/
Например на странице картинка на весь экран, а внизу будет вот такая всплывашка с информацией о картинке, или возможно навигация, да все что угодно. Такую штуку можно обернуть в ВВкод ?
Как я понял там ява_скрипт, могу ошибаться. Попытался вытащить от туда кусок чтобы посмотреть будет ли работать, у меня ни чего не вышло, похоже скрипт.
Интересный мог бы получится ббкод. (где применить такой, вариантов масса)
  • 0

CabinetAdmin 13 окт 2021, 20:28 Сообщение

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

Начивик 14 окт 2021, 01:36 Сообщение

CabinetAdmin, странно :pardon:

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

Должна во всю ширину экрана (плашкой) появиться реклама. Она отображается в любом месте страницы при прокрутке, а когда стр. до конца прокручиваешь, она прилепляется к нижней части экрана. У неё есть слева кнопка стрелка ( свернуть) как на скриншоте, нажав на которую, плашка сворачивается и остается кнопка со стрелкой, которую снова можно развернуть. Похоже на модальное окно, но толькько это не оно, я первый раз такое вижу. В том то и дело, сайт простенький, а фича такая современная. Возможно это от гугл эдс, я не знаю. Там вообще много рекламы напичкано и сверху и сбоку. Но плашка там должна на всех стр. отображаться. По крайней мере у меня отображалась на виндоус 10. Я попробую на днях если что, может видео какое-то сделать, чтоб в заблуждение не вводить вас. Но на всякий случай попробуйте с компьютера зайти, если до этого заходили с девайса.
  • 0

CabinetAdmin 14 окт 2021, 19:24 Сообщение

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

Похожие темы