Deff
И еще раз спасибо. Очень жаль что не могу еще плюсовать)
Обновленные награды
Сообщений 221 страница 240 из 331
Поделиться221Ср, 16 Дек 2015 02:51:01
Поделиться222Вт, 2 Фев 2016 13:24:53
Подскажите как у подсказки стрелочку перекрасить?
А то всё перекрасилось а стрелка чёрная
/*Cтиль Подсказки*/
.tipsy.awards {
margin-top:-22px!important;
opacity:.95!important;
}
.tipsy.awards .tipsy-inner{
background: rgba(255,211,125,1)!important; /* Фон и прозрачность фона подсказки*/
}
.tipsy.awards .tipsy-inner {
font: normal normal 400 14px/normal "Georgia";
color:#3E2600;
box-shadow: 0 0 5px rgba(139,114,34,1);
}
Поделиться223Вт, 2 Фев 2016 13:27:46
Домовой
Стрелка поставлена через background-image на селектор .tipsy
Поменять мон, - ну типа так
.tipsy.awards{
background:url(ссылка на картинку) bottom center no-repeat;
}
Поделиться224Вт, 2 Фев 2016 13:34:50
А то всё перекрасилось а стрелка чёрная
Мы чот с тобой делали со стрелкой - типо квадратом([s]span) повернутым на 45° во всплывающем минипрофиле
Вот как там:
tipsy.awards .tipsy-arrow,
tipsy.awards div.tipsy-inner {
padding:1px!important;
background:#B77415!important; /*фон стрелки и обрамления таблы*/
color:#513A01!important;
}
tipsy.awards .tipsy-arrow{ /*Стрелка во всплывалке*/
margin-bottom:2px!important;
-moz-transform:rotate(45deg); /* Для Firefox */
-ms-transform:rotate(45deg); /* Для IE */
-webkit-transform:rotate(45deg); /* Для Safari, Chrome, iOS */
-o-transform:rotate(45deg); /* Для Opera */
transform:rotate(45deg);
height:7px!important;
width:7px!important;
z-index:-1;
}
}
Поделиться225Вт, 2 Фев 2016 15:34:50
Deff, точно, я чот даже и не докумекал туда заглянуть))
Спасибо!
Ну и коль пошла такая пьянка, можно ли как то переписать скрипт что бы всплывающей подсказки вовсе не было, а описание награды было в окне с самой наградой.
Ну как то так:

Пытался подсказку сделать прозрачной и подогнать её куда надо, но при наведении на награды по очереди почему то меняется расположение текста.
Лучше бы конечно прямо в поле текст ставился без подсказки.
Поделиться226Вт, 2 Фев 2016 15:39:00
Домовой
Ссылку на форум с тестом наград
Поделиться227Вт, 2 Фев 2016 15:51:17
Ссылку на форум с тестом наград
Поделиться228Вт, 2 Фев 2016 15:58:49
Домовой
Ни наю, может так:
<script>
$('.post li.pa-fld1>img').wrap('<span class="award-wrp"></span>');
$('.post li.pa-fld1>.award-wrp').each(function() {
var img=$(this).find('img'),tit=img.attr('title'),left=($(this).offset().left-$(this).parents('.post-author').offset().left);
img.removeAttr('title');
$(this).find('img').clone().appendTo($('<div class=awr-div></div>').prepend('<img class=xwost src="/i/blank.gif">'+tit).appendTo(this));
});
$('.award-wrp').one('mouseenter',function(){
left=($(this).offset().left-$(this).parents('.post-author').offset().left);
$(this).find('img.xwost').css({'width':$(this).width()+'px','left':+left+'px'});
});
$('#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 class=mywards onclick="$(this).parent().find(\'div.fs-box\').toggle(1000);">Выставить награды</span>');
}
});
</script>
Поделиться229Вт, 2 Фев 2016 16:12:27
Ни наю, может так:
Класс!
А под картинку текст нельзя переставить? И ещё, можно как то всплывающее окно с большой наградой привязать к маленьким наградам что постоянно в профиле видны. Ну как бы понятней объяснить. То есть если текст описания большой, то всплывающее поле увеличивается по высоте. А увеличение происходит вниз, то есть верхняя часть поля как бы привязана к одной точке. Тем самым перекрываются маленькие наградки. Вот было бы не плохо если бы низ был привязан к определённой точке, к примеру пиксел на 5 выше наградок, а верх пусть пляшет выше или ниже в зависимости от текста.
Фууух, скока бокаф накидал))
Поделиться230Вт, 2 Фев 2016 16:14:00
Домовой
1. Награды должны быть идентичные по размеру или ограничить их жестко при наведении - ширину и высоту
2. Тогда мон зафиксировать высоту и ширину у div.awr-div и сделать её position:relative; а картинку в ней абсолютной позицией
div.awr-div>img {
position:absolute; top:20px;/*величина отступа на две строки текста*/
}
Тады текст не будет влиять на картинку и шириину-высоту
Поделиться231Вт, 2 Фев 2016 16:17:56
Награды должны быть идентичные по размеру
А они и так все строго 150px по высоте. Размер поля меняется от текста. От количества символов.
Поделиться232Вт, 2 Фев 2016 16:30:35
Домовой
А под картинку текст нельзя переставить?
<script>
$('.post li.pa-fld1>img').wrap('<span class="award-wrp"></span>');
$('.post li.pa-fld1>.award-wrp').each(function() {
var img=$(this).find('img'),tit=img.attr('title'),left=($(this).offset().left-$(this).parents('.post-author').offset().left);
img.removeAttr('title');
$(this).find('img').clone().appendTo($('<div class=awr-div></div>').prepend('<img class=xwost src="/i/blank.gif">').appendTo(this));
$(this).find('.awrd-div').append(tit);
});
$('.award-wrp').one('mouseenter',function(){
left=($(this).offset().left-$(this).parents('.post-author').offset().left);
$(this).find('img.xwost').css({'width':$(this).width()+'px','left':+left+'px'});
});
$('#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 class=mywards onclick="$(this).parent().find(\'div.fs-box\').toggle(1000);">Выставить награды</span>');
}
});
</script>Поделиться233Вт, 2 Фев 2016 16:37:58
Alex_63
текста вообще нет
Поделиться234Вт, 2 Фев 2016 16:41:36
Домовой
<script>
$('.post li.pa-fld1>img').wrap('<span class="award-wrp"></span>');
$('.post li.pa-fld1>.award-wrp').each(function() {
var img=$(this).find('img'),tit=img.attr('title'),left=($(this).offset().left-$(this).parents('.post-author').offset().left);
img.removeAttr('title');
$(this).find('img').clone().prependTo($('<div class=awr-div></div>').append('<img class=xwost src="/i/blank.gif">'+tit).appendTo(this));
});
$('.award-wrp').one('mouseenter',function(){
left=($(this).offset().left-$(this).parents('.post-author').offset().left);
$(this).find('img.xwost').css({'width':$(this).width()+'px','left':+left+'px'});
});
$('#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 class=mywards onclick="$(this).parent().find(\'div.fs-box\').toggle(1000);">Выставить награды</span>');
}
});
</script>
Поделиться235Вт, 2 Фев 2016 16:55:08
Домовой
<!-- Награды v3.1 by kozhilya transform -->
<style type="text/css">
.pa-fld1 .award-wrp{
display:inline-block!important;
vertical-align:bottom;
text-align:center;
cursor:pointer;
margin:4px;
}
.pa-fld1 img {
max-height:35px;
}
.pa-fld1{
max-width:100%;
margin:5px auto;
}
.post-author {
position:relative;
}
.pa-fld1 .award-wrp .awr-div {
left:3px;
background:rgba(248,207,127,.9); /* Фон и прозрачность фона для большой награды*/
padding:8px 0 0px 0;
border-radius:23px;
position:absolute;
z-index:100;
display:none;
margin-top:-230px;
margin-bottom: 12px;
width:94%;
border:#E5B352 solid 2px;
box-shadow:inset 0 0 5em #9C701C;
font-family:Georgia;
}
.pa-fld1 .award-wrp:hover .awr-div{
display:block;
}
.pa-fld1 .award-wrp .awr-div {
width:200px;padding:3px 6px; height:188px;
}
.pa-fld1 .award-wrp .awr-div img{
position:absolute!important;
margin:auto; left:0;top:35px;right:0;bottom:0;
margin:auto;
border-bottom:6px solid transparent;
max-height:160px;
}
.awr-div .xwost{
margin:auto;
top:100%;
margin-top:-3px;
margin-left:-3px;
position:absolute;
/*outline:red 1px solid;*/
height:35px;
}
/*Кнопка в Профиле*/
#pun-profile fieldset > span.mywards {
background-image:linear-gradient(to bottom, #FFFCF3 0%, #E7CE95 100%);
border:1px solid #BD993E;
border-radius:4px;
cursor:pointer;
left:250px;
margin-bottom:4px;
padding:2px;
position:relative;
top:-26px;
}
</style>
<script>
$('.post li.pa-fld1>img').wrap('<span class="award-wrp"></span>');
$('.post li.pa-fld1>.award-wrp').each(function() {
var img=$(this).find('img'),tit=img.attr('title'),left=($(this).offset().left-$(this).parents('.post-author').offset().left);
img.removeAttr('title');
$(this).find('img').clone().appendTo($('<div class=awr-div></div>').prepend('<img class=xwost src="/i/blank.gif">'+tit).appendTo(this));
});
$('.award-wrp').one('mouseenter',function(){
left=($(this).offset().left-$(this).parents('.post-author').offset().left);
$(this).find('img.xwost').css({'width':$(this).width()+'px','left':+left+'px'});
});
$('#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 class=mywards onclick="$(this).parent().find(\'div.fs-box\').toggle(1000);">Выставить награды</span>');
}
});
</script>Поделиться236Вт, 2 Фев 2016 16:56:20
Alex_63" вообще караул))))
Сам посмотри КЛАЦ
Може пусть будет сверху? 
Поделиться237Вт, 2 Фев 2016 16:58:41
Домовой
Ни наю - вверху лучше смотрится, (наверно так и оставить
Поделиться238Вт, 2 Фев 2016 17:01:34
Deff
отлично.
Поделиться239Вт, 2 Фев 2016 17:03:45
Ни наю - вверху лучше смотрится, (наверно так и оставить
Да мне уже понравилось))
Поделиться240Вт, 2 Фев 2016 21:07:19
И это снова я))
А можно сделать что бы окно с наградой открывалось не мгновенно а плавно?
<!-- Награды v3.1 by kozhilya transform -->
<style type="text/css">
.pa-fld1 .award-wrp{
display:inline-block!important;
vertical-align:bottom;
text-align:center;
cursor:pointer;
margin:4px;
}
.pa-fld1 img {
max-height:35px;
}
.pa-fld1{
max-width:100%;
margin:5px auto;
}
.post-author {
position:relative;
}
.pa-fld1 .award-wrp .awr-div {
left:3px;
background:rgba(248,207,127,.9); /* Фон и прозрачность фона для большой награды*/
padding:8px 0 0px 0;
border-radius:23px;
position:absolute;
z-index:100;
display:none;
margin-top:-237px;
margin-bottom: 19px;
width:94%;
border:#E5B352 solid 2px;
box-shadow:inset 0 0 5em #9C701C;
font-family:Georgia;
font-size:14px;
}
.pa-fld1 .award-wrp:hover .awr-div{
display:block;
}
.pa-fld1 .award-wrp .awr-div {
width:200px;padding:3px 6px; height:188px;
}
.pa-fld1 .award-wrp .awr-div img{
position:absolute!important;
margin:auto; left:0;top:35px;right:0;bottom:0;
margin:auto;
border-bottom:6px solid transparent;
max-height:160px;
}
.awr-div .xwost{
margin:auto;
top:100%;
margin-top:-3px;
margin-left:-3px;
position:absolute;
/*outline:red 1px solid;*/
height:35px;
}
/*Кнопка в Профиле*/
#pun-profile fieldset > span.mywards {
background-image:linear-gradient(to bottom, #FFFCF3 0%, #E7CE95 100%);
border:1px solid #BD993E;
border-radius:4px;
cursor:pointer;
left:250px;
margin-bottom:4px;
padding:2px;
position:relative;
top:-26px;
}
</style>
<script>
$('.post li.pa-fld1>img').wrap('<span class="award-wrp"></span>');
$('.post li.pa-fld1>.award-wrp').each(function() {
var img=$(this).find('img'),tit=img.attr('title'),left=($(this).offset().left-$(this).parents('.post-author').offset().left);
img.removeAttr('title');
$(this).find('img').clone().appendTo($('<div class=awr-div></div>').prepend('<img class=xwost src="/i/blank.gif">'+tit).appendTo(this));
});
$('.award-wrp').one('mouseenter',function(){
left=($(this).offset().left-$(this).parents('.post-author').offset().left);
$(this).find('img.xwost').css({'width':$(this).width()+'px','left':+left+'px'});
});
$('#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 class=mywards onclick="$(this).parent().find(\'div.fs-box\').toggle(1000);">Выставить награды</span>');
}
});
</script>Похожие темы
| Награды (старый скрипт) | Новые возможности форумов | Пн, 15 Июл 2024 |
| Актуальный код по наградам в мини профайле? | Форум для новичков | Вт, 14 Окт 2025 |
| Как сделать награды форума | Вопросы по оформлению форума | Вс, 9 Июл 2017 |
| Не работают награды | Архив | Сб, 12 Окт 2013 |
| Награды для пользователей! | Сделаем сервис лучше | Чт, 16 Авг 2018 |