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>