Abrir e fechar widgets individualmente

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Abrir e fechar widgets individualmente

Mensagem por Kallahari em 15/07/14, 07:21 am

  • Descrição:
Tem como abrir e fechar widgets assim igual a este fórum?
http://i.imgur.com/LzHIWiD.png

http://punbb.forumeiros.com/forum

  • Informações:
Fórum:http://piratarevolution.forumeiros.comVersão:PUNBB
Tipo:Pedido de códigoTags:Abrir,fechar,widgets,individualmente



Última edição por fatalisss em 15/07/14, 05:41 pm, editado 1 vez(es)
avatar

Kallahari
Usuário avançado

Masculino
Inscrito dia : 31/01/2014
Mensagens : 413
Pontos Ativos : 639

Ver perfil do usuário http://muwinnerr.forumeiros.com/

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu em 15/07/14, 01:40 pm

--

Teste esse código:

Código:
<script>
jQuery(document).ready(function(){
jQuery(".module .h3").append('<a onclick="closewid()" style="display: inline-block; width: 14px; height: 14px; opacity: .5; float: right; border-radius: 3px; margin: -1px -5px; border: solid 1px rgba(236, 236, 236, 0.7); cursor:pointer ;">  </a>') ;
})
function closewid() {
jQuery(".module").has(".h3 a:hover").toggleClass("hidwid") ; }
</script>
<style>
div.module > .main-content {
transition: 2s;
}
div.module.hidwid > .main-content * {
display: none;
}
div.module.hidwid > .main-content {
height: 1px !important;
overflow: hidden;
padding: 0px !important;
}

div.module > .main-head > .h3 > a {
background: url(http://png-4.findicons.com/files/icons/2711/free_icons_for_windows8_metro/26/minimize_window.png) 50% 50%;
background-size: 100%;
}

div.module.hidwid > .main-head > .h3 > a {
background-image: url(http://png-3.findicons.com/files/icons/2711/free_icons_for_windows8_metro/26/maximize_window.png) !important;
}
</style>

Adicione ele em algum widget.

Até mais.

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Kallahari em 15/07/14, 04:32 pm

Funcionou mas queria com o efeito houver ao passa mouse que ele mostrasse e também com aquelas imagens
avatar

Kallahari
Usuário avançado

Masculino
Inscrito dia : 31/01/2014
Mensagens : 413
Pontos Ativos : 639

Ver perfil do usuário http://muwinnerr.forumeiros.com/

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu em 15/07/14, 04:47 pm

Código:
<script>
jQuery(document).ready(function(){
jQuery(".module .h3").append('<a onclick="closewid()" style="display: inline-block; width: 14px; height: 14px; opacity: .5; float: right; border-radius: 3px; margin: -1px -5px; border: solid 1px rgba(236, 236, 236, 0.7); cursor:pointer ;"> </a>') ;
})
function closewid() {
jQuery(".module").has(".h3 a:hover").toggleClass("hidwid") ; }
</script>
<style>
div.module > .main-content {
transition: 2s;
}
div.module.hidwid > .main-content * {
display: none;
}
div.module.hidwid > .main-content {
height: 1px !important;
overflow: hidden;
padding: 0px !important;
}

div.module > .main-head > .h3 > a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKlBMVEX///8dNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlJSZn16ip3k6/JkLhjLAAAACnRSTlMACkVWWZerzdXxurlICgAAAF5JREFUCNdjYGAQDp9ZasgABExZq1atWqYAZHmsAoEWoFAXmLVCgUFsFQQkMlhBWYsZoqCspQxVUNZyhlmrVt29e2fVqpUg1pkzp0EshCxCB8IUhMkI2xAuQHIVzKUAh8ZUIpv14jgAAAAASUVORK5CYII=) 50% 50%;
background-size: 100%;
transition: .5s;
opacity: 0 ;
}

div.module.hidwid > .main-head > .h3 > a {
background-image: url(http://i78.servimg.com/u/f78/18/17/62/92/cat_ma10.png) !important;
}
div.module > .main-head:hover > .h3 > a { opacity: 1 !important }
div.module.hidwid > .main-head { opacity: .4 }
</style>

Tente esse.

--

Peço que se eu resolver a questão, me ajude dando um obrigado em minha mensagem Muito feliz

--

Até mais.

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Kallahari em 15/07/14, 05:16 pm

So aparece no primeiro widget
avatar

Kallahari
Usuário avançado

Masculino
Inscrito dia : 31/01/2014
Mensagens : 413
Pontos Ativos : 639

Ver perfil do usuário http://muwinnerr.forumeiros.com/

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu em 15/07/14, 05:19 pm

--

Tente esse:

Código:
<script>
jQuery(document).ready(function(){
jQuery(".module .h3").each(function(){ jQuery(this).append('<a onclick="closewid()" style="display: inline-block; width: 14px; height: 14px; opacity: .5; float: right; border-radius: 3px; margin: -1px -5px; border: solid 1px rgba(236, 236, 236, 0.7); cursor:pointer ;"> </a>') ; }) ;
})
function closewid() {
jQuery(".module").has(".h3 a:hover").toggleClass("hidwid") ; }
</script>
<style>
div.module > .main-content {
transition: 2s;
}
div.module.hidwid > .main-content * {
display: none;
}
div.module.hidwid > .main-content {
height: 1px !important;
overflow: hidden;
padding: 0px !important;
}

div.module > .main-head > .h3 > a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKlBMVEX///8dNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlJSZn16ip3k6/JkLhjLAAAACnRSTlMACkVWWZerzdXxurlICgAAAF5JREFUCNdjYGAQDp9ZasgABExZq1atWqYAZHmsAoEWoFAXmLVCgUFsFQQkMlhBWYsZoqCspQxVUNZyhlmrVt29e2fVqpUg1pkzp0EshCxCB8IUhMkI2xAuQHIVzKUAh8ZUIpv14jgAAAAASUVORK5CYII=) 50% 50%;
background-size: 100%;
transition: .5s;
opacity: 0 ;
}

div.module.hidwid > .main-head > .h3 > a {
background-image: url(http://i78.servimg.com/u/f78/18/17/62/92/cat_ma10.png) !important;
}
div.module > .main-head:hover > .h3 > a { opacity: 1 !important }
div.module.hidwid > .main-head { opacity: .4 }
</style>

Até mais.  zen 

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Kallahari em 15/07/14, 05:23 pm

fatalisss escreveu:So aparece no primeiro widget
avatar

Kallahari
Usuário avançado

Masculino
Inscrito dia : 31/01/2014
Mensagens : 413
Pontos Ativos : 639

Ver perfil do usuário http://muwinnerr.forumeiros.com/

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu em 15/07/14, 05:25 pm

--

Por favor, deixe o código no último widget.
E permita que eu como visitante veja ele em funcionamento.
Para eu descobrir o erro....

Vlw Muito feliz

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Kallahari em 15/07/14, 05:30 pm

DEI UMA ARRUMADA NELE E JA APARECE EM TODOS, AGORA QUERIA O HOUVER AO PASSAR O MOUSE
avatar

Kallahari
Usuário avançado

Masculino
Inscrito dia : 31/01/2014
Mensagens : 413
Pontos Ativos : 639

Ver perfil do usuário http://muwinnerr.forumeiros.com/

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu em 15/07/14, 05:39 pm

--

Código:
<script>
jQuery(document).ready(function(){
jQuery(".module .h3").each(function(){ jQuery(this).append('<a onclick="closewid()" style="display: inline-block; width: 14px; height: 14px;float: right; border-radius: 3px; margin: -1px -5px; border: solid 1px rgba(236, 236, 236, 0.7); cursor:pointer ;"> </a>') ; }) ;
})
function closewid() {
jQuery(".module").has(".h3 a:hover").toggleClass("hidwid") ; }
</script>
<style>
div.module > .main-content {
transition: 2s;
}
div.module.hidwid > .main-content * {
display: none;
}
div.module.hidwid > .main-content {
height: 1px !important;
overflow: hidden;
padding: 0px !important;
}

div.module > .main-head > .h3 > a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKlBMVEX///8dNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlJSZn16ip3k6/JkLhjLAAAACnRSTlMACkVWWZerzdXxurlICgAAAF5JREFUCNdjYGAQDp9ZasgABExZq1atWqYAZHmsAoEWoFAXmLVCgUFsFQQkMlhBWYsZoqCspQxVUNZyhlmrVt29e2fVqpUg1pkzp0EshCxCB8IUhMkI2xAuQHIVzKUAh8ZUIpv14jgAAAAASUVORK5CYII=) 50% 50% no-repeat;
background-size: 100%;
transition: all .5s;
opacity: 0 ;
}

div.module.hidwid > .main-head > .h3 > a {
background-image: url(http://i78.servimg.com/u/f78/18/17/62/92/cat_ma10.png) !important;
}
div.module > .main-head:hover > .h3 > a { opacity: 1 !important }
div.module.hidwid > .main-head { opacity: .4 }
</style>

Peço que deixa o código no último widget que você tiver, lá para baixo.
Assim garante melhor seu funcionamento em todos widgets.

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu em 15/07/14, 05:45 pm

--

Tem 2 widgets finais que nao estao com o recurso, caso queira neles também, esse codigo é melhor:

Código:
<script>
jQuery(document).ready(function(){
jQuery(".module .main-head *").each(function(){ jQuery(this).append('<a onclick="closewid()" style="display: inline-block; width: 14px; height: 14px;float: right; border-radius: 3px; margin: -1px -5px; border: solid 1px rgba(236, 236, 236, 0.7); cursor:pointer ;"> </a>') ; }) ;
})
function closewid() {
jQuery(".module").has("a:hover").toggleClass("hidwid") ; }
</script>
<style>
div.module > .main-content {
transition: 2s;
}
div.module.hidwid > .main-content * {
display: none;
}
div.module.hidwid > .main-content {
height: 1px !important;
overflow: hidden;
padding: 0px !important;
}

div.module > .main-head > * > a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKlBMVEX///8dNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlJSZn16ip3k6/JkLhjLAAAACnRSTlMACkVWWZerzdXxurlICgAAAF5JREFUCNdjYGAQDp9ZasgABExZq1atWqYAZHmsAoEWoFAXmLVCgUFsFQQkMlhBWYsZoqCspQxVUNZyhlmrVt29e2fVqpUg1pkzp0EshCxCB8IUhMkI2xAuQHIVzKUAh8ZUIpv14jgAAAAASUVORK5CYII=) 50% 50% no-repeat;
background-size: 100%;
transition: all .5s;
opacity: 0 ;
}

div.module.hidwid > .main-head > * > a {
background-image: url(http://i78.servimg.com/u/f78/18/17/62/92/cat_ma10.png) !important;
}
div.module > .main-head:hover > * > a { opacity: 1 !important }
div.module.hidwid > .main-head { opacity: .4 }
</style>

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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