Abrir e fechar widgets individualmente Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Abrir e fechar widgets individualmente

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

Ir para baixo

Tópico resolvido Abrir e fechar widgets individualmente

Mensagem por Kallahari 15.07.14 11:21

  • Descrição:
Tem como abrir e fechar widgets assim igual a este fórum?
https://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 21:41, editado 1 vez(es)
Kallahari
Kallahari
*****

Membro desde : 31/01/2014
Mensagens : 413
Pontos : 639

http://muwinnerr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu 15.07.14 17:40

--

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.
avatar
Tofu
****

Membro desde : 16/07/2013
Mensagens : 284
Pontos : 428

http://verdadeplena.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Kallahari 15.07.14 20:32

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

Membro desde : 31/01/2014
Mensagens : 413
Pontos : 639

http://muwinnerr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu 15.07.14 20:47

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.
avatar
Tofu
****

Membro desde : 16/07/2013
Mensagens : 284
Pontos : 428

http://verdadeplena.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Kallahari 15.07.14 21:16

So aparece no primeiro widget
Kallahari
Kallahari
*****

Membro desde : 31/01/2014
Mensagens : 413
Pontos : 639

http://muwinnerr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu 15.07.14 21:19

--

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 
avatar
Tofu
****

Membro desde : 16/07/2013
Mensagens : 284
Pontos : 428

http://verdadeplena.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Kallahari 15.07.14 21:23

fatalisss escreveu:So aparece no primeiro widget
Kallahari
Kallahari
*****

Membro desde : 31/01/2014
Mensagens : 413
Pontos : 639

http://muwinnerr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu 15.07.14 21:25

--

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
avatar
Tofu
****

Membro desde : 16/07/2013
Mensagens : 284
Pontos : 428

http://verdadeplena.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Kallahari 15.07.14 21:30

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

Membro desde : 31/01/2014
Mensagens : 413
Pontos : 639

http://muwinnerr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu 15.07.14 21:39

--

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.
avatar
Tofu
****

Membro desde : 16/07/2013
Mensagens : 284
Pontos : 428

http://verdadeplena.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Abrir e fechar widgets individualmente

Mensagem por Tofu 15.07.14 21:45

--

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>
avatar
Tofu
****

Membro desde : 16/07/2013
Mensagens : 284
Pontos : 428

http://verdadeplena.tk

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

 
Permissões neste sub-fórum
Não podes responder a tópicos