Jump to content


Photo

Mostrando/Escondendo camadas


  • Faça o login para participar
37 replies to this topic

#1 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 21/12/2002, 15:13

Quero iniciar este tutorial falando primeiramente o que é suporte a W3C.

Os browsers que suportam códigos W3C são: IE5+, NS6+, Opera, Mozilla.

Para os que se interessarem mais sobre o assunto, chequem este link (em Inglês): http://www.w3c.org/

Por que somente o suporte aos browsers W3C?
A tendência que temos hoje é de que todos os browsers convirjam para S.C. (Standards Compliant), que nada mais é que uma linguagem única que funcione em todos os navegadores.

Vamos primeiro, ter uma noção de como acessar uma camada.

Há duas formas de se acessar uma camada (tag DIV nos browsers W3C). Vamos utilizar somente 1 forma, a mais prática, que acessa a camada diretamente pela identidade dela.
A outra forma, que não convém neste tutorial explicar de forma mais profunda, é o acesso à camada via a captura da tag DIV; e, para chegar até a camada desejada, conta-se à partir do 0 a posição da camada no documento.
Como o primeiro método é mais prático, nós o usaremos.
Para acessar à camada, utilizaremos este código:
document.getElementById
Traduzindo, seu significado é documento.pegueElementoPelaIdentidade.

Acessando uma camada com identidade definida:
document.getElementById('nome_da_camada')

Já possuímos a base para o código JS, mas falta ainda explicar o código HTML da camada.
Para se ter uma boa idéia sobre DIVs, olhe este tutorial (também de minha autoria) netse endereço: http://forum.wmonlin...=ST&f=25&t=2651

Devo ressaltar, que estamos conversando neste momento sobre DHTML (JS + CSS). Hein?!
Para se atribuir estados, comportamentos, posiciomentos, tamanhos na camada, usamos CSS (cascading Style Sheets, ou Folhas de Estilo). Ao mesmo tempo, usamos recursos do XHTML (a tag DIV) e JavaScript (particularmente, DOM (Document Object Model, ou Modelagem de Objeto do Documento)). Esta interação, JS + CSS, a maioria dos autores atribuem como sendo DHTML (Dynamic HTML).

Bem, sabemos como criar camadas e como acessar uma camada.
Agora, vamos ver o algoritmo de como mostrar e esconder o nosso DIV.

função nome() {
se( camada escondida ) {
mostra camada;
} senão {
esconde camada;
}
}

Lembre-se do tutorial sobre DIVs... o atributo CSS VISIBILITY mostra ou esconde o DIV.
Para iniciar com a camada escondida, insira no seu atributo inicial VISIBILITY: hidden.

Para acessar a propriedade VISIBILITY, acessamos a camada e em seguida a visibilidade dela, desta forma:
document.getElementById('nome_da_camada').style.visibility

Sendo assim, podemos codificar nosso algoritmo para JS.
function camada() {
if( document.getElementById('nome_da_camada').style.visibility == "hidden" ) {
document.getElementById('nome_da_camada').style.visibility = "visible";
} else {
document.getElementById('nome_da_camada').style.visibility = "hidden";
}
}


Com isso, concluímos o objetivo do tutorial. Para chamar a função, use como ONCLICK isto:
camada();


A partir de agora, vamos melhorar a performance do nosso código.
Observe que a tag document.getElementById('nome_da_camada') se repete várias vezes. poderíamos atribuí-la numa variável a somente chamar a variável + .style.visibility. Isso melhoraria o tamanho do código (ficaria menor) e ajudará nos próximos upgrades que daremos daqui a pouco.
Fazendo a atribuição na variável, nosso código ficaria assim:
function camada() {
var sDiv = document.getElementById('nome_da_camada');
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}


A chamada para a função, continuaria a mesma.

Bem melhor assim, não?!
Se você analisar o tamanho do código em TXT, veremos que o primeiro usa 275 bytes e o segundo, 215 bytes. Por mais que você possa dizer que a diferença é pequena, qualquer redução no tamanho do código, aumenta a performance do seu site.


Até o exato momento, se você quisesse utilizar somente uma camada, este código seria suficiente para mostrar/esconder nossa camada. Mas imagine utilizar 100 camadas... como ficaria? Usaremos 1 código para cada camada? Não... seu arquivo ficaria com o tamanho de centenas de kb. Isto seria inviável para um site.
Por isto, existe um recurso chamado passagem de parâmetros. Com ele, podemos chamar diferentes camadas usando somente um código.
Vamos ver como fica nosso código usando passagem de parâmetros:
function camada( sId ) {
var sDiv = document.getElementById(sId);
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}


Pode-se notar que alteramos somente um pequeno trecho de código ('nome_da_camada' para sId) e atribuímos um parâmetro sId na chamada da função. Assim, alteramos a forma de como chamá-la e o código passado anteriormente (camada();) não seria mais válido. Agora, temos que usar assim nosso código:
camada('nome_da_camada');

Lembre-se que não adianta nada possuir o código, a chamada, sendo que não temos a camada definida; portanto, FIQUE ATENTO!

Para concluir, fiz um código de exemplo e vou postá-lo aqui.
Lá vai!

<HTML>
  <HEAD>
    <TITLE>Mostrar/Esconder camadas - por Guilherme Blanco</TITLE>
    <script>
      function camada( sId ) {
        var sDiv = document.getElementById( sId );
        if( sDiv.style.visibility == "hidden" ) {
          sDiv.style.visibility = "visible";
        } else {
          sDiv.style.visibility = "hidden";
        }
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <A HREF="#" ONCLICK="camada('menu');">Abre e fecha a camada 'menu'</A>

    <!-- Camada 'menu' -->
    <DIV ID="menu" STYLE="POSITION: absolute; TOP: 35px; LEFT: 5px; WIDTH: 400px; HEIGHT: 300px; ZINDEX: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: hidden;">
      Testando a visibilidade da camada
    </DIV>
  </BODY>
</HTML>

Salve este código como um arquivo HTML e teste-o no seu navegador.

Espero ter dado uma boa noção de DIVs e a alternância de visibilidade de camadas aqui.
Caso alguma dúvida, entre em contato comigo.
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#2

  • Visitantes

Posted 28/10/2003, 14:56

Olá, super legal este artigo, contudo tenho 4 dúvidas!

1- É possível fazer uma camada com o fundo 50% visível, ou seja fazer uma camada que ao clicar ela tenha o fundo preto, mas apareça parcialmente a página de fundo que sustenta a camada????

2- É possível fazer o efeito de ao clicar num link a camada que esta invisível fica visível mas esmaecendo, ou seja ir aparecendo aos poucos e não de uma hora pra outra????

3- O FrontPage tem este recurso? Sem precisar mexer com códigos???? Se sim como usa-lo?

Grato pela atenção!

André

#3 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 30/10/2003, 23:53

Dois deles são rápidos de responder... e vou respondê-los agora... o outro requer um pouco mais de explicação, que farei amanhã.

1- Sim, basta você setar isto em 2 propriedades CSS (uma pra rodar em IE e a outra pra Mozilla).

<!-- Camada 'menu' -->
<DIV ID="menu" STYLE="POSITION: absolute; TOP: 35px; LEFT: 5px; WIDTH: 400px; HEIGHT: 300px; ZINDEX: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: hidden;
filter: alpha(opacity=50); -moz-opacity: 0.5;">
Testando a visibilidade da camada
</DIV>


2- Sim, mas vou explicar amanhã.

3- Não... e aconselho você a ler tutoriais e apostilas sobre HTML, pois ela é a linguagem básica da Web. Após isto, você estará apto a usar somente o Bloco de Notas ou outro editor que não seja do tipo WYSIWYG.

Grato,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#4 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 03/11/2003, 14:18

Vejamos...

o que você deve fazer é múltiplas setagens de alpha até obter o valor desejado.

Assim:

var sOpacityLimit = 50;

function fadeIn( sId, sOpacity ) {
  if( sOpacity == undefined )
    var sOpacity = 100;
     
  sOpacity -= 5;
  if( sOpacity >= sOpacityLimit ) {
    document.getElementById( sId ).filter = "alpha(opacity="+ sOpacity + ")";
    window.setTimeout("fadeIn("+sId+","+sOpacity+")", 200);
  }
}

Siga o mesmo raciocínio para o fadeOut, mas lembre-se de setar visibility = hidden quando o alpha chegar a 100.

[]s,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#5 Visitante_André

Visitante_André
  • Visitantes

Posted 21/11/2003, 19:30

Olá, eu consegui fazer com o dreamweaver as camadas do jeitnho que eu queria, o efeito de tranparencia eu coloquei na mão, mas parte de ir esmaecendo ao clicar, eu não consgui! não sei como introduzir este código que vc me enviou no meu site, poderia me ajudar de NOVO???


GRatissimo

André

#6 Visitante_André

Visitante_André
  • Visitantes

Posted 21/11/2003, 19:33

Mais uma cosinha, há a possibilidade de fazer a camada em vez de quadrada, arredondada nas pontas???

Obrigado
Andr

#7 . ErroR 4o4 . NoT FounD .

. ErroR 4o4 . NoT FounD .

    "We've Got Nothing To Fear"

  • Usuários
  • 75 posts
  • Sexo:Não informado
  • Localidade:Rio de Janeiro
  • Interesses:Natureza, trilhas, acampamentos, filosofia, gadgets, handdelds, hi-tech<br /><br />é... um pouco equilibrado entre o lado natural e o &quot;artificial&quot;.<br /><br />pq um dos princípios da vida é ser feliz, e no equilíbrio eu acho a minha felicidade.

Posted 22/11/2003, 07:36

Mais uma cosinha, há a possibilidade de fazer a camada em vez de quadrada, arredondada nas pontas???

Obrigado
Andr

você quer dizer uma div com cantos arredondados neh ???

bom cara, eu naum entendo nada dee JS e nem de DHTML ... mas uma vez qdo fui criar um "vizualzinho" pra uma dessas . eu tive q fazer uma imagem, tipo um canto arredondado e inserir na DIV ... nos 4 cantos ... e o GB ,q tava acompahando o trabalho, naum falou nada de colocar canto arredondado por codigo naum ......
mas de qualquer forma eu naum sei certo.... mas eu acho q naum ...
O SUPÉRFLUO E O NECESSÁRIO

Uns queriam um emprego melhor; outros, só um emprego.
Uns queriam uma refeição mais farta; outros, só uma refeição.
Uns queriam uma vida mais amena; outros, apenas viver.
Uns queriam pais mais esclarecidos; outros, ter pais.
Uns queriam ter olhos claros; outros, enxergar.
Uns queriam ter voz bonita; outros, falar.
Uns queriam silêncio; outros, ouvir.
Uns queriam sapato novo; outros, ter pés.
Uns queriam um carro; outros, andar.
Uns queriam o supérfluo; outros, apenas o necessário.

(Chico Xavier)

#8 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 23/11/2003, 17:19

Não tem como. =\

[]s,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#9 Visitante_André

Visitante_André
  • Visitantes

Posted 24/11/2003, 13:08

Nem o esquema das camadas ao aparecerem irem aparecendo aos poucos, ao contrário de como está agora, agora estaá assim: quando eu clico num botão ela aparece rapdinho na mesma velocidade do clique!

;)

#10 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 25/11/2003, 09:22

Dê uma olhada na pseudo-função fadeIn que eu criei a uns 5 posts atrás, neste mesmo tópico.

[]s,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#11 sergioamim

sergioamim

    Novato no fórum

  • Usuários
  • 18 posts
  • Sexo:Não informado

Posted 17/12/2003, 11:10

para chamar esta função eu uso:
onMouseOver="fadeIn(this.id, 100)"
esta e a função:
<script language="javascript">
var sOpacityLimit = 50;

function fadeIn( sId, sopacity ) {
 if( sopacity == undefined )
   var sopacity = 100;
 sopacity -= 5;
 if(sopacity >= sOpacityLimit ) {
   document.getElementById(sId).style.filter = "alpha(opacity="+ sopacity + ")";
   window.setTimeout("fadeIn("+sId+","+sopacity+")", 200);
 }
}
</script>
quando eu passo o mouse em cima me retorna
"Objeto Necessário"
nesta linha: document.getElementById(sId).style.filter = "alpha(opacity="+ sopacity + ")";
me diga oq esta acontecendo porfavor pois eu não enxergo o problema! (y)

#12 sergioamim

sergioamim

    Novato no fórum

  • Usuários
  • 18 posts
  • Sexo:Não informado

Posted 17/12/2003, 15:55

function fadeIn( id, op ) {
 if( op == undefined )
   var op = 100;
  op = eval(op) - 5;
  if (op >= opLimit ) {
  document.getElementById(id).style.filter="alpha(opacity='"+op+ "')";
	window.setTimeout("fadeIn('"+id+"','"+op+"')", 200);
	}
}
este é o código correto era simplesmente problema de UB (Usuário Burro) q sou eu mesmo :wacko:
valeu guilherme!!!

#13 Nando

Nando

    Eta eta eta, brasileiro quer.. futibol, mulher e rock'n roll

  • Usuários
  • 916 posts
  • Sexo:Masculino
  • Localidade:Sapucaia do Sul - RS
  • Interesses:Não sou interesseiro.

Posted 19/01/2004, 10:33

Bem eu tentei e ñ deu certo (aí modifiquei de volta) eu queria mostrar somente parte "NEws Letter:" e quando clicasse ela mostraria o conteúdo só q ñ deu certo....Alguém pode criar o código pra mim?
Eu tenho o código aqui q mostra o q q teria q ser feito (à e ele só fica totalemente visivel no fórm pra causa de alguns class ao eu...
Bem o código e esse e eu queria fazer com q fosse q nem na reposta rápida!
<br>
<font size='1'></font>
<div class="tableborder">
  <div class="maintitle" align="left">
<img alt=">" src="http://www.hiperforum.com.br/style_images/1/nav_m.gif" border="0" width="8" height="8">&nbsp;News Letter:</a>
  </div>
<table cellSpacing="1" cellPadding="4" width="100%" border="0">
    <tbody>
      <tr>
        <th class="titlemedium" align="left" width="100%">Novidades no seu email:</th>
      </tr>
      <tr>
        <td class="row4" align="center">
Receba Atualizações pela nossa News Letter, é só prencher com seu email que receberá as + novas novidades quentíssimas do WS Fórum:<form action="http://www.portalwebmaster.net/cgi-bin/listmail/email.cgi" method="post">
<br>
<input type="text" name="email" size="20">
  <input type="submit" value="Inserir Email">
  <input type="hidden" name="login" value="Master Neo">
  <input type="hidden" name="acao" value="adicionar">
      </tr>
      <tr>
        <td class="darkrow2">&nbsp;</td>
      </tr>
    </tbody>
  </table>

Qualquer dia será só 1 linha de assinatura! x) Aí vou deixar essa aki mesmo já pra garantir.
Fireworks: llllllllllllllllllllllllllllll (Jah mexo a tempo mas ando meio parado)
Dreamweaver: llllllllllllllllllllllllllllll (Braço direito enquanto programo)
Js: llllllllllllllllllllllllllllll (Recem iniciando)
PHP: llllllllllllllllllllllllllllll (Dinamic Punch!!)

#14 Stormbringer

Stormbringer

    I'd love to stay with you all

  • Ex-Admins
  • 2927 posts
  • Sexo:Não informado
  • Localidade:Goiânia - GO
  • Interesses:Atualmente: pesquisa e desenvolvimento de web-games

Posted 20/07/2004, 14:13

essa funcaozinha de fade só funciona no IE
portanto, é bom deixar a opacidade original alta, caso a funcao nao tenha efeito.

๑۩۞۩๑Let the Carnage Begin!!๑۩۞۩๑


#15 Stress

Stress

    Veterano

  • Monitores
  • 1111 posts
  • Sexo:Masculino
  • Localidade:Salvador-BA

Posted 26/03/2005, 02:55

Vai desculpando por upar o post.

A minha dúvida é semelhante a essa.

Siga esse post http://forum.wmonlin...howtopic=112085 estou querendo isso,mas sem o link fosse só a janela como fosse um bilhete fixado no layout.
Stress - Monitor Webfórum - Equipe de Editores Web / Negócios & Oportunidades

Desde de 2002 usuário ativo.(antigo nick que deu tilt era XITEM).

Posted Image




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq