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

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

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


Вы здесь » Единый форум поддержки » Новые возможности форумов » Обновленные награды


Обновленные награды

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

1

Итак, скрипт написан за 3 часа, но он работает :) Итак...
Новая версия наград
И сразу же демонстрация работы:

Разница на лицо, не так ли? Из других плюсов:
- Награды хранятся не в html-низе => меньше места (ну... почти :) )
- Нет возможности ошибки в коде, из-за которой скрипт мог ломаться
- Гораздо красивее
- Награды ставить гораздо легче

Ну, а теперь к настройке скрипта.

Шаг 1.
Создание наград

Как я уже сказал, скрипты хранятся не в html-низ. А в "Полях профиля". Надо же использовать плюшки админа mybb?
1) Создайте поле профиля с именем "Награды" (Только так, иначе скрипт будет некорректно работать в настройках профиля)
2) Заполните его следующим образом (награды можете не копировать):
http://uploads.ru/i/8/3/F/83FJO.png
3) Формат заполнения наград:

Что ставить:

Название награды|Описание

Ссылка на картинку

Пример

Награда 1|Какая-та награда 1

http://www.iconsearch.ru/uploads/icons/3dcartoon/128x128/realone.png

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

awardsn["Ключ"] = new Array("Название", "Ссылка_на_иконку", "Описание")

Важно: не теряйте вертикальную черту (|) между названием и описанием!!! Иначе скрипт будет работать некорректно.
И ещё. Обратите внимание на путь к странице, на которой вы создаёте награды. Он будет следующего вида:

http://Адрес форума/admin_fields.php?edit_field=fld2

Запомните последнюю цифру (выделил зелёным). Она понадобится вам в следующем шаге.

Шаг 2.
Всплывающее окно

Теперь, собственно говоря, основной код:

Код:
<!-- Награды v3.1 by kozhilya -->
<div class="AwardAllWindow" style="display: none"><div class="AwardWindow"><div id="closeBtn"></div>
<h3>Награды пользователя</h3><div id="AwardContent"></div></div></div>
<script>
function GetOuterHTML(el)
{ var Result = '<' + el.localName; for (var i=0; i<el.attributes.length; i++) Result += ' ' + el.attributes[i].nodeName + '="' + el.attributes[i].nodeValue + '"'; Result += '>' + el.innerHTML + '</' + el.localName + '>'; return Result; } 
function OpenAwards(t) { $('div.AwardAllWindow').fadeIn(1000); $('div.AwardWindow div#AwardContent').html($(t).parent().parent().find('div').html()); $('div.AwardWindow h3').html('Награды пользователя <span>'+ $(t).parent().parent().parent().parent().find('li.pa-author a').text()+'</span>'); }
$('div.AwardWindow #closeBtn').click(function() { $('div.AwardAllWindow').fadeOut(1000); });
$('.post li.pa-fld2').each(function() { 
Result = '<table>'; 
$(this).find('img').each(function() { var alt = $(this).attr('alt'); var name = alt.substring(0, alt.indexOf('|')); var desc = alt.substring(alt.indexOf('|')+1); Result += '<tr><td id="title"><strong>'+name+'</strong></td><td id="img">'+GetOuterHTML(this)+'</td><td id="desc">'+desc+'</td></tr>'; }); Result += '</table>'; $(this).html('<span><a href="#" onclick="OpenAwards(this); return false;">Награды</a></span><div style="display: none">'+Result+'</div>'); });
$('#pun-profile fieldset').each(function() { if ($(this).find('legend span').text() == 'Награды') { var h = '<table style="display: inline;">'; $(this).find('p.checkfield').each(function() { var alt = $(this).find('img').attr('alt'); var name = alt.substring(0, alt.indexOf('|')); var desc = alt.substring(alt.indexOf('|')+1); h += '<tr><td><p class="checkfield">' + $(this).html() + '</p></td><td>Награда: <strong>'+name+'</strong><br>Описание: <strong>'+desc+'</strong></td></tr>' }); $(this).find('div.fs-box').html(h); $(this).find('div.fs-box').css({'display':'none'}); $(this).find('legend').after('<span onclick="$(this).parent().find(\'div.fs-box\').toggle(1000);">Выставить награды</span>'); }});
</script>

Вставлять в html-низ. Копирайт не убирать! Если узнаю, что нет нопирайта - потребую установки копирайта или удаления скрипта!
В этом коде найдите li.pa-fld2 и замените последнюю цифру на свою, которую замнили в прошлом пункте.
Если же вы по какой-то причине не запомнили это число - не беда. Поставьте в html-низ следующий код:

<!--Узнать Номер Поля Под Аватаром-->
<script>$(".post-author li").hover(function(){$(this).attr("title",$(this).attr("class"));});</script>

после чего обновите страницу и наведите курсор на слово "Награды" под аватаром любого пользователя. В появившейся надписи будет строка типа pa-fld2. Это число и вставляете.

Шаг 3.
Стиль окошка

Следующий код - это стиль. Вы можете вставить его куда хотите: в "Свой Стиль" или в окна "html-низ" и "html-верх". Но если вы вставляете НЕ в "Свои стили", то этот код надо обрамлять в

Код:
<style> . . . </style>

div.AwardAllWindow {
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  position: fixed; top: 0px; left: 0px;
}
div.AwardWindow {
  z-index: 9999; position: fixed;
  top: 10% !important; left: 50% !important;
  width: 700px; padding: 10px;
  background: #331400;
  margin-left: -350px !important;
  vertical-align: middle;
  border: 1px solid #E3BB55;
  border-radius: 5px;
  color: #E3BB55;
}
div.AwardWindow div#closeBtn {
  cursor: pointer;
  background: url(http://uploads.ru/i/P/A/l/PAlLS.png) no-repeat center;
  width: 16px; height: 16px;
  position: relative;
  top: -5px; left: 690px;
}
div.AwardWindow h3 {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 15px;
  margin-top: -20px;
}
div.AwardWindow div#AwardContent {
  width: auto; height: auto;
  min-height: 100px;
  max-height: 300px !important;
  overflow-y:auto;
}
div.AwardWindow div#AwardContent td#title {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 15px;
  width: 200px;
  text-align: center;
}
div.AwardWindow div#AwardContent td#desc {
  font-size: 10px; 
}
#pun-profile fieldset > span {
  cursor: pointer;
  padding: 5px;
  border: 1px solid black;
  position: relative;
  top: -30px;
  margin-bottom: 10px;
  left: 150px;
  background-color: white;
}

То, что можно изменять самостоятельно, выделено курсивом.
Подробнее о селекторах:
div.AwardWindow - Само окно.
div.AwardWindow div#closeBtn - Кнопка закрытия окошка
div.AwardWindow h3 - Заголовок окна
div.AwardWindow div#AwardContent - Содержимое окошка
div.AwardWindow div#AwardContent td#title - Колонка заголовка
div.AwardWindow div#AwardContent td#desc - Колонка описания
#pun-profile fieldset > span - Кнопка "Выставить награды" в профиле.


Бонус: Кнопка "Выставить награды" при редактировании профиля.
Бонус уже внедрён в коды, представленные выше. Этот бонус особо полезен для тех, у кого много наград и кто активно использует раздел "Дополнительно" для редактировании профиля. Вот как это выглядит:
http://uploads.ru/t/a/R/3/aR3fI.png

Ну, кажется всё! Оставляйте свои пожелания и жалобы, а также прочая, прочая и прочая :)

Отредактировано kozhilya (Ср, 11 Апр 2012 14:52:19)

+9

2

переношу

+1

3

Другой способ определения номера поля профиля:

<!--Узнать Номер Поля Под Аватаром-->
<script>$(".post-author li").hover(function(){$(this).attr("title",$(this).attr("class"));});</script>

HTML-Название поля будет отражаться при наведении курсором
Цифра,(*показано красным, обычно от 1 до 5) на конце названия поля pa-fldN и прописываем в скрипте

0

4

kozhilya
Ксать, может в Доп поле поставить какой спец знак в начале(я не продумывал до конца - но удобно) - чтобы скрипт парсил нужное поле на Автомате ?

И многие хотят иметь два подобных поля - для наград и для Подарков

Отредактировано Deff (Вс, 8 Апр 2012 21:58:30)

+1

5

Deff
Хм... Даже не знаю. Можно попробовать...

А вот для подарков всё делается аналогично. Там просто в нескольких местах надо "Награды" заменить на "Подарки". Точнее, все совпадения заменить...

0

6

kozhilya
Вопрос в том - будет ли работать удвоенный скрипт - и второй - (а можно обойтись одним кодом - дописуя к
примеру
ARR1=[]
arrAWARDS.push(ARR21)
ARR2=[]
arrAWARDS.push(ARR2)

Отредактировано Deff (Вс, 8 Апр 2012 22:21:33)

0

7

офигеть какое медленное срабатывание, при чём фейдаутом и не пахнет (.fadeOut(1000)), окно с "наградами" появляется не плавно, а резко, но секунд через 10 после нажатия пункта Награды,
так же медленно исчезает (секунд через 10) после попытки закрытия безе эффекта фейда
это в браузере Firefox 11
в Хроме эффект фейда есть, но явно не для слабонервных, без плавности, ощущения такие словно кто-то вручную тремя поворотами тумблера меняет видимость окна с "наградами"

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

скрипт написан за 3 часа

во как, поторопился однако ))

0

8

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

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

Romych
А оно в реале так не будет работать, DEMКА то во фрейме, а в ём скрипты работают по тайм-ауту, в отличие от основного окна

Отредактировано Deff (Пн, 9 Апр 2012 03:31:37)

0

9

Romych
Ну, от этого не уйти, я подозреваю  :dontknow: В принципе, на одном форуме (с моей подачки) этот скрипт стоит. Вот он. Там тоже есть такая проблема, но мне трудно судить о масштабах, сидя с нетбуком.

Если честно, я пока без идей, как это исправить. На досуге посмотрю, куда он там роет...

0

10

kozhilya c плавным разворотом табличек - всегда проблемы,(При развороте таблы брауз Выполняет массу проверок и операций)
Проще весь блок развернуть за сценой - упрозрачнить и плавную анимацию по прозрачности:

у блока прописать opacity:0: и развернуть  display:block;  (Это одна операция

затем  чисто пользовательскую анимацию  .animate({opacity:1.0},1000)

Отредактировано Deff (Пн, 9 Апр 2012 10:32:02)

0

11

Deff
Я попробовал на пробнике заменить .hide(1000) на .animate({opacity:0.0},1000) и .toggle(1000) на .animate({opacity:1.0},1000)
Но теперь вообще 0 реакции на нажатие :dontknow:

0

12

kozhilya Да не - у мну всё получилось - но все так ж дергаецо - втут пробовал

http://tlkthebeginning.mybb.ru/viewtopi … =5#p255564

(Мож там скриптов навернуто ? Проще на чистом тестовике наверное..

0

13

Deff
Попробовал на пробнике. У меня 0 реакции... Мб я что-то не так делаю, посмотри:

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

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

0

14

kozhilya

Свернутый текст
Код:
<!---------------------------------------------------------------------------
                    Скрипт наград. Version 3.0 by kozhilya 
----------------------------------------------------------------------------->
<style>
div.AwardWindow {
  background-color: rgba(0,0,0,0.5);
  z-index: 9999; position: fixed;
  top: 10% !important; left: 50% !important;
  width: 700px; padding: 10px; 
  background: #331400;
  margin-left: -350px !important; 
  vertical-align: middle; 
  border: 1px solid #E3BB55;
  border-radius: 5px; 
  box-shadow: 0 0 1000px 1000px rgba(0,0,0,0.5); 
  color: #E3BB55;
}
div.AwardWindow div#closeBtn { 
  cursor: pointer; 
  background: url(http://www.iconsearch.ru/uploads/icons/humano2/16x16/window-close.png) no-repeat center;
  width: 16px; height: 16px;
  position: relative;
  top: -5px; left: 690px;
}
div.AwardWindow h3 { 
  font-variant: small-caps; font-weight: normal; 
  font-size: 15px; margin-top: -20px; 
}
div.AwardWindow h3 { 
  font-weight: bold;
}
div.AwardWindow div#AwardContent { 
  text-align: center; 
  width: auto; height: auto; 
  min-height: 100px; max-height: 300px !important; 
  overflow-y:auto;
}
div.AwardWindow div#AwardContent td#title { 
  font-variant: small-caps;
  font-weight: bold; 
  font-size: 15px;
  width: 200px;
  text-align: center;
}
div.AwardWindow div#AwardContent td#desc { 
  font-size: 10px;  
}
#pun-profile fieldset > span {
  cursor: pointer;
  padding: 5px;
  border: 1px solid black;
  position: relative;
  top: -30px;
  margin-bottom: 10px;
  left: 150px;
  background-color: white;
}
</style>
<div class="AwardWindow" style="display: none"><div id="closeBtn"></div>
<h3>Награды пользователя</h3><div id="AwardContent"></div></div>
<script>
function GetAwardsCode(el, style, name)
{ img = el.children; Result = '<table>'; 
for(i in img) { if (img[i].tagName == "IMG") { var alt = img[i].alt; var name = alt.substring(0, alt.indexOf('|')); var desc = alt.substring(alt.indexOf('|')+1); Result += '<tr><td id="title"><strong>'+name+'</strong></td id="img"><td>'+img[i].outerHTML+'</td><td id="desc">'+desc+'</td></tr>'; }
} Result += '</table>'; Result = '<span><a href="#" onclick="OpenAwards(this); return false;">Награды</a></span><div style="display: none">'+Result+'</div>'; return Result; }
function OpenAwards(el) {$('div.AwardWindow').css({'opacity':'0.0','display':'block'}); $('div.AwardWindow div#AwardContent').html(el.parentNode.parentNode.children[1].innerHTML); $('div.AwardWindow h3').html('Награды пользователя <span>'+ el.parentNode.parentNode.parentNode.children[0].children[1].innerText+'</span>');  $('div.AwardWindow').animate({opacity:1.0},570);}
$('div.AwardWindow #closeBtn').click(function() {$('div.AwardWindow').fadeOut(770);})
$('.post li.pa-fld2').each(function() { $(this).html(GetAwardsCode(this, $('link[rel="stylesheet"]'), $(this).parent().find('li.pa-author a').text())); });
$('.post li.pa-fld2 span').click(function() { OpenAwards($(this).parent().find('div').html()); });
$('#pun-profile fieldset').each(function() {
  if ($(this).find('legend span').text() == 'Награды') 
  {
    var h = '<table style="display: inline;">'
    $(this).find('p.checkfield').each(function() {
      var alt = $(this).find('img').attr('alt');
      var name = alt.substring(0, alt.indexOf('|'));
      var desc = alt.substring(alt.indexOf('|')+1);
      h += '<tr><td><p class="checkfield">' + $(this).html() + '</p></td><td>Награда: <strong>'+name+'</strong><br>Описание: <strong>'+desc+'</strong></td></tr>'
    });
    $(this).find('div.fs-box').html(h);
    $(this).find('div.fs-box').css({'display':'none'});
    $(this).find('legend').after('<span onclick="$(this).parent().find(\'div.fs-box\').toggle(1000);">Выставить награды</span>');
  }
});
</script>

(*У меня до 570 на данном тестовике - нормально(при развороте), если более,то начинает дергацо, что то прерывает по тайм-ауту

Отредактировано Deff (Пн, 9 Апр 2012 18:21:23)

0

15

Deff
:dontknow: Мой нет тормозит почему-то... Вечером зайду со стационара, посмотрю, что вышло.

0

16

kozhilya,Блин - мну просёк тормоз

Ну низзя вот это делать

  box-shadow: 0 0 1000px 1000px rgba(0,0,0,0.5);


!!!!Самый тормозной элемент , особливо при изменяющейся прозрачности...

Нун одевать div.AwardWindow в блок All_window

манипулируешь с div.AwardWindow - а All_window ток сворачиваешь - разворачиваешь по клику
У данного блока делаешь постоянную полупрозрачность  - 0.6 - 0.8 цвет #000

width:100%;
height:100%;

Отредактировано Deff (Пн, 9 Апр 2012 19:21:54)

0

17

Deff
Фернштейн :)
Чёрт, я об этом вообще не думал...

0

18

kozhilya
Даж я думаю мон wrap в этот All_window перед разворачиванием и разврапливать после сворачивания

у него позиция тож fixed - независимая от внутреннего left:0;top:0;

Отредактировано Deff (Пн, 9 Апр 2012 19:30:29)

0

19

Deff
Не выражайся со мной так ><

Исправил, но код пока не меняю. Нашёл ошибку, из-за которой в MF вместо картинок "undefined"

0

20

Дополнено!

0


Вы здесь » Единый форум поддержки » Новые возможности форумов » Обновленные награды