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

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » Выпадающая Табличка по клику на иконку в профиле топика:


Выпадающая Табличка по клику на иконку в профиле топика:

Сообщений 421 страница 440 из 454

1

Your mafiosi написал(а):

Здравствуйте.
Я хотела бы "запросить" скрипт вот такого плана:

Зарисовки

http://sa.uploads.ru/t/mRNfh.png

● Кружочки с цифрами - скрытия инфы под профилем
● Нажимаем на стрелочку и выпадает вон-та штука.
● Нажимаем - пропадает.
● Желательно, что бы рамки выпадающей таблички были сменимы.
● Каждый контент - поле профиля.

Свернутый текст

Your mafiosi,
1. Ссылку на форум или тестовик куда будет происходить установка  (с уже установленным скриптом с кружочками на скриншоте...)
2. Вы хотите задействовать 4-ре доп поля в этой таблице - у Вас останется только одно - этого не мало ?
3.


Итоговый Скрипт:
Для Ролевых форумов
Всплывающая табличка в топике с дополнительными данными юзера
(это могут быть свои собственные медали, подарки,анкета, расширенные сведения о Персонаже)
http://sa.uploads.ru/KG3PY.png

Скрипт устанавливается в HTML низ, ближе к концу.
Настройки скрипта вынесены с пояснениями, красным в скрипте - ссылка на иконку в минипрофиле (если нужно - меняем на свою) и ID форума с темами для табличек(см описание ниже):

Код установки:

<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
<style type="text/css">
/*Подвижка иконки*/
img.a-info{
  margin-top: -3px!important;
  margin-left: 173px!important;
  width:30px;  /*Размер иконки*/
}
/*Подвижка всплывающей подсказки иконки*/
.tipsy.a-info{
  margin-top: -2px!important;
  margin-left:-6px!important;
  font: normal normal 400 11px/16.5px Verdana;
}
/*сдвиг таблицы*/ .my-tabs{
  margin-top: -73px;  /*сдвиг таблицы вверх от положения иконки*/
  margin-left:255px;  /*сдвиг таблицы вправо от положения иконки*/
}
/*Цвет фона и бордюров таблицы*/
.my-tabs>.tab-a,.my-tabs>span{
  background:#F7F6D2!important;
  border-color: #909D7E!important;
}
</style>

<link rel="stylesheet" type="text/css" href="http://forumfiles.ru/files/0013/44/56/73823.css" />
<script img-data="
http://sa.uploads.ru/SoT3N.png" src="http://forumfiles.ru/files/0013/44/56/57946.js" forum="16"></script>
<!--//End//Всплывающая таблица с вкладками, в топике, с инфой о персонаже// -->

Пояснения:

1. Создайте отдельный форум(раздел) для тем с доп. инфой конкретного юзера во всплывающей табличке. Форум открываем на чтение всем группам(можно скрыть для гостя, хотя и гостю интересно видеть табличку). Форум скрываем с "Главной" скриптом, устанавливаемым в Описание к Форуму - Администрирование- Форумы - нужный форум - редактировать
в Описание к форуму:

<!-- Скрытие форума от юзеров -->
<script id="ThisForum">if(GroupID>2){a=$('#ThisForum');a.parents('tr').hide();a.remove()}</script>

Каждая тема, - для создания таблички конкретному юзеру.
Каждый пост этой темы, начиная с первого - будет вкладкой таблицы, если:
Если он начинается с названия вкладки, вписанное в самое начало сообщение BB-тегом [mark] (маркирующий текст, см расширение под иконкой "треугольничек")
Со следующей строки такого сообщения - идёт наш контент вкладки(одним из таких сообщений может быть и отлаженная игровая анкета пользователя).
Сообщения-Вкладки должны идти друг за другом, начиная с первого поста (первым постом считается тот, который Вы заполняли при создании темы, который отображается на странице под номером 1), кол-во вкладок будет равно колву заголовков в тегах [mark], после нахождения сообщения без тега [mark]  в первой строке, скрипт считает, что вкладки исчерпаны. Скриншот темы и организации первых двух сообщений для вкладок http://sa.uploads.ru/zJNet.png
Т.е. кол-во вкладок и названия в принципе могут быть разные для каждого юзера. Успели набить один-два поста - будут одна или две вкладки.
Максимальное кол-во вкладок наверно - 6, если названия не сильно длинные.

Как устанавливается табличка для конкретного юзера:
2. В любое доп. поле профиля текущего юзера, где разрешён HTML суём ссылку на тему с вкладками таблицы таким кодом:
<a href=#tid=198></a>
!Внутрь этой(якобы) ссылки ничего и никогда не вставляем!!
Где красная цифра 198 - ID темы будущей таблички для текущео юзера.
Определяется при клике на тему в форуме с темами для табличек:
Пример для этой темы, кликаем в форуме "Сведения о участниках" тему "Ник: Волна" смотрим ссылку в адресном окне браузера:
http://timelife.0pk.ru/viewtopic.php?id=198
Цифры после = и есть ID темы, которые и вставляем в ссылку(ссылка юзерам не видна и не портит доп поля профиля, в котором разрешено HTML.

3. Добавлена очистка тем и сообщений этого форума с доп. данными пользователя при использовании поиска, для этого в скрипте добавлен атрибут forum="16", где красным = ID форума, получаемое аналогично ID темы, при клике на форум с главной, считываем в адресном окне браузера:
Пример по клику текущего форума со скриптами:
http://forum.mybb.ru/viewforum.php?id=16
И вставляем в атрибут скрипта forum= вместо красного, - свою цифру.

На вопрос: Как задать шрифт и стиль текста на вкладке:

Оформление вкладок(шрифт и т.д.) таблицы соответствует оформлению в самих сообщениях. Используйте BB-коды в форме ответа


Добавлено 22.01.2015:
Добавлен автоскролл таблички к верхней части экрана и автоскролл во вкладках таблицы при превышении высоты экрана

У поста с таблицей есть собственный селектор: .post.tableAdd


Вариант размещения кликабельной кнопки:
http://qps.ru/o3H4v#p42 (жать на "Информация о персонаже")


Если у Вас фон полотна форума стоит на HTML то при всплывании таблицы может появится сдвиг тела форума
Лекарство:
Запихиваем перед тегом </style> такое указание:
body{padding-right:0!important;}


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

Ставим картинку в нужное поле

<img src="Ссылка на Вашу иконку" onclick="iconRedir(this)">

В  HTML низ(Ниже скрипта)

<!-- Переадресация клика со своей Иконки для Вспл. таблицы в топике -->
<style>.post-author img.a-info{display:none!important}</style>
<script type="text/javascript">
function iconRedir(that) {
    $(that).parents('.post-author').find('.post-img-Sp.a-info')[0].click();
};
</script>


Как добавить в табличку награды пользователя(установленные через Rusff): пост #368
Как подключить HTML в постах к всплывающей табличке: пост #381

0

421

Можно убрать скролл таблицы? Чтобы она появлялась с конкретным отступом от верхнего края страницы, но при этом сама страница никуда не двигалась совсем? Я понимаю, что это сделано для предотвращения залезания за границы, но у меня будут фиксированные ширина-высота и скролл информации уже внутри таблицы, нет необходимости, чтобы страница ездила вверх-вниз. К тому же, это шанс потерять место контента, на котором останавливаешься при чтении.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

422

Dan Frozen
Ни наю... соррь, пока времени нет смотреть... если ток позже удастся...

0

423

Если что, то на этом вот форуме таблица открывается так, как я хочу, без скроллов, но понятия не имею, куда смотреть, чтобы понять, как это реализовано:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

424

Dan Frozen написал(а):

Можно убрать скролл таблицы?

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

Добавлен автоскролл таблички к верхней части экрана и автоскролл во вкладках таблицы при превышении высоты экрана

Вот эта строчка: $('html,body').animate({scrollTop:top},{ 'duration': 400, 'easing':'linear' });
Удаляй.

+1

425

Неспетый написал(а):

Вот эта строчка: $('html,body').animate({scrollTop:top},{ 'duration': 400, 'easing':'linear' });
Удаляй.

Это помогло, но теперь я не знаю, как настроить так, чтобы таблица прямо посреди страницы отображалась. Изменения отступов не помогают. Или я туплю, что вероятнее.
Надо ждать Deff'а, подозреваю, буду ждать.

0

426

Dan Frozen
Пробуйте в HTML верх

<style>
#character{
  position:fixed!important;
  top:20px!important;left:50%!important;
}
body .punbb .modal_wrap {
  position:absolute!important;
  top:0;left:0;right:0;bottom:0;
  margin:auto auto auto auto!important;
}
</style>


собственно в Исходном варианте, без Всех Правок так и было на автомате, пока не убрали скрытие скролла Справо, при всплытии таблы

+1

427

Dan Frozen
Ну я бы посмотрел, но вы же все скрытные такие. Поэтому да, придётся ждать Дэфа.

+1

428

Deff, спаситель, как обычно. Спасибо большое, работает! Подогнала топ и лефт под нужды, завтра протестирую еще, на всякий случай.

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

0

429

Dan Frozen
Ну с left - осторожнее - проверяйте при сокращении окна браузера по ширине (Ибо мой код не сдвигается, при правке может начать смещаться влево-вправо от ширины экрана

Лучше тады задать margin-left: !

0

430

Deff
Проверю завтра обязательно, отпишусь, если что. Спасибо еще раз!

0

431

добра, а можно как-нибудь внутренний контент сделать не таблицей с вкладками, а единым полотном?
чтобы в принципе без названий владок просто можно было заполнить своей информацией?

Отредактировано Keira2787 (Вт, 26 Сен 2017 00:18:18)

0

432

Доброго времени суток. Я может что-то не совсем правильно поняла, но можно ли награды, которые вручены за баллы - перенести в эту табличку. Тот код в посте 368 ничего не дал. Награды так и есть в подписи.
К примеру необходимый профиль - http://lioninthepast.rusff.ru/profile.php?id=12
Скриншот - http://s0.uploads.ru/t/lHkV9.jpg
Заранее благодарю за помощь.

0

433

Dessany
Их нужно переставить из подписи, в профиль

0

434

Keira2787
Ну воткнуть всё в первопост темы, ухо вкладки - скрыть

2-е, Все ухищрения из-за слабого знания вёрстки, ибо кнопки лёгко адаптировать в нужный вид, и передвинуть, и тогда, никакой лишней с помощью HTML в постах не нужно!
Ибо у каждой таблы есть свой селектор, с помощью которого можно настроить вид стандартных элементов  BB-кодами в сообщении в табличке...

0

435

Здравствуйте! Поставила скрипт, пока тестирую, всё работает. Возник такой вопрос: можно ли добавить к табличке с вкладками статичный блок, который не будет меняться при переключении?
http://s4.uploads.ru/xnEGD.png
И второй вопрос: можно ли сделать оформление самой таблички как-то проще, не выдирая кусок кода из описания текстовых блоков?
Форум: http://dragonsempire.mybb.ru/

0

436

Аллинэя
Ссылку на сообщение с табличкой, видное под гостем(клик на дату в сообщении)

Аллинэя написал(а):

И второй вопрос: можно ли сделать оформление самой таблички как-то проще, не выдирая кусок кода из описания текстовых блоков?
Форум: http://dragonsempire.mybb.ru/

Что за кусок кода ? Обведите на скриншоте в теме с Вкладками таблы

Отредактировано Deff (Вт, 24 Окт 2017 20:35:49)

0

437

http://dragonsempire.mybb.ru/viewtopic. … =3#p406194 - пост с табличкой

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

Что за кусок кода ? Обведите на скриншоте в теме с Вкладками таблы

http://s9.uploads.ru/t/IsDRU.png
Имелась в виду рамочка вокруг поста, она задаётся вот этим кодом, насколько я понимаю

Код:
/* формалы */

.naiadframe, div#pun-admain {
box-sizing: border-box;
background:
 url("http://s2.uploads.ru/lO9A6.png") 0% 0% no-repeat,
 url("http://s6.uploads.ru/JDIVf.png") 100% 0% no-repeat,
 url("http://s2.uploads.ru/EA6Dq.png") 0% 100% no-repeat,
 url("http://s7.uploads.ru/0b6OY.png") 100% 100% no-repeat,
 url("http://s7.uploads.ru/Uh0qS.png") 50% 11px no-repeat,

 url("http://s6.uploads.ru/ZMiTC.png") 100% 0% repeat-y,
 url("http://s7.uploads.ru/Fdavt.png") repeat-y,
 url("http://s6.uploads.ru/1ZaYo.png") 0% 100% repeat-x,
 url("http://s2.uploads.ru/RN5It.png") 0% 0% repeat-x,
 url("http://s2.uploads.ru/WZofR.jpg") repeat #988579;
padding: 25px 25px 30px;
box-shadow: rgba(0, 0, 0, 0.7) 0 0 8px;
margin: 0px auto 10px;
min-height: 110px;
min-width: 180px;
}
.category .container, #pun-stats .statscon {
margin-bottom: 0em;
}
div#post-form {
margin-top: 2em;
}
#poll-special, #pun-post .formal, #pun-post .post-body {
margin-bottom: 4em !important
}

Для оформления таблички взяла:

Код:
/* Корневой таб(UL) */
.my-tabs{
 display:block;
 z-index:30000;
 position:absolute;
 max-height:700px;  /*максимальная высота таблички*/
 box-sizing: border-box;
 background:
  url("http://s2.uploads.ru/lO9A6.png") 0% 0% no-repeat,
  url("http://s6.uploads.ru/JDIVf.png") 100% 0% no-repeat,
  url("http://s2.uploads.ru/EA6Dq.png") 0% 100% no-repeat,
  url("http://s7.uploads.ru/0b6OY.png") 100% 100% no-repeat,
  url("http://s7.uploads.ru/Uh0qS.png") 50% 11px no-repeat,

  url("http://s6.uploads.ru/ZMiTC.png") 100% 0% repeat-y,
  url("http://s7.uploads.ru/Fdavt.png") repeat-y,
  url("http://s6.uploads.ru/1ZaYo.png") 0% 100% repeat-x,
  url("http://s2.uploads.ru/RN5It.png") 0% 0% repeat-x,
  url("http://s2.uploads.ru/WZofR.jpg") repeat #988579;
}

Реально это как-то сократить или лучше оставить как есть?

0

438

Аллинэя
Ну нормально (про рамочку)... если раздражает код, попробуйте код для рамки таблички перенести в конец 1-го Окна Стиля, без тегов...
Каждый по своему делает стилистику таблички, на всех не угодишь
Про добавку, ну такой Вариант:

.my-tabs > .tab-a:before{
content: "Какой то текст общий для всех таблиц";
display:block;
max-width:580px;
padding:6px;
border:red solid 1px;
margin-top: 5px;
}


Но проще картинкой!
Тогда так:

.my-tabs > .tab-a:before{
content: url(http://forum.mybb.ru/img/smilies/MyBB/light/cool.gif);
display:block;
max-width:580px;
padding:6px;
border:red solid 1px;
margin-top: 5px;
}

Отредактировано Deff (Вт, 24 Окт 2017 21:19:49)

0

439

Deff
Спасибо, буду иметь в виду

Простите, очень неудачно объяснила  :'(  Можно ли в этот дополнительный блок также подгружать информацию из темы, различную для каждого юзера?
http://sf.uploads.ru/t/pIl48.png

0

440

Аллинэя написал(а):

Можно ли в этот дополнительный блок также подгружать информацию

Нет,
Попробуйте тогда так:

В  HTML верх(Цифры красным идентичны но с разным знаком, саму цифру регулируем:

<style>
/*Подвижка Общего блока*/
table[style="width:122px"]+.quote-box{
margin-top:-56px;
margin-bottom:56px;
}</style>

И дублировать  блок (контент идентичен на всех трёх вкладках), ставим в начало сообщения, за названием вкладки

[table width=122px][/table]
[quote]Тут Контент[/quote]

На каждой из 3-x вкладок таблички(в каждом из трёх постов Темы) юзера

Отредактировано Deff (Ср, 25 Окт 2017 02:29:00)

+1


Вы здесь » Единый форум поддержки » Новые возможности форумов » Выпадающая Табличка по клику на иконку в профиле топика: