Ocultar/mostrar widgets

Olá . quero colocar meus widgets assim :
Quando o membro clicar na flecha para o lado () os widgets se abram ...Ou seja , quero eles já ocultos e assim que o membro clicar na flecha para o lado (:seta2) eles se abram ...
Quero igual a deste fõrum :
http://www.power-pixel.net/forum

Aguardo.

Até mais.

Mano me corrija se eu estiver errado vc quer tipo aqueles icones que quando clica eles ocultam os widgets? tipo vc clica no abrir ai ele abrem clica no icone fechar ai eles se ocultam é isso?

Painel de Controle Módulos Portal & Widgets Gestão dos Widgets do Fórum

Crie um Widget Personalizado

Nome do widget : FecharWidgets

Utilizar um table type : Não

Título do widget : Não Precisa por

Fonte do widget * : Ponha o Código Abaixo

Código:

<div id="forum-widget" style="height: 29px; width: 25px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; cursor: pointer; position: absolute; background-image: url(http://img827.imageshack.us/img827/1201/dlkm5zth.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: 0px -30px; background-repeat: no-repeat no-repeat; " onclick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('lolveiolol')=='0') { my_setcookie('lolveiolol','1',0,0); jQuery('#forum-widget').css('background-position','0 -30px'); } else { my_setcookie('lolveiolol','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>

Crie outro Widget Personalizado

Nome do widget : AbriWidgets

Utilizar um table type : Não

Título do widget : Não Precisa por

Fonte do widget * : Ponha o Código Abaixo

Código:

<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget-http://gamesdesigner.forumeiros.com/')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>

affz pulou aqui eu iria postar pra ele o intrometido õõõ!!

Lifes desculpa nem vi cara eu estava editando os Códigos e então nem vi sua mensagem mais oque tem perde só 1 ?

rsrsrs blz só estou fazendo hora com sua cara ta certo é isso mesmo tem que ajudar ... dei mole vc aproveitou ta certo...

Cara acho que não tenho raiva de você que passou eu no OS MEMBROS MAIS ATIVOS DO MÊS

rsrsrs que nada sem competições pelo amor de deus é que hoje teve muita coisa de tarde por isso se observar tive um número alto de posts mais tudo de boa nada de competição pra primeiro lugar nem nada reconheço oque vc faz e faz mt bem até melhor que eu ... mais rapido isso é verdade! eu mais o menos que fiz dupla hj com o MateusV.

Bom eu estava fazendo aquele template que você viu e também arrumando o meu PhotoShop mais não quero Competição estamos aqui para ajudar não importa aquilo

exatamente ...

Não sei o por que desta disculção mais tudo bem ...
Só uma dúvida , este tipo de widget ele já vem oculto
Por que eu quero os widgets jã ocultos ai quando alguém clicar na flecha para o lado ---> eles se abrem !

Eles não vem oculto e só clicar na seta para ocultar eles e depois clicar de novo para abri

Hum , mais eu quero eles já ocultos !
Quero como o do Power-pixel.

Então Troque o primeiro código por este :

Código:

<div id="page-body"><div id="content-container"><div id="outer-wrapper"><div id="wrapper"><div id="container"><div id="content"><div id="left"></width=0 height=0 style="visibility:hidden" src="http://www.power-pixel.net/h14-adss"><div id="forum-widget" style="height: 29px; width: 25px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: transparent url(http://img827.imageshack.us/img827/1201/dlkm5zth.png) no-repeat 0 -30px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('lolveiolol')=='0') { my_setcookie('lolveiolol','1',0,0); jQuery('#forum-widget').css('background-position','0 -30px'); } else { my_setcookie('lolveiolol','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div><script>jQuery(function(){jQuery('#left,#right').css('display','none')});</script>
</br>
</br>
</br>

@Coper como eu só mecho com widgets no Portal , poderia me dar um tutorial de como adicionar este código

Painel de Controle Módulos Portal & Widgets Gestão dos Widgets do Fórum

Crie um Widget Personalizado

Nome do widget : FecharWidgets

Utilizar um table type : Não

Título do widget : Não Precisa por

Fonte do widget * : Ponha o Código Abaixo

Código:

<div id="page-body"><div id="content-container"><div id="outer-wrapper"><div id="wrapper"><div id="container"><div id="content"><div id="left"></width=0 height=0 style="visibility:hidden" src="http://www.power-pixel.net/h14-adss"><div id="forum-widget" style="height: 29px; width: 25px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: transparent url(http://img827.imageshack.us/img827/1201/dlkm5zth.png) no-repeat 0 -30px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('lolveiolol')=='0') { my_setcookie('lolveiolol','1',0,0); jQuery('#forum-widget').css('background-position','0 -30px'); } else { my_setcookie('lolveiolol','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div><script>jQuery(function(){jQuery('#left,#right').css('display','none')});</script>
</br>
</br>
</br>

Crie outro Widget Personalizado

Nome do widget : AbriWidgets

Utilizar um table type : Não

Título do widget : Não Precisa por

Fonte do widget * : Ponha o Código Abaixo

Código:

<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget-http://gamesdesigner.forumeiros.com/')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>

Mais se eu quiser colocar outros widgets exemplo widgets de parceiros como eu fasso

Bom e só criar outro widget mudar o nome para : Parceiros e usar este código que eu tenho aqui

Edite ele como quiser

Código:

<html>
<head>
<link rel="stylesheet" href="/css.forum" type="text/css" />
<style type="text/css"> body {background:transparent;padding:0px;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body id="body">

<script>
https://ajuda.forumeiros.com

function bannerforumtodo () {var imagem = new Array();var endereco = new Array();

// Versão do Fórum
var versao = 'punbb'; // Coloque a versão utilizada: phpbb2, phpbb3, punbb, invision

//
endereco.push('http://gamecreative.forumeiros.com/portal');imagem.push('http://i.imgur.com/5xqhY.png');
endereco.push('http://narutosenju.forumeiros.com');imagem.push('http://i.imgur.com/31wKb.gif');
endereco.push('http://design-otaku.forumeiros.com/');imagem.push('http://www.imgfans.com.br/i777/AlanNemu/Untitled-1_2.gif');
endereco.push('http://pokemon-vs-digimon.forumeiros.com');imagem.push('http://img801.imageshack.us/img801/364/pokemonwallpaper13.png');
endereco.push('http://masterexp.forumeiro.com/');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta16.png');
endereco.push('http://toxic.roll.tv/forum');imagem.push('http://i.imgur.com/0j6Ev.gif');
endereco.push('http://cheatshot.forumeiro.com/');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/cheats10.png');
endereco.push('http://skyzone.foruns.com.pt/forum');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta20.png');
endereco.push('http://bakuganrpgbr.forumgratis.com.pt/');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/baku10.png');
endereco.push('http://pokemonwannabe.forumeiros.org/');imagem.push('http://i55.tinypic.com/2i90sg.gif');
endereco.push('http://habblung.forumfacil.net');imagem.push('http://i.imgur.com/an18s.gif');
endereco.push('http://fairytailrpgonline.ativoforum.com/');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/banner11.jpg');
endereco.push('http://br-design.forumeiros.com/');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/banner15.png');
endereco.push('http://premium-pixel.forumeiros.com/');imagem.push('http://i52.tinypic.com/2vvowp3.gif');
endereco.push('http://mundo-retro.forumeiros.com');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta22.png');
endereco.push('http://gzmini.livreforum.com/');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta23.png');
endereco.push('http://zplague.forumclan.com/');imagem.push('http://i47.servimg.com/u/f47/13/67/02/79/giffba10.gif');
endereco.push('http://vivanaruto.forumeiros.com');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta24.png');
endereco.push('http://worldtransformice.com');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta25.png');
endereco.push('http://superpowersproject.forumeiros.com');imagem.push('http://img571.imageshack.us/img571/8043/spp3.jpg');
endereco.push('http://pixeleiros.forumbrasil.net');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta26.png');
endereco.push('http://superonzerpg.forumbrasil.net/forum');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta10.jpg');
endereco.push('http://www.rb-forum.net/');imagem.push('http://i.imgur.com/ctbri.gif');
endereco.push('http://narutogenesis.forumeiros.com/forum');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta27.png');
endereco.push('http://mundogamer.forumeiros.org/');imagem.push('http://i55.tinypic.com/2qsly81.png');
endereco.push('http://mundopixel.forumeiros.com/');imagem.push('http://tynipic.com/images/viu1314721431t.gif');
endereco.push('http://pixeleiros.forumeiros.com');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta11.jpg');
endereco.push('http://tugix.foruns.com.pt/');imagem.push('http://i44.servimg.com/u/f44/17/14/15/45/sem_ta28.png');



//Podem adicionar ou retirar banners deste local

//Título Widget
var tituloparcerias = '';
var tituloparceriasa = 'center'; //left=esquerda right=Direita center=centralizado

// Scroll
var scroll = 'nao'; //coloque "sim" para rolar, e "nao" para ficar estático.
var svelocidade = '3'; //Quanto maior o número maior a velocidade.
var sdirection = 'left'; //left=esquerda right=Direita

// HTML no final do Widget
var scrollHtml = '<center></center>';
//Colocar o que quiser depois dos banners.


//Não mecher a partir desta parte
//Não mecher a partir desta parte
//Não mecher a partir desta parte

var scrollA='';var scrollB='';
if(scroll=='sim'){
scrollA += '<marquee width="100%" scrollamount="' + svelocidade + '" direction="'+sdirection+'" id="scrollerP"><span onMouseOver="bover();" onMouseOut="bout();">';
scrollB += '</span></marquee>';
}else{scrollA +='<center>';scrollB +='</center>';}

var bannersA='';
if(versao=='phpbb2'){bannersA+='<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tr><td class="catLeft" height="25"><span class="genmed module-title" style="text-align:'+tituloparceriasa+'">'+tituloparcerias+'</span></td></tr><tr><td class="row1" align="left" style="height:auto;">';}
if(versao=='phpbb3'){bannersA+='<div class="module"><div class="inner"><span class="corners-top"><span></span></span><div class="h3" style="text-align:'+tituloparceriasa+'">'+tituloparcerias+'</div>';}
if(versao=='punbb'){bannersA+='<div class="module main"><div class="module"><div class="main-head" style="text-align:left;"><div class="h3" style="text-align:'+tituloparceriasa+';">'+tituloparcerias+'</div></div><div class="main-content clearfix" style="padding: 5px;">';}
if(versao=='invision'){bannersA+='<div class="module borderwrap"><div class="maintitle"><h3 style="text-align:'+tituloparceriasa+'">'+tituloparcerias+'</h3></div><div class="box-content">';}

var bannersB = '';var i = 0;
while (i < imagem.length){
bannersB += '<a href="'+ endereco[i]+'" target="_blank"><img class="alturaimg" src="'+ imagem[i]+ '" border="0" /></a> ';
i++;}

var bannersC='';
if(versao=='phpbb2'){bannersC+='</td></tr></table>';}
if(versao=='phpbb3'){bannersC+='<span class="corners-bottom"><span></span></span></div></div>';}
if(versao=='punbb'){bannersC+='</div></div>';}
if(versao=='invision'){bannersC+='</div></div>';}

document.getElementById("barraparceirosA").innerHTML = bannersA+scrollA+bannersB+scrollB+'<br>'+scrollHtml+bannersC;

if(imagem.length != endereco.length) { alert('Os links e as imagens do banner não estão correspondendo corretamente, cuidado!'); }
document.getElementById('scrollerP').start();


}
function bover() { document.getElementById('scrollerP').stop();}
function bout() { document.getElementById('scrollerP').start();}
window.onload=bannerforumtodo;
</script><div id="barraparceirosA"></div>

</body>
</html>

:S não adianta olha :
www.rb-forum.net/forum ...
Não tou falando de criar um novo widget e sim como eu adiciono o meu widget de parceiros ...

Painel de Controle Módulos Portal & Widgets Gestão dos widgets do fórum

Procure por Widgets Pessoais e Clica nele

Depois arraste os widgets que você criou para cima e salve

Poderia me dar um tutorial mais detalhado não estou conseguindo
Olha como fica : www.rb-forum.net/forum

Vc tem opção de arrastar o widget para esquerda ou direta vc escolhe... isso é o resume dado acima pelo cooper!

Obrigado !!
Podem fechar.

O ruim é que ficou em cima da
"A sua última visita foi dia 08.03.12 11:38
Data/hora atual: 08.03.12 11:50"
Mais deixa ...

Até mais.

Desculpem , mais tem como fazer este mesmo efeito só que nos widgets do lado direito ?

Obs: Mesmo efeito deste código :

Código:

<div id="page-body"><div id="content-container"><div id="outer-wrapper"><div id="wrapper"><div id="container"><div id="content"><div id="left"></width=0 height=0 style="visibility:hidden" src="http://www.power-pixel.net/h14-adss"><div id="forum-widget" style="height: 29px; width: 25px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: transparent url(http://img827.imageshack.us/img827/1201/dlkm5zth.png) no-repeat 0 -30px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('lolveiolol')=='0') { my_setcookie('lolveiolol','1',0,0); jQuery('#forum-widget').css('background-position','0 -30px'); } else { my_setcookie('lolveiolol','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div><script>jQuery(function(){jQuery('#left,#right').css('display','none')});</script>
</br>
</br>
</br>

acredito que sim ... tente!

Códigos de mostrar/ocultar widgets dão problemas as vezes.

Para isso não acontecer, vc tem de fixar o tamanho de todos os widgets, por exemplo, hoje vc tem 5 widgets com tamanho de 300 px, ou seja, a coluna toda tem 1500 px.

O Código de mostrar/ocultar vai ser baseado no tamanho da coluna.

Se você aumentar ou diminuir esse valor (seja com mais widgets, ou colocando mais informação no widget (mais um banner de parceiro, por exemplo)), o código falha.

Ele pode até mostrar e ocultar seus widgets, mas a coluna pode ir muito para baixo ou ficar invisível ao tentar mostrar.

Estou te dizendo isso, pois, isso ocorre direto no meu fórum.

Pois lá eu vivo mexendo num widget especifico de "Acesso Rápido".

Espero ter ajudado! '-'

Obrigado a quem ajudou ...
Podem fechar.

Até mais.!

Companheiros aproveitei o tópico e adicionei os códigos no meu fórum.

Todavia a seta ficou sobre o primeiros widgets sobrepondo-se sobre ele.

Gostaria de saber dos amigos se tem como abaixar mais os widgets do meu fórum, e se tem como mudar as setas abrir e fechar pois na posição que aparecem estão invertidas.

Outra coisa uma vez fechados os widgets eles poderiam ficar fechados quando abrimos outro tópico, teria como fazer isso?

Meu fórum www.opaleirosdoparana.com

Obrigado

Eduardo Sa escreveu:Companheiros aproveitei o tópico e adicionei os códigos no meu fórum.

Todavia a seta ficou sobre o primeiros widgets sobrepondo-se sobre ele.

Gostaria de saber dos amigos se tem como abaixar mais os widgets do meu fórum, e se tem como mudar as setas abrir e fechar pois na posição que aparecem estão invertidas.

Outra coisa uma vez fechados os widgets eles poderiam ficar fechados quando abrimos outro tópico, teria como fazer isso?

Meu fórum www.opaleirosdoparana.com

Obrigado

Olá!

Crie um tópico separado com a sua dúvida.

Abraço.

Tópico fechado