Как сделать, чтобы можно было скрыть награды под кнопочкой

Как сделать, чтобы можно было скрыть награды под кнопочкой, но так, чтобы остальная информация о пользователе осталась видимой?
Или разделить - под одной кнопочкой - награды, а под другой - информация.
Вот наподобие этого

Я делал на странице HTML
А в профиль ставил кнопку картинку при клике на которую открывалась страница.
Только надо страницы создавать на каждого у кого есть награды
Если хотите то вот так я делал:

ПА - Пользователи & Группы - Профили
Создаём поле, заполняем таким образом

В выделенное поле ставим это

Код:

[img]http://illiweb.com/fa/empty.gif[/img]

Сохраняем.
Поле готово
Теперь создаём HTML страничку, и вставляем в неё награды таким методом:

Код:

<br/><center><span style="color:#8B4513; font-family:Times New Roman;  font-size:22px;">
Награды пользователя Домовой</span></center><br/>
<img src="ссылка на картинку"> - За что то
<br/><br/>
<img src="ссылка на картинку"> - За вот это
<br/><br/>
<img src="ссылка на картинку"> - Вот за то
<br/><br/>
<img src="ссылка на картинку"> - За красивые глазки
<br/><br/>

Сохраняем.
Затем идём в Пользователи & Группы - Управление пользователями
Выбираем из списка пользователей того для кого создана страничка, жмём на ник, на открывшейся странице находим поле Награды

и в указанное окно вставляем следующее

Код:

[url=ССЫЛКА НА СТРАНИЧКУ НАГРАД ДАННОГО ЮЗЕРА][img]http://savepic.ru/1704897.png[/img][/url]

(кнопку можно нарисовать свою)
После всего этого под аватаром появится картинка кнопка, при клике которой откроется страничка с наградами

Ольга, а какого типа у тебя поле с наградами?)
А то может просто спрятать в спойлер

Просмотреть награды:

и всё =)

Код:

[spoiler=Просмотреть награды][table border="0"][tr][td title="За фигню 1"][img]http://r18.imgfast.net/users/1814/20/07/54/smiles/531788.gif[/img][/td]
[td title="За фигню 2"][img]http://r18.imgfast.net/users/1814/20/07/54/smiles/531788.gif[/img][/td]
[td title="За фигню 3"][img]http://r18.imgfast.net/users/1814/20/07/54/smiles/531788.gif[/img][/td]
[/tr][tr][td title="За фигню 4"][img]http://r18.imgfast.net/users/1814/20/07/54/smiles/531788.gif[/img][/td]
[td title="За фигню 5"][img]http://r18.imgfast.net/users/1814/20/07/54/smiles/531788.gif[/img][/td]
[td title="За фигню 6"][img]http://r18.imgfast.net/users/1814/20/07/54/smiles/531788.gif[/img][/td]
[/tr][/table][/spoiler]

Домовой, мне кажется это не совсем удобным - чтобы посмотреть награды переходить на другую страничку.

darkWoL, Как понять какого типа поле с наградами?
Я сделала в поле награды - табличку, в которую вставляю картинку награды и описание - за что, которое показывается при наведении.

И еще хотелось бы это оформить красивый кнопочкой, под стиль форума - я пробовала поставить кнопочку но она как то криво вставала(

Of пишет:Домовой, мне кажется это не совсем удобным - чтобы посмотреть награды переходить на другую страничку.

А вы считаете удобней когда под аватаром откроется портянка с кучей катринок?
Вам конечно видней.
На мой взгляд гораздо интересней кликнуть по кнопке под аватаром, после чего откроется красиво оформленная страничка с наградами и описанием за что каждая награда дана.
Но повторюсь, это моё мнение.)))))

Домовой, мне больше нравится, как вы выразились, портянка - для этого не надо переходить на другую страницу, а потом, ведь не будете же постоянно открывать этот список наград) - посмотрел, для ознакомления, и закрыл.

Тем более, что технически это сделать можно - как я уже убедилась, единственное, что хотелось бы - несколько доработать этот код.

А чем Вам все же не нравится тот вариант, что darkWoL предложил? Вместо картинок ведь можно вставить все то, что вы пожелаете и Ваша фантазия подскажет.

Просмотреть награды:

Или вот так -

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

Можно так -

Награда 1:

Награда 2:

Награда 3:

Награда 4:

Награда 1:

Награда 2:

Награда 3:

Награда 4:

Of, могу предложить такой способ:

1. Создаете в персональном профиле поле "Награды" - "текстовый блок" с режимом показа "иконка" (вместо иконки подставляете пустой гиф https://illiweb.com/fa/empty.gif) и просмотром в сообщениях. Сохраняете.


2. Через личные профили добавляете каждому пользователю таблицу с наградами, обязательно указав таблице class="awards". Пример:

Код:

[table border="0" class="awards"]
[tr]
[td title="описание 1"][img]http://i56.servimg.com/u/f56/15/82/36/69/apple10.png[/img][/td]
[td title="описание 2"][img]http://i56.servimg.com/u/f56/15/82/36/69/apple10.png[/img][/td]
[td title="описание 3"][img]http://i56.servimg.com/u/f56/15/82/36/69/apple10.png[/img][/td]
[td title="описание 4"][img]http://i56.servimg.com/u/f56/15/82/36/69/apple10.png[/img][/td]
[td title="описание 5"][img]http://i56.servimg.com/u/f56/15/82/36/69/apple10.png[/img][/td]
[/tr]
[/table]

Подробнее о создании таблиц с наградами читайте в туториале: https://help.forum2x2.ru/t35929-topic


2. В CSS добавляете код:

Код:

/* маскировка бокса с наградами */
.awardbox {
display: none;
border: 1px solid #cccccc;
background-color:#fff;
padding: 3px;
margin: 5px 2px;
}
/* кнопка Награды */
.awardopen {
cursor: pointer;
}
/* кнопка Награды при наведении */
.awardopen:hover {
color: red;
}

border и background-color при желании можно как угодно поменять/убрать.



3. В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, награды под кнопкой
Расположение: на всех страницах
Код:

Код:

jQuery(document).ready(function(){

jQuery(".awards").wrap(jQuery('<div class="awardbox"></div>'));
jQuery(".awardbox").before(jQuery('<span class="awardopen">[Награды]</span>'));

jQuery('.awardopen').click(function(){
jQuery(this).parent().children('.awardbox').toggle('normal');
return false;
});

});

Сохраняете.
В результате каждая таблица с наградами окажется обернутой в скрытый блок, который будет плавно разворачиваться/сворачиваться по клику на заголовке [Награды].

Вместо надписи [Награды] в строке

Код:

<span class="awardopen">[Награды]</span>[Награды]</a>

можно подставить кнопку, например
Код кнопки будет выглядеть так:

Код:

<img src="адрес картинки" alt="Награды" title="Награды" class="awardopen" />

т.е. перепишете одну строку кода, чтобы вместо

Код:

jQuery(".awardbox").before(jQuery('<span class="awardopen">[Награды]</span>'));

было

Код:

jQuery(".awardbox").before(jQuery('<img src="http://i27.servimg.com/u/f27/14/67/67/89/untitl10.png" alt="Награды" title="Награды" class="awardopen" />'));

Сохраните.

Работает на всех движках.

Оо! Только из за одной плавности открытия поля с наградами уже стоит так сделать. Не говоря уж обо всем остальном оформлении этих полей.

Здорово.

Изобретатель, спасибо!
Кстати: если скопировать таблицу в пост, эффект будет тот же.

Ну таблица же в ВВ кодах.

Dana Domirani, а никак нельзя сделать что бы окно открывалось как бы отдельно, вот как здесь открывается профиль?
То есть у вас окно открываясь как бы отодвигает всё что ниже, а надо не зависимо
Надеюсь поймёте)))

Dana Domirani, спасибо большое - это как раз то ,что я хотела.
Буду ставить!

Of, пожалуйста! Рада была помочь!

Домовой, сделала.
Надо будет подправить строку:

Код:

jQuery(".awards").wrap(jQuery('<div class="awardbox"></div>'));

на

Код:

jQuery(".awards").wrap(jQuery('<div class="prfc"></div>')).wrap(jQuery('<div class="awardbox"></div>'));

и в CSS добавить:

Код:

.awardbox {
display: none;
border: 1px solid #cccccc;
background-color:#fff;
padding: 3px;
margin: 5px 2px;
width: 300px; /* укажите приблизительную ширину таблицы */
}

.prfc {
position: relative;
height: 30px;
width: 120px; /* укажите приблизительную ширину кнопки */
}

В свойство width подставьте необходимые размеры .

Для BB2 стоит указать не просто .prfc {, а .post .prfc {

Dana Domirani пишет:
Домовой, сделала.

Спасибо солнце

Всегда пожалуйста

Dana Domirani, еще 2 вопроса возникло.  

Что означает

2. Через личные профили добавляете каждому пользователю таблицу с наградами, обязательно указав таблице class="awards"

У меня сейчас награды сделаны в виде таблицы - теперь мне надо во всех профилях пользователей прописать class="awards" ?

И еще, а можно сделать по тому принципу, как вы написали для Домового - чтобы список наград открывался в маленьком окошке, но не по клику мышкой на кнопочку, а просто при наведении мышки?

У меня сейчас награды сделаны в виде таблицы - теперь мне надо во всех профилях пользователей прописать class="awards" ?

Да, это обязательное условие - скрипт реагирует непосредственно на класс объекта.

Что касается появления при наведении - как раз сейчас у себя на форуме эксперементировала - очень раздражает, когда случайно под мышью вылетают окошки. По клику удобнее.

Dana Domirani, ага, поняла.

раз раздражает - то не надо.

Dana Domirani, у меня проблема с отображением в хроме.
Вот посмотрите
ЗДЕСЬ
и
ЗДЕСЬ
с хрома.

Когда профиль "дергается"? Думаю, если добавить в awardbox width - должно решить проблему. Сейчас проверю.

Dana Domirani пишет:Когда профиль "дергается"? Думаю, если добавить в prfcont width - должно решить проблему. Сейчас проверю.

Дело в том что у вас на тестовике такое не наблюдаю

И до кучи ещё вопрос.
В punBB всё нормально, но всплывающее окно остаётся в пределах профиля.
Можно что то сделать что бы он было независимо от поля профиля.
Награды обрезаются когда картинок много.
Посмотрите
ЗДЕСЬ

Dana Domirani пишет:Когда профиль "дергается"? Думаю, если добавить в prfcont width - должно решить проблему. Сейчас проверю.

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

.awardbox {
display: none;
border: 1px solid #cccccc;
background-color:#fff;
padding: 3px;
margin: 5px 2px;
width: 300px; /* приблизительная ширина таблицы */
}

.prfc {
position: relative;
height: 30px;
width: 120px; /* ширина кнопки */
}

Dana Domirani пишет:
Все правильно, рывки ликвидируются через добавление ширины для кнопки и разворачивающегося блока.

Спасибо, теперь всё нормально.))
Но осталась проблема в punBB

Домовой пишет:И до кучи ещё вопрос.
В punBB всё нормально, но всплывающее окно остаётся в пределах профиля.
Можно что то сделать что бы он было независимо от поля профиля.
Награды обрезаются когда картинок много.
Посмотрите
ЗДЕСЬ