Смайлики под формой ответа

Сообщений 1 страница 4 из 4

Поделиться1Вчера 21:12:51

Автор: ACT3255
Заслуженный
Зарегистрирован: Пт, 7 Ноя 2014
Сообщений: 3124
Уважение: +1723
Позитив: +2415
Последний визит:
Сегодня 09:58:59

Здравствуйте.
Помогите перенести смайлики под поле ввода текста в форме ответа.

Хочется эти смайлы, которые справа, перенести в одну или две строки под формой ответа.
А то в таком виде, в моб. стиле они нормального размера, а вот само поле ввода текста очень узкое.
Стоит такой скрипт:

Код:

<!-- Смайлики -->
<script type="text/javascript">
<!--
// Copyright 2009 SiteNull.ru
var forsm = document.getElementById("main-reply");
var smilies = new Array(
'https://forumstatic.ru/files/0014/74/cb/26501.gif',
'https://forumstatic.ru/files/0014/74/cb/95652.gif',
'https://forumstatic.ru/files/0014/74/cb/69827.gif',
'https://forumstatic.ru/files/0014/74/cb/51886.gif',
'https://forumstatic.ru/files/0014/74/cb/87766.gif',
'https://forumstatic.ru/files/0014/74/cb/66126.gif',
'https://forumstatic.ru/files/0014/74/cb/19637.gif',
'https://forumstatic.ru/files/0014/74/cb/62852.gif',
'https://forumstatic.ru/files/0014/74/cb/69650.gif',
'https://forumstatic.ru/files/0014/74/cb/85689.gif',
'https://forumstatic.ru/files/0014/74/cb/50678.gif',
'https://forumstatic.ru/files/0014/74/cb/55129.gif',
'https://forumstatic.ru/files/0014/74/cb/59202.gif',
'https://forumstatic.ru/files/0014/74/cb/69532.gif',
'https://forumstatic.ru/files/0014/74/cb/50114.gif',
'https://forumstatic.ru/files/0014/74/cb/25406.gif',
'https://forumstatic.ru/files/0014/74/cb/23979.gif',
'https://forumstatic.ru/files/0014/74/cb/78342.gif',
'https://forumstatic.ru/files/0014/74/cb/11040.gif',
'https://forumstatic.ru/files/0014/74/cb/69138.gif',
'https://forumstatic.ru/files/0014/74/cb/17232.gif',
'https://forumstatic.ru/files/0014/74/cb/82943.gif',
'https://forumstatic.ru/files/0014/74/cb/10038.gif',
'https://forumstatic.ru/files/0014/74/cb/85145.gif',
'https://forumstatic.ru/files/0014/74/cb/60712.gif',
'https://forumstatic.ru/files/0014/74/cb/69709.gif',
'https://forumstatic.ru/files/0014/74/cb/23624.gif',
'https://forumstatic.ru/files/0014/74/cb/42354.gif',
'https://forumstatic.ru/files/0014/74/cb/18576.gif',
'https://forumstatic.ru/files/0014/74/cb/68975.gif',
'https://forumstatic.ru/files/0014/74/cb/11768.gif',
'https://forumstatic.ru/files/0014/74/cb/16076.gif'
)
forsm.style.height='180px';
smcontainer = forsm.parentNode;
smcnt = smcontainer.innerHTML;
smcontainer.innerHTML = "<table><tr><td valign='top'>"+smcnt+"</td><td valign='top' width='250'><div id='smcontain' align='center' style='width: 250px; height: 186px; border: 1px solid #CCCCCC; float: right; overflow: auto;'> </div></td></tr></table>";
for(i=0;i<smilies.length;i++){
document.getElementById("smcontain").innerHTML +="<img src='"+smilies[i]+"' alt='Smilies' title='Smilies' onclick='ins(this);' style='cursor: pointer;'>  "
};
function ins(img){
smile('[img]'+img.src+'[/img]');
}
//-->
</script>

Или если легче, как скрыть их в моб. стиле.
Заранее благодарен за ответ.
Форум https://act3255.ru/

Отредактировано ACT3255 (Вчера 21:14:03)

Поделиться2Сегодня 07:00:55

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3963
Уважение: +2891
Позитив: +1016
Пол: Мужской
Последний визит:
Сегодня 07:26:17

ACT3255
Скрипт очень устаревший. Мало того, он оборачивает форму в таблицу, деля её на 2 части (из-за чего в последствии могут скрипты и стили, взаимодействующие с формой, некорректно работать/отображаться). Если нужен универсальный и простой вариант, то лучше переписать. К примеру, взять контейнер со смайлами (за основу):

Код:

<div class="smiles">
<img src="https://upforme.ru/uploads/0007/af/57/16341-1.gif" alt="Smile" onclick="smile(':)')" />
<img src="https://upforme.ru/uploads/0007/af/57/16341-2.gif" alt="Sad" onclick="smile(':(')" />
<img src="https://upforme.ru/uploads/0007/af/57/16341-3.gif" alt="Biggrin" onclick="smile(':biggrin:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16341-4.gif" alt="Cool" onclick="smile(':cool:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16341-5.gif" alt="Cray" onclick="smile(':cray:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16361-3.gif" alt="Crazy" onclick="smile(':crazy:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16361-1.gif" alt="Scratch ones head" onclick="smile(':soh:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16361-4.gif" alt="Scratch ones head" onclick="smile(':yes:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16361-5.gif" alt="Shok" onclick="smile(':shok:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16415-1.gif" alt="Wink" onclick="smile(':wink:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16415-2.gif" alt="Good" onclick="smile(':good:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16415-3.gif" alt="Bad" onclick="smile(':bad:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16415-4.gif" alt="Nea" onclick="smile(':nea:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16415-5.gif" alt="Acute" onclick="smile(':acute:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16417-1.gif" alt="Unknown" onclick="smile(':unknown:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16417-2.gif" alt="Wacko" onclick="smile(':wacko:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16417-4.gif" alt="Rofl" onclick="smile(':rofl:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16417-3.gif" alt="Blush" onclick="smile(':blush:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16417-5.gif" alt="Pardon" onclick="smile(':pardon:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16418-1.gif" alt="Blum" onclick="smile(':blum:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16418-2.gif" alt="Rose" onclick="smile(':rose:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16418-3.gif" alt="Mocking" onclick="smile(':mocking:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16418-5.gif" alt="Yahoo!" onclick="smile(':yahoo:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16418-4.gif" alt="Stena" onclick="smile(':stena:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16419-1.gif" alt="Angel" onclick="smile(':angel:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16419-2.gif" alt="Sorry" onclick="smile(':sorry:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16419-3.gif" alt="Klass" onclick="smile(':klass:')" />
<img src="https://upforme.ru/uploads/0007/af/57/16419-4.gif" alt="Hi!" onclick="smile(':hi:')" />
<img src="https://forumstatic.ru/files/0007/af/57/72436.gif" alt="Mad" onclick="smile(':mad:')" />
<img src="https://forumstatic.ru/files/0007/af/57/96094.gif" alt="Bomb" onclick="smile(':bomb:')" />
<img src="https://forumstatic.ru/files/0007/af/57/66221.gif" alt="Sarcastic" onclick="smile(':sarcastic:')" />
<img src="https://forumstatic.ru/files/0007/af/57/21167.gif" alt="Greeting" onclick="smile(':greeting:')" />
<img src="https://forumstatic.ru/files/0007/af/57/83352.gif" alt="Very Bad" onclick="smile(':vbad:')" />
<img src="https://forumstatic.ru/files/0007/af/57/73132.gif" alt="Mail" onclick="smile(':mail:')" />
</div>

И ниже разместить скрипт, который переносит наш div смайлов, допустим, к элементу tags:

Код:

<script>
const divsmiles = document.querySelector('.smiles'), divtags = document.getElementById('tags');
if(divtags && divsmiles){ divtags.after(divsmiles) }
</script>

Не адаптировал под ваш вариант. Единственное, везде onlick=" ... " заменить на

Код:

onclick="smile('[img]'+this.src+'[/img]')"

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

Код:

<style>
.smiles {
  border: 1px solid #ccc;
  padding: 0.5em;
  margin: 0.5em 0;
}
</style>

Вставлять всё это в Форму ответа.

Добавлено спустя 5 минут 39 секунд:

Ну и под мобильный стиль можно добавить типа такого:

Код:

<style>
@media screen and (max-width: 680px) {
  .smiles {
    overflow: auto;
    height: 50px;
    white-space: nowrap;
  }
}
</style>

Сделав фиксированную высоту и убрав перенос.

Отредактировано Reysler (Сегодня 07:06:40)

Telegram @reysler

Поделиться3Сегодня 07:51:25

Автор: ACT3255
Заслуженный
Зарегистрирован: Пт, 7 Ноя 2014
Сообщений: 3124
Уважение: +1723
Позитив: +2415
Последний визит:
Сегодня 09:58:59

Reysler
Спасибо огромное!!!
Все работает как надо!!!

Поделиться4Сегодня 09:59:55

Автор: ACT3255
Заслуженный
Зарегистрирован: Пт, 7 Ноя 2014
Сообщений: 3124
Уважение: +1723
Позитив: +2415
Последний визит:
Сегодня 09:58:59

ACT3255 написал(а):

Reysler
Спасибо огромное!!!
Все работает как надо!!!

Все настроил, выровнял, заменил смайлики.

HTML-поле под формой ответа	Справочная	Вс, 5 Ноя 2006
Смайлики в форме ответа	Корзина	Ср, 26 Мар 2008
Изменения в форме ответа	Информация сервиса	Сб, 3 Ноя 2012
Проблема в форме ответа	Корзина	Ср, 25 Ноя 2009
Своя картинка в форме ответа	Корзина	Сб, 27 Ноя 2010

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Смайлики под формой ответа

Сообщений 1 страница 4 из 4

Поделиться1Вчера 21:12:51

Поделиться2Сегодня 07:00:55

Поделиться3Сегодня 07:51:25

Поделиться4Сегодня 09:59:55

Похожие темы