Aba lateral

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

Resolvido Aba lateral

Mensagem por HangoveR em 23/09/12, 11:11 pm

Qual é minha questão:
Olá, gostaria de saber como adiciono isso olha
VOU DAR UM EXEMPLO!
como ele ficaria, veja no rodapé da print

Aí você da um clique ali e abre essa janela, olha como ficaria

Desde já obrigado!

Links e imagens do meu problema:
Não é necessário.

Endereço do meu fórum:
http://tssabr.forumeiros.com

Versão do meu fórum:
PHPBB3


Última edição por Caaio em 02/10/12, 12:55 am, editado 1 vez(es)
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por Josh em 23/09/12, 11:31 pm

Oi!

Que eu saiba, ainda não há um script do que o senhor quer. O senhor deseja um objeto retrátil. Vamos lá:
Código:
function mytoggle(elm) {
  var module = document.getElementById(elm);
  if (module.style.display == "none") {
      module.style.display = "block";
  }
  else {
      module.style.display = "none";
  }
}
Então, o que a função faz?

Começamos com declarar uma função JavaScript com uma seleção dentro do parâmetro (o que significa que podemos encontrar o elemento dentro de um manipulador de eventos, e tem alterna múltiplos na página). Em seguida, criamos uma variável para encurtar o comprimento do JavaScript. Isto significa que o módulo variável, é igual a document.getElementById(elm).

Agora vamos começar com a criação de uma declaração if e else. Primeiro vamos verificar se o olmo do parâmetro está escondido, e se isso é verdade, estamos manipulando com o seu estilo, e torná-lo visível. Mas se é falsa, então podemos concluir que o elemento deve ser visível, e, portanto, estamos em vez mudando de exibição de propriedade a nenhum, eq. escondê-lo. E é sobre isso.

Então, como vamos usar a função?

Bem, isso é fácil. Podemos ativá-lo através de um manipulador de eventos ou funções de JavaScript outros, simplesmente mudar o parâmetro para a identificação do elemento que deve ser alternado. Então, se nós escrevemos mytoggle("randomelement"), será o elemento com o ID de randomelement ser alternado.

Um exemplo rápido poderia ser assim (modificá-lo para uso próprio, ou responder a este tópico, se você quiser ajuda):
Código:
<script type="text/javascript">
function mytoggle(elm) {
  var module = document.getElementById(elm);
  if (module.style.display == "none") {
      module.style.display = "block";
  }
  else {
      module.style.display = "none";
  }
}
</script>

<a href="javascript:mytoggle('visiblediv');">Toggle div</a>
<div id="visiblediv">Content of one element to toggle.</div>

<a href="javascript:mytoggle('hiddendiv');">Toggle div</a>
<div id="hiddendiv" style="display: none;">Content of another element to toggle.</div>
Eu iria montar uma página, apresentando o final do tutor, mais não tenho tempo agora.

Até mais, amigo!
Muito feliz
avatar

Josh
Membro do Fórum

Inscrito dia : 03/03/2012
Mensagens : 1170
Pontos Ativos : 1512

Ver perfil do usuário

Resolvido Re: Aba lateral

Mensagem por HangoveR em 23/09/12, 11:46 pm

Cara, eu já vi em outros fóruns geralmente as pessoas usam para o chat
http://bcvgames.forumbrasil.net/
nesse fórum tem, XAT você clica e aparece lá o chat, gostaria disso, mas não com o chat outra coisa, seria possível?
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por Josh em 24/09/12, 12:03 am

Buenas!

Crie a página HTML com o conteúdo e, depois faça isto:
Painel de controle (Avançado) >> Módulos >> Portal & Widgets >> Gestão dos widgets (fórum/portal) >> Novo widget personalizado
Crie o widget com este código:

Modifique o valor em vermelho pelo ID da página HTML que foi criada recentemente.

Abraços.
avatar

Josh
Membro do Fórum

Inscrito dia : 03/03/2012
Mensagens : 1170
Pontos Ativos : 1512

Ver perfil do usuário

Resolvido Re: Aba lateral

Mensagem por HangoveR em 24/09/12, 12:20 am

Isso mesmo que eu quero, mas gostaria de saber como arrumo, pois está saindo o incio do meu fórum, e ele não abre e fecha..
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 24/09/12, 12:21 am

E gostaria de saber como coloco ele em baixo ( no rodapé )
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 24/09/12, 10:55 am

Olá, alguém sabe fazer isto ? poderia me ajudar ?
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por MateusV. em 24/09/12, 01:10 pm

Olá!

Substitua o código por este:
<div class="msg-fixed" style="position: fixed;width: 40%;height: 80%;background: gray;z-index: 9999 !important;top: 40%;right: 15%;padding: 7px;">teste</div>

Abraços. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Aba lateral

Mensagem por HangoveR em 24/09/12, 09:46 pm

Não deu, seguinte cara
eu queria colocar esse link olha
Abra o spoiler..
Spoiler:
Código:
<!-- LiveZilla Chat Button Link Code (ALWAYS PLACE IN BODY ELEMENT) --><div style="text-align:center;width:145px;"><a href="javascript:void(window.open('http://shopa.tssabrasil.com.br/chat.php','','width=590,height=610,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))"><img src="http://shopa.tssabrasil.com.br/image.php?id=04&amp;type=inlay" width="145" height="152" border="0" alt="LiveZilla Live Help" /></a><div style="margin-top:2px;"><a href="http://www.livezilla.net/" target="_blank" title="LiveZilla Live Help" style="font-size:10px;color:#bfbfbf;text-decoration:none;font-family:verdana,arial,tahoma;">LiveZilla Live Help</a></div></div><!-- http://www.LiveZilla.net Chat Button Link Code --><!-- LiveZilla Tracking Code (ALWAYS PLACE IN BODY ELEMENT) --><div id="livezilla_tracking" style="display:none"></div><script type="text/javascript"> var script = document.createElement("script");script.type="text/javascript";var src = "http://shopa.tssabrasil.com.br/server.php?request=track&output=jcrpt&nse="+Math.random();setTimeout("script.src=src;document.getElementById('livezilla_tracking').appendChild(script)",1);</script><noscript>&amp;amp;amp;amp;amp;lt;img src="http://shopa.tssabrasil.com.br/server.php?request=track&amp;amp;amp;amp;amp;amp;amp;output=nojcrpt" width="0" height="0" style="visibility:hidden;" alt=""&amp;amp;amp;amp;amp;gt;</noscript><!-- http://www.LiveZilla.net Tracking Code -->
Então eu queria isso aí, quando você abre a " aba " ele abre com essa imagem e html etc...
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por BrunoH. em 25/09/12, 01:27 pm

Olá Caaio, tudo bem? Piscada
Leia este tópico:
http://ajuda.forumeiros.com/t64362-

Passar bem! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Aba lateral

Mensagem por HangoveR em 25/09/12, 07:02 pm

Bom, é isso mesmo que eu quero valeu cara!
mas agora é o seguinte, onde coloco meu code que é o do " botão " do shop do meu fórum ? que lugar do code eu coloco ?
Eu usei esse code pra colocar a aba
Código:
jQuery(document).ready(function(){s="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();";jQuery('body').prepend('<div style="overflow: visible; position: fixed; bottom: 30px; height: 450px; right: 0px; z-index:1000;"><iframe src="" id="chatboxpop" scrolling="yes" style="height: 300px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:530px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="'+s+'" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://i32.servimg.com/u/f32/17/42/80/81/button12.png" id="chatboxopen" style="display: inline; "><img src="http://i32.servimg.com/u/f32/17/42/80/81/button11.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>')});
Agora queria saber onde adc o code do botão
o code do botão é esse
Código:
<!-- LiveZilla Chat Button Link Code (ALWAYS PLACE IN BODY ELEMENT) --><div style="text-align:center;width:145px;"><a href="javascript:void(window.open('http://shopa.tssabrasil.com.br/chat.php','','width=590,height=610,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))"><img src="http://shopa.tssabrasil.com.br/image.php?id=04&amp;type=inlay" width="145" height="152" border="0" alt="LiveZilla Live Help" /></a><div style="margin-top:2px;"><a href="http://www.livezilla.net/" target="_blank" title="LiveZilla Live Help" style="font-size:10px;color:#bfbfbf;text-decoration:none;font-family:verdana,arial,tahoma;">LiveZilla Live Help</a></div></div><!-- http://www.LiveZilla.net Chat Button Link Code --><!-- LiveZilla Tracking Code (ALWAYS PLACE IN BODY ELEMENT) --><div id="livezilla_tracking" style="display:none"></div><script type="text/javascript"> var script = document.createElement("script");script.type="text/javascript";var src = "http://shopa.tssabrasil.com.br/server.php?request=track&output=jcrpt&nse="+Math.random();setTimeout("script.src=src;document.getElementById('livezilla_tracking').appendChild(script)",1);</script><noscript>&amp;amp;amp;amp;amp;lt;img src="http://shopa.tssabrasil.com.br/server.php?request=track&amp;amp;amp;amp;amp;amp;amp;output=nojcrpt" width="0" height="0" style="visibility:hidden;" alt=""&amp;amp;amp;amp;amp;gt;</noscript><!-- http://www.LiveZilla.net Tracking Code -->
Se alguém ajudar, lembrando quero que abre a aba com essa imagem aí quando clica na imagem abre a janelinha tals..
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 26/09/12, 10:03 am

Alguém sabe ?
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 26/09/12, 08:29 pm

Pow namoral mesmo, ajuda eu colocar aí só o code no outro code
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por Ping_XXT em 26/09/12, 08:32 pm

Eu tenho a mesma dúvida, oque você quer deve ser Algum objeto retrátil exemplo um perfil retrátil.
avatar

Ping_XXT
Nível 8

Masculino
Inscrito dia : 23/09/2012
Mensagens : 113
Pontos Ativos : 167

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 26/09/12, 08:37 pm

UP
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 27/09/12, 09:45 am

UP
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por Hyouki em 27/09/12, 09:53 am



Painel de controle Seta Mòdulos HTML e Javascript Seta Gestão das páginas HTML Seta Criar uma página HTML

Cole o seguinte código:
Código:
<br><body background="http://i.imgur.com/aYFXz.png">
 <img src="http://i.imgur.com/or4Ss.png">
<no><a href="http://zone-pixel.forumeiros.com/t456-shop-alterar-nome-de-usuario"> <img src="http://i.imgur.com/XZ5w0.png"> </a>
<img src="http://i.imgur.com/yTE2G.png">
<a href="http://zone-pixel.forumeiros.com/t405-shop-cores-no-nick"> <img src="http://i.imgur.com/eVZss.png"> </a>
<img src="http://i.imgur.com/yTE2G.png">
<a href="http://zone-pixel.forumeiros.com/t40-shop-tranferencia-de-moedas"> <img src="http://i.imgur.com/o1gU4.png"> </a>
<img src="http://i.imgur.com/yTE2G.png">
<a href="http://zone-pixel.forumeiros.com/t265-shop-compra-de-vip"> <img src="http://i.imgur.com/NFIXG.png"> </a>

</body>

Painel de controle Seta Mòdulos Portal e Widgets Seta Gestão dos widgets do fórum Seta Criar um widget personalizado
Cole o seguinte código:
<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/hN-" id="chatboxpop" scrolling="yes" style="height: 200px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:620px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://img.hotwords.com.br/v2/campanhas/brasil/2011/10/9470/4650/original/orelha.png" id="chatboxopen" style="display: inline; "><img src="http://img.hotwords.com.br/v2/campanhas/brasil/2011/10/9470/4650/original/orelha.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>

Modifique o valor em vermelho pelo número da página HTML.
Cumprimentos, Lucasxd111
avatar

Hyouki
Membro do Fórum

Masculino
Inscrito dia : 10/02/2012
Mensagens : 1490
Pontos Ativos : 1972

Ver perfil do usuário http://www.forum-dix.wikiforum.net

Resolvido Re: Aba lateral

Mensagem por HangoveR em 27/09/12, 10:23 am

Não deu certo cara, olha no meu que eu coloquei foi o Java Script aí apareceu a imagem lá com o efeito de fechar e abrir, mas não consigo colocar o meu code dentro
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 27/09/12, 09:25 pm

Alguém me ajuda
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 29/09/12, 02:05 pm

??
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 30/09/12, 12:48 am

alguem please
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

Resolvido Re: Aba lateral

Mensagem por HangoveR em 01/10/12, 07:46 pm

Aí pode fechar, ngm mais me ajudou fui atras de arrumar e consegui, pode fechar!
avatar

HangoveR
Usuário destaque

Masculino
Inscrito dia : 22/08/2012
Mensagens : 662
Pontos Ativos : 923

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

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