FREEDOM DESIGN

Liberdade de edição


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Perfil em tooltip em Qua Jan 23, 2013 10:56 pm

Membro

Olá,

Eu queria que quando passar o mouse em cima do avatar que eu puis para aparecer na categoria, queria que aparecesse o perfil do jeito que esta na imagem abaixo

Imagem do que desejo



Fórum aonde eu vi

http://spdesign.ativoforum.com/forum

Até

Ver perfil do usuário

2 Re: Perfil em tooltip em Qui Jan 24, 2013 1:07 am

Administrador

Olá,

Crie um novo código Javascript com o investimento marcado "Em todas as páginas" e com este código:
Código:

/*
* PERIL NO TOLTIP CRIADO POR SWITCH SP DESIGN
*/
$(document).ready(function(){$('td.tcr a[href*="/u"]').mouseover(function(){$(this).parents('strong').css('position','relative');$('.perfilInfo').remove();$(this).parents('.tcr').css('overflow','visible');$(this).before('<div class="perfilInfo"style="position:absolute;"><span class="setPerfil"><span><img class="PerfilInfoImg"src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png"/><h2>'+$(this).find('span').html()+'</h2><p><b>Reputação:</b><span></span></p><p><b>Posts:</b><span></span></p><p><b>Cadastrado:</b><span></span></p><p><b>Cash:</b><span></span></p><span class="linkPrf"><a href="/privmsg?mode=post&u='+$(this).attr('href').replace('/u', '')+'">Enviar MP</a></span><span class="linkPrf"><a href="'+$(this).attr('href')+'">Ver perfil</a></span></span></span></span></div>');$.get($(this).attr('href'),function(retornoMembro){var avtPrf=$('#profile-advanced-right img:first',retornoMembro).attr('src');$('.PerfilInfoImg').attr('src',avtPrf);var perfil_rep=$('#field_id-14 dd',retornoMembro).html();var perfil_post=$('#field_id-6 dd',retornoMembro).html();var perfil_cad=$('#field_id-4 dd',retornoMembro).html();var perfil_lastV=$('#field_id-13 dd',retornoMembro).html();$('.setPerfil p:eq(0) span').html(perfil_rep);$('.setPerfil p:eq(1) span').html(perfil_post);$('.setPerfil p:eq(2) span').html(perfil_cad);$('.setPerfil p:eq(3) span').html(perfil_lastV)});$('.perfilInfo').mouseleave(function(){$(this).remove()})});$('.phpbb3 dl.icon').removeAttr('title');$('dl.icontopic').removeAttr('title')});

Feito isto adicione este código em sua folha de estilo CSS:
Código:
.perfilInfo{background:url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0;float:left;height:12em;left:-33em;padding:16px 0 20px 5px;top:13px;width:510px;z-index:999}.linkPrf{-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background:#F6F6F6;border:1px solid #DBDBDB;border-radius:0 0 4px 4px;border-top:none;bottom:-14px;box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 1px 0 rgba(0,0,0,0.3);color:#616161;float:left;height:14px;left:9.6em;margin:2px;padding:5px;position:relative;text-align:center;text-decoration:none!important;transition:all .2s ease-in-out;width:8em}.linkPrf:hover{border-color:#9A9A9A;color:#4C4C4C}.linkPrf:hover a{color:#4C4C4C}.linkPrf a{color:#616161!important;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;text-decoration:none}.setPerfil{background:rgba(0,0,0,0.3);border-radius:3px;display:block;height:100%;padding:5px 5px 10px}.setPerfil > span{background:#f9f9f9;border:1px solid #999;border-radius:3px;display:block;height:100%;padding:3px}.setPerfil .PerfilInfoImg{background:#E1E1E1;box-shadow:1px 1px 0 #CCC;display:table;float:left;height:160px;padding:3px;width:94px}.setPerfil p div{display:inline}.setPerfil h2{background:#E1E1E1;border-radius:0 10px 0 0;box-shadow:1px 1px 0 #CCC;display:block;float:left;font-family:"Trebuchet MS";font-size:19px;font-style:normal;font-variant:normal;font-weight:bold;margin-bottom:10px;padding:5px;text-shadow:1px 1px 0 #fff;width:382px}.setPerfil p{-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background:#F1F1F1;border-left:3px solid #333;border-top:1px solid #333;box-shadow:1px 1px 0 #CCC;display:block;float:right;font-weight:400;margin:2px 5px;padding:5px;text-align:left;width:350px}.setPerfil p:hover{-moz-box-shadow:-1px 1px 0 #9A9A9A;-ms-box-shadow:-1px 1px 0 #9A9A9A;-o-box-shadow:-1px 1px 0 #9A9A9A;-webkit-box-shadow:-1px 1px 0 #9A9A9A;border-left:0 solid #333;border-right:4px solid #333;box-shadow:-1px 1px 0 #9A9A9A}

Ver perfil do usuário http://frdesign.probb.org

3 Re: Perfil em tooltip em Qui Jan 24, 2013 9:55 am

Membro

Olá,

Quando fui adicionar este código na Folha de estilo CSS deu o seguinte erro

O código CSS inserido é muito volumoso. Por favor, diminua-o.

Tem outro lugar que eu possa colocar ?

Até



"Aquele que trabalha duro pode superar um gênio,mas,de nada adianta trabalhar duro se você não confia em você mesmo"
Ver perfil do usuário

4 Re: Perfil em tooltip em Qui Jan 24, 2013 3:13 pm

Administrador

Ponha o código num widget:
Código:

<style>
.perfilInfo{background:url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0;float:left;height:12em;left:-33em;padding:16px 0 20px 5px;top:13px;width:510px;z-index:999}.linkPrf{-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background:#F6F6F6;border:1px solid #DBDBDB;border-radius:0 0 4px 4px;border-top:none;bottom:-14px;box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 1px 0 rgba(0,0,0,0.3);color:#616161;float:left;height:14px;left:9.6em;margin:2px;padding:5px;position:relative;text-align:center;text-decoration:none!important;transition:all .2s ease-in-out;width:8em}.linkPrf:hover{border-color:#9A9A9A;color:#4C4C4C}.linkPrf:hover a{color:#4C4C4C}.linkPrf a{color:#616161!important;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;text-decoration:none}.setPerfil{background:rgba(0,0,0,0.3);border-radius:3px;display:block;height:100%;padding:5px 5px 10px}.setPerfil > span{background:#f9f9f9;border:1px solid #999;border-radius:3px;display:block;height:100%;padding:3px}.setPerfil .PerfilInfoImg{background:#E1E1E1;box-shadow:1px 1px 0 #CCC;display:table;float:left;height:160px;padding:3px;width:94px}.setPerfil p div{display:inline}.setPerfil h2{background:#E1E1E1;border-radius:0 10px 0 0;box-shadow:1px 1px 0 #CCC;display:block;float:left;font-family:"Trebuchet MS";font-size:19px;font-style:normal;font-variant:normal;font-weight:bold;margin-bottom:10px;padding:5px;text-shadow:1px 1px 0 #fff;width:382px}.setPerfil p{-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background:#F1F1F1;border-left:3px solid #333;border-top:1px solid #333;box-shadow:1px 1px 0 #CCC;display:block;float:right;font-weight:400;margin:2px 5px;padding:5px;text-align:left;width:350px}.setPerfil p:hover{-moz-box-shadow:-1px 1px 0 #9A9A9A;-ms-box-shadow:-1px 1px 0 #9A9A9A;-o-box-shadow:-1px 1px 0 #9A9A9A;-webkit-box-shadow:-1px 1px 0 #9A9A9A;border-left:0 solid #333;border-right:4px solid #333;box-shadow:-1px 1px 0 #9A9A9A}
</style>




Here comes the sun, here comes the sun,
And I say it's all right

Little darling, it's been a long cold lonely winter
Little darling, it feels like years since it's been here
Here comes the sun, here comes the sun
And I say it's all right



Ver perfil do usuário http://frdesign.probb.org

5 Re: Perfil em tooltip em Qui Jan 24, 2013 3:50 pm

Membro

Olá,

Passei o mouse em cima do avatar no lastpost e não apareceu o perfil de Tooltip, poderia me informar se tem algum código em meu fórum dando conflito ou e porque o código não esta funcionando mesmo ?

Até

Ver perfil do usuário

6 Re: Perfil em tooltip em Qui Jan 24, 2013 3:58 pm

Programador

Você deve rever seus códigos, deve haver códigos marcados em " Todas as paginas" que são desnecessários, assim pode gerar conflitos no JS.

Ver perfil do usuário

7 Re: Perfil em tooltip em Qui Jan 24, 2013 4:20 pm

Membro

Olá,

Exclui alguns códigos JS que não precisa estar la e ainda não esta funcionando

Até



"Aquele que trabalha duro pode superar um gênio,mas,de nada adianta trabalhar duro se você não confia em você mesmo"
Ver perfil do usuário


Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum