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

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

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


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


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

Сообщений 121 страница 140 из 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

121

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

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

<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').click();
};
</script>

0

122

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

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

всё же возник вопрос, потому что таблица не открывается

в итоге это будет выглядеть так? вставляем в доп поле
<a href=#tid=99><img src="ссылка на картинку" onclick="iconRedir(this)"></a>

0

123

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

всё же возник вопрос, потому что таблица не открывается

в итоге это будет выглядеть так? вставляем в доп поле
<a href=#tid=99><img src="ссылка на картинку" onclick="iconRedir(this)"></a>

Ну зачем эти выдумки ???

Нет, ничего не меняем в исходном!
1. <a href=#tid=99></a> Как и было

2. Куда надо(в нужное доп поле) ставим новую иконку<img src="ссылка на картинку" onclick="iconRedir(this)">

3. Скрываем старую(Добавка в код красным):

/*Подвижка иконки*/
img.a-info{
  margin-top: -3px!important;
  margin-left: 173px!important;
  width:30px;  /*Размер иконки*/
  display:none!important;
}

4. В  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').click();
};
</script>

0

124

здравствуйте с:
у нас возникла проблема, перестал работать код, хотя раньше все было отлично

0

125

caramel
1. Откройте форум с данными табличек на чтения для всех, иначе я под гостем не вижу

0

126

Deff
открыла

0

127

caramel
Если Вы посчитали, что я за пятнадцать минут открытия/закрытия успею протестить - Вы просчитались,
У Большинства польвателей эти темы открыты постоянно на чтение гостем, посколь он видеть их может только через таблицу

0

128

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

Если Вы посчитали, что я за пятнадцать минут открытия/закрытия успею протестить - Вы просчитались,
У Большинства польвателей эти темы открыты постоянно на чтение гостем, посколь он видеть их может только через таблицу

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

0

129

Здравствуйте,
решили перейти на данный скрипт, однако у нас проблема, на тестовом форуме все работает, как ставим скрип на наш идет конфликт с платформой, не отображается иконка. Возможно ли это исправить?

0

130

Mimenko
Ccылку на пост с Ником с табличкой, видный гостю, клик по дате в сообщении

0

131

Deff
Помогите пожалуйста поставить свою картинку.
Сделала вроде все по шагам из поста 121, но иконка остается не кликабельной.
http://rabotanasha.rusff.ru/viewtopic.php?id=22#p234

0

132

vicia
1. В поле проверка: добавьте ссылку на ID темы с табличкой согласно Описанию в скрипте
Этому нику http://rabotanasha.rusff.ru/profile.php?id=2

0

133

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

vicia
1. У Вас сейчас отключено в видимости поле в топике Доп. Поле с данными темы с табличкой( минут пять как
<a href=#tid...>

это вернула)

0

134

vicia
Попробуйте заменить кусок для табличек в HTML низ целиком:

Код:
<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
<style type="text/css">
/*Подвижка иконки*/
img.a-info{
  margin-top: -3px!important;
  margin-left: 173px!important;
  width:30px;  /*Размер иконки*/
}
/*Подвижка всплывающей подсказки иконки*/
.tipsy.a-info{
  margin-top: -1px!important;
  margin-left:-6px!important;
  font: normal normal 400 11px/16.5px Verdana;
}
/*сдвиг таблицы*/ .my-tabs{
  margin-top: -360px;  /*сдвиг таблицы вверх от положения иконки*/
  margin-left:60px;  /*сдвиг таблицы вправо от положения иконки*/
}
/*Цвет фона и бордюров таблицы*/
.my-tabs>.tab-a,.my-tabs>span{
  background:#f9f2e4!important;
  border-color: #ddd1be!important;
}
</style>
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/0015/f6/8e/77174.css" />
<script img-data="http://sa.uploads.ru/SoT3N.png" src="http://forumstatic.ru/files/0013/44/56/57946.js" forum="3"></script>
<!--//End//Всплывающая таблица с вкладками, в топике, с инфой о персонаже// -->
<!-- Переадресация клика со своей Иконки для Вспл. таблицы в топике -->
<style>
 .post-author img.a-info{display:none!important;}
 .pa-fld1 img[onclick]{
  cursor:pointer;
  position:relative;z-index:100;
}
</style>
<script type="text/javascript">
function iconRedir(that) {
   var el = $(that).addClass('doubleIcon').parents('.post-author').find('.a-info');
   that.alt = el[0].alt;
   fink9(that);
};

</script>

<!-- HTML во всплывающуюю таблицу-->
<script type="text/javascript">
$(document).ready(function(){
  $('img.doubleIcon,img.a-info,.my-tabs>span').live('click',function(){
   $("li.tab-a .code-box").each(function(){
    if($(this).text().indexOf('<!--HTML-->')!=-1){
    $(this).wrap('<div class="htmldemo"></div>')
    $(this).replaceWith($('.htmldemo').text().split('<!--HTML-->')[1]);}
});});});
</script>
<!-- конец HTML во всплывающуюю таблицу-->

+1

135

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

vicia
Ни наю, у меня работает во всех браузерах

я просто затупила немного, все работает теперь
спасибо Вам огромное
еще маааленький вопросик, возможно ли вставить див класс? в оформление
<a href=#tid=22></a><img src="http://funkyimg.com/i/211NZ.png" onclick="iconRedir(this);">
попробовала вставить так - перестал работать
<a href=#tid=22></a><img class="poloska" src="http://funkyimg.com/i/211NZ.png" onclick="iconRedir(this);">

0

136

vicia
Лучше не вставляйте
Селектор элемента можно и без класса
.pa-fld1 img[onclick]{
Вы класс ставите не на тот элемент! А на a причем убиваете скобку  закрывающую >
====================
Вот такая у Вас чушь в Итоге:

<img class="poloska" ????<a href=#tid=22></a><img src="http://funkyimg.com/i/211NZ.png" onclick="iconRedir(this);">>???

Лучше Вам не трогать ничего, а пояснить, что Вы хотите в итоге сделать ?

0

137

Deff
точно
спасибо еще раз, все поставила - все работает
скрипт Вы написали просто невероятно интересный)
побольше Вам идей и вдохновения на интересные вещи)


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

Лучше Вам не трогать ничего, а пояснить, что Вы хотите в итоге сделать ?

я через структуру прописала положение

.pa-fld1 {position: absolute;
  width: 270px; 
  margin-top: -22px !important;
  margin-left: -141px !important;}

Отредактировано vicia (Ср, 12 Авг 2015 19:01:31)

0

138

Для чисто картинки достаточно
.pa-fld1 img[onclick]{position: absolute;
...
}

Просто если захотите менять размер картинки нужен полный селектор (а не родительский)
Табличка при Вашем стиле позиционируется относительно текущего кликабельного элемента, поэтому при сдвижках
вверх-низ нужно править смещение таблички

Я бы вернул дефолтный файл стиля таблички, и поправил ширину таблы иным макаром, поскольку дефолтный файл стиля автоцентрирует и автонормирует высоту таблицы

0

139

Ребят. Привет всем. У меня вопрос по поводу всплывающей таблички. Я добавил скрипт и все остальное, но тут есть одна загвоздка. Она узкая, и вкладки (уши) пошли в два ряда.  :|  Вот скрин:

http://s6.uploads.ru/t/Tl9XE.png

Расскажите пожалуйста неучу, как поправить это бедствие... Я не могу врубиться, как сделать таблицу шире, и построить вкладки в один ряд. Очень надо!)) Помогите пожалуйста.  :dontknow:

0

140

Каззи
Ссылку на пост с проблемой, видной гостю, (клик по дате сообщения в гостевой теме)

0


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