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

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

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


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


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

Сообщений 301 страница 320 из 553

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://forumstatic.ru/files/0013/44/56/73823.css" />
<script img-data="
http://sa.uploads.ru/SoT3N.png" src="http://forumstatic.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://mex.su/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

+2

301

Deff
Странно, потому что я с гостя вижу кнопки у пользователя austin, во по этой ссылке user player- кнопки спойлеры, awards - кнопка с таблицей 
http://supremum.mybb.ru/viewtopic.php?id=43#p190

Отредактировано Lex Talionis (Сб, 20 Авг 2016 17:09:07)

0

302

Lex Talionis написал(а):

Странно, потому что я с гостя вижу кнопки у пользователя austin, во по этой ссылке user player- кнопки спойлеры, awards - кнопка с таблицей  http://supremum.mybb.ru/viewtopic.php?id=43#p190
            Отредактировано Lex Talionis (Сегодня 17:09:07)

Сделайте скриншот
У меня так:
http://s0.s0.uploads.ru/8YVAZ.jpg

0

303

Ксать Поля тут не переставлены (
Провел на форуме,
Последний Визит
Активен

0

304

Deff

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

У меня так:

собственно оно так и есть. кнопки наехали друг на друга. это я и хочу исправить.

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

Ксать Поля тут не переставлены ( Провел на форуме,Последний ВизитАктивен

тут да, тут и не стоит картинкой оффлайн-онлайн.

0

305

Lex Talionis написал(а):

собственно оно так и есть. кнопки наехали друг на друга. это я и хочу исправить.

Тыкните стрелкой, на наехавшие кнопки... ибо я их в упор не вижу...
Увидел... Ну хотя бы цветом выделили другим!

0

306

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

Увидел... Ну хотя бы цветом выделили другим!

Оу, я просто не подумал, что их нельзя различить. Наверное, мне очевидна разница, так как я знаю, как они должны выглядеть. Прошу прощения. Только у меня нет возможности другим цветом делать третью иконку

Отредактировано Lex Talionis (Сб, 20 Авг 2016 17:56:19)

0

307

Вариант:
Правка красным в стиле Таблички:

<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
<style type="text/css">
/*Подвижка иконки*/
img.a-info{
  margin-top: -2px!important;
  margin-left: 113px!important;
  width:68px;  /*Размер иконки*/
}

Перед скриптом спойлера под N-кнопок постаьте:

<style type="text/css">
.post-author .post-img-Sp[data=".Sp1"] {
  margin-left:-63px!important;
}
</style>

+1

308

Коды Баннеров всегда ставим в самый низ HTML низ!!

Код:
<div style="position: absolute; margin-top: -50px; margin-left: 10px; width: 850px; height: 40px !important;  overflow-y: auto !important;">
<div id="counters">
<a href="http://coffeebreak.rusff.ru/" target="_blank"> <img src="http://sh.uploads.ru/XjJdw.png" border="0" width="88" height="31" title="Ролевой Каталог CoffeeBreak"></a>
<a href="http://sowlart.artbb.ru/" target="_blank"><img src="http://funkyimg.com/i/UaSi.png" title="SOWL ART" width="88" border="0" height="31"></a>
<a href="http://never-where.diary.ru"><img src="http://static.diary.ru/userdir/6/7/1/4/671413/73075332.jpg" alt="Реклама текстовых ролевых игр" title="Реклама текстовых ролевых игр" border="0" height="31px;" width="88px;" /></a>
 <a href="http://rewind.mybb.ru/" target=_blank><img src="http://i1355.photobucket.com/albums/q711/mydearsixsmith/Untitled-3_zpsfphiwern.gif" border="0" title="RE:WIND" width=88 height=31></a>
 <a href="http://carperetractum.rolka.su/" target=_blank> <img src="http://www.pichome.ru/images/2015/05/07/An2wg1.gif"border="0" title="Harry Potter: Carpe Retractum"> 
</a>
 <a href="http://rise.rusff.ru" target="_blank"><img src="http://ipic.su/gxZO.png" title="1995: Voldemort rises! Can you believe in that?"border="0"width="88" height="31"></a>
 <a href="http://lexington.f-rpg.ru/"  target="_blank"><img src='http://sa.uploads.ru/vwPm6.png' border=0 title="Lexington. Infinity Death" alt="Lexington" /></a>
 <a href="http://fabulousdreams.rusff.ru/" target="blank"><img src="http://funkyimg.com/i/23A1t.gif"></a>
 <a target="_blank" href="http://hexhell.ru/" title="hexhell: some legends are told'"><img src="http://funkyimg.com/i/YQiP.gif" border="0"></a>
   <a target="_blank" href="http://law.rusff.ru/" title="the Leapman's law"><img src="http://forumstatic.ru/files/0015/fa/f1/45256.gif" border="0"></a>
 <a href="http://hymnsoforpheus.rusff.ru//" target="_blank"><img src="http://s3.uploads.ru/wYZTV.gif"></a>
<a href="http://lokis.rolka.su/" target="_blank"><img src="http://s2.uploads.ru/t/Y7Vth.gif" title="Loki`s army"></a>
<a href="http://starcross.rusff.ru/" target="_blank"><img src="http://funkyimg.com/i/25Siv.gif" title="STARCROSS" border="0" width="88" height="31"></a>
<a href="http://bombardo.rusff.ru/"><img src="http://savepic.net/6530691.gif" title="Harry Potter and the Half-Blood Prince"></a>
<a href="http://ultimaratio.rusff.ru/"target=_blank><img src="http://savepic.ru/3988183m.png"alt= "FRPG Hogwarts: Ultima Ratio"></a>
<a href="http://semperfidelis.f-rpg.ru/" target=_blank> <img src="http://f6.s.qip.ru/169kK9WyQ.jpg"border="0" title="Harry Potter: Semper Fidelis"> 
</a>
<a href="http://phoenixlament.f-rpg.ru/" target="_blank"><img src="http://funkyimg.com/i/21YDh.gif" width="88px" height="31px" title="HOGWARTS. PHOENIX LAMENT"></a>
<a href="http://greendoor.magicrpg.ru/"><img src="http://forumstatic.ru/files/0015/07/19/59803.png" alt="the Green Door RPG" width="88" height="31"></a>
  <a href="http://actus.rusff.ru/" target="_blank"><img src="http://i.imgur.com/Mke25DW.gif" title="ACTUS FIDEI" border="0" width="88" height="31"></a>
  <a href="http://docnight.rusff.ru/" target="_blank"><img title="Doctor Who: Night terror" src="http://s6.uploads.ru/t/QDk13.gif"></a>
<a href="http://52shadesofdc.rusff.ru/" title="52 Shades Of DC" target="_blank"><img src="http://forumstatic.ru/files/0017/1d/fd/91392.gif" width="88px" height="31px"></a>
  <a href="http://nomercy.rusff.ru"target=_blank><img src="http://funkyimg.com/i/25YUQ.gif" title="Marauders. No Mercy"></a>
 <a href="http://tnw.rusff.ru/" target=_blank><img src="http://i10.pixs.ru/storage/6/9/4/mal2jpg_4720830_20011694.jpg"title="Come to Twilight Between! We are waiting for you!" border="0" width="88" height="31"></a>
 <a href="http://eternaltravel.ru/" target=_blank> <img src="http://savepic.net/7538488.gif"border="0"alt="Бесконечное путешествие" width=88 height=31></a>
 <a href="http://altera.rusff.ru" target="_blank"><img src="http://s6.uploads.ru/ZSkxz.gif" title="THG: Altera"></a>
 <a href='http://expelliarmus.rusff.ru/' target='_blank' title='Гарри Поттер и Вторая война '><img src='http://forumstatic.ru/files/0017/2e/b2/52941.gif' border='0' width='88' height='30'></a>
<a href="http://wearethefuture.rusff.ru/" title="REVOLT"><img src="http://savepic.net/7713909m.gif"></a>
<a href="http://magictime.f-rpg.ru"><img title="HP'1977 | MAGIC TIME" src="http://s6.uploads.ru/4wO80.gif" alt="HP'1977 | MAGIC TIME" width="88" height="31" /></a>
 <a href="http://anotherworldnaruto.rolka.su//"><img title="Naruto: Another World" src="http://i9.pixs.ru/storage/1/0/9/animation1_1041630_21838109.gif" border="0" /></a>
<a href="http://mortalinstruments.roleforum.ru/" target=_blank><img src="http://forumstatic.ru/files/0017/6b/6c/85054.gif" width=88 height=31 title="MORTAL INSTRUMENTS. Vincit omnia veritas. Литературная ролевая игра по мотивам книг Кассандры Клер." border=0></a>
<a href="http://blackburns.rusff.ru" target=_blank><img src="http://i.imgur.com/kyDnof4.gif" border="0" title="Blackburn: God Bless You" width="88" height="31"></a>
<a href="http://cardshouse.rusff.ru"_blank" title="House of Cards"><img src="http://s6.uploads.ru/jbxKD.png" alt="MAGIC SCHOOL" border="0" width="88" height="31"></a>
<a href='http://smokeandmirrors.rusff.ru/' target='_blank' title='HP: Smoke and Mirrors'><img src='http://s7.uploads.ru/lkGnz.gif' border='0' width='88' height='30'></a>
<a href="http://thelastspell.rusff.ru/"target=_blank><img src="http://s3.uploads.ru/r0fmR.gif" alt= "THE LAST SPELL" height="31" width="88" border="0"></a>
<a href="http://hpmoment.rolbb.ru" target="_blank" ><img src="http://savepic.ru/9966319.png" border="0" alt="Arresto Momentum"></a>
<a href="http://wbd.rusff.ru/"><img src="http://s3.uploads.ru/Kb2V8.gif" border="0" title="we're burning down"></a>
<a href="http://ansion.rusff.ru/" target="_blank"><img src="http://se.uploads.ru/4bN57.gif"alt="ANSION" /></a>
</div>
</div>

0

309

Deff
Ооо, прекрасно поместился. Благодарю!!!

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

Коды Баннеров всегда ставим в самый низ HTML низ!!

О-оу. Сделано..

0

310

Lex Talionis написал(а):

Оу, я просто не подумал, что их нельзя различить. Наверное, мне очевидна разница, так как я знаю, как они должны выглядеть. Прошу прощения. Только у меня нет возможности другим цветом делать третью иконку

Простейший Вариант, если Текстом - набить в теме нужным цветом и шрифтом и размером все три в одну строку, сделать скриншот и разрезать

0

311

всё установил, во многом разобрался; однако есть вопрос про визуальное оформление. в кодах еще не особо шарю, поэтому решил спросить.
можно ли сделать вкладки с левой стороны, а не сверху?

0

312

king size
Ссылку на пост с табличкой, видной гостю, клик по дате в сообщении (проверьте под гостем

0

313

Deff
http://designtest.spybb.ru/viewtopic.php?id=16#p115 (на кривую белую кнопку под аватаром)
то есть, как менять цвета/размеры/шрифты понял, а как сделать уши справа/слева, например?:с

Отредактировано king size (Сб, 3 Сен 2016 19:22:18)

+1

314

king size
Попробуйте к стилю таблички добавить красным

<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
<style type="text/css">
/*Подвижка иконки*/
img.a-info{
  margin-top: -5px!important;
  margin-left: 173px!important;
  width:20px;  /*Размер иконки*/
}
/*Подвижка всплывающей подсказки иконки*/
.tipsy.a-info{
  margin-top: -1px!important;
  margin-left:-6px!important;
  font: normal normal 400 11px/16.5px georgia;
}
/*сдвиг таблицы*/ .my-tabs{
  margin-top: -100px;  /*сдвиг таблицы вверх от положения иконки*/
  margin-left: 200px;  /*сдвиг таблицы вправо от положения иконки*/
}
/*Цвет фона и бордюров таблицы*/
.my-tabs>.tab-a,.my-tabs>span{
background-color: #;
background-image: url("http://sd.uploads.ru/G6Pv8.png");
  border-color: #95999a!important;
}
.my-tabs>span{
  clear:both;
}
body .my-tabs > img.close {
margin: -75px -35px 75px 0px !important;
}
li.tab-a{
  margin-left:105px;
  margin-top:0px;
  max-width:500px;
}

</style>

+1

315

Deff
благодарствую премного!
пойду теперь дальше ковыряться в коде, добиваясь желаемого.

0

316

пролистала всю тему, но так и не нашла ответа хд Выпадающая Табличка по клику на иконку в профиле топика: - можно ли также настроить для [html][/html] ?)

+1

317

бланш написал(а):

пролистала всю тему, но так и не нашла ответа хд Выпадающая Табличка по клику на иконку в профиле топика: - можно ли также настроить для [html][/html] ?)

Наверно пока нет, чичас скрипт посмотрю... мож удастся выдать новый код(а старый код HTML вродь с новым не кофликтит)

0

318

Deff
хорошо, жду))

0

319

бланш
Пробуйте такой код(ниже скрипта всплывающей таблички) при неудаче дайте ссылку на пост с таблицей, видной гостю

<script type="text/javascript">
$(document).ready(function(){
  $('img.doubleIcon,img.a-info,.my-tabs>span').live('click',function(){
   $("li.tab-a .post-content:contains('[html]')").each(function(){
   HTMLinPost.parseHTMLinPosts();
});});});
</script>

+1

320

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

бланш
Пробуйте такой код(ниже скрипта всплывающей таблички) при неудаче дайте ссылку на пост с таблицей, видной гостю

0


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