Jump to content
stingger

Div sobrepor outra div ao click.

Recommended Posts

Tenho duas divs, ao clicar no comando ela aparece, ao clicar novamente desaparece. Estou querendo fazer com que pelo menos uma das duas fique visível sempre, ou seja, ao clicar em um ele sobreponha sobre o outro e vice-versa. Já tentei usar z-index no script mas não consegui. Segue o comando:

 

SCRIPT:

< script>
function camada( sId ) {
var sDiv = document.getElementById( sId );
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
sDiv.style.height = "300px";
} else {
sDiv.style.visibility = "hidden";
sDiv.style.height = "1px";
}
}
</ script>
< body>
<A HREF="#" ONCLICK="camada('menu')">Abre e fecha a camada 'menu'</A>
<!-- Camada 'menu' -->
<DIV ID="menu" STYLE=" position: fixed; TOP: 35px; LEFT: 5px; WIDTH: 800px; HEIGHT: 300px; z-index: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: visible;">
CAMADA 1</DIV>
<!-- Camada 'menu' -->
<A HREF="#" ONCLICK="camada('menu2');">Abre e fecha a camada 'menu'</A>
<!-- Camada 'menu' -->
<DIV ID="menu2" STYLE=" position: fixed; TOP: 35px; LEFT: 5px; WIDTH: 800px; HEIGHT: 300px; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: hidden;">
CAMADA 2
</DIV>
</ body>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By LucasRochaPL
      Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado.
      <style> * {box-sizing: border-box;}   .container {   position: relative;   width: 50%;   max-width: 300px; }   .image {   display: block;   width: 100%;   height: auto; }   .overlay {   position: absolute;    bottom: 0;    background: rgb(0, 0, 0);   background: rgba(0, 0, 0, 0.5); /* Black see-through */   color: #f1f1f1;    width: 100%;   transition: .5s ease;   opacity:0;   color: white;   font-size: 20px;   padding: 20px;   text-align: center; }   .container:hover .overlay {   opacity: 1; } .container::after {   content: "";   clear: both;   display: table; } </style>   <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de      rádios e equipamentos, para atender melhor      a necessidade de nossos clientes, trabalhamos com rádios moveis,      portáteis e equipamentos para videomonitoramento. </p>   <div class="titulo">Portáteis</div> <div class="container">     <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image">     <div class="overlay">Motorola DEP450</div> </div> <div class="container">     <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image">     <div class="overlay">Motorola EP450</div> </div> <div class="container">     <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image">     <div class="overlay">Motorola DGP8050</div> </div>   <div class="titulo">Móveis</div>   <div class="container">     <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image">     <div class="overlay">Motorola DEM300</div> </div>   <div class="titulo">Videomonitoramento</div>   <div class="container">     <img src="products/images/intelbrass3330.jpg" alt="camera " class="image">     <div class="overlay">Câmera Intelbras S3330</div> </div>   
    • By mamotinho
      Olá, a alguns dias eu percebi que estou com um único problema no código do meu site , e queria sabe se é possível eu corrigir essa mensagem de erro segue abaixo imagem do erro.
       

    • By higordiasz
      Boa Tarde,
      Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
       
      Segue meu código CSS responsável pelas div.
       
      .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
       
      <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
       

       
      Alguem sabe oq posso alterar para alinhar elas corretamente ? 
    • By Mauricio Molina
      Ola,
       
      Tenho este script que peguei na internet, conheço pouco de javascript, para calcular o valor de dois inputs e adicionar a outro input o resultado, esta funcionando corretamente com as alterações que fiz.
       
      Da maneira que eles esta, o resultado esta sendo gerado em forma de moeda ex 20,00.
       
      Gostaria que ele gerasse um numero sem as duas casas após a vírgula, ex 20, e se caso o resultado der 4 dígitos que colocasse ponto automaticamente, ex 2.000
       
      Alguém pode dar uma força?
       
      <script type="text/javascript"> function id(el) { return document.getElementById( el ); } function metros_perc( un, cooper ) { return parseFloat(un.replace(',', '.'), 10) * parseFloat(cooper.replace(',', '.'), 10); } window.onload = function() { id('mquadra').addEventListener('keyup', function() { var result = metros_perc( this.value , id('cooper').value ); id('metros_perc').value = String(result.toFixed(2)).formatMoney(); }); id('cooper').addEventListener('keyup', function(){ var result = metros_perc( id('mquadra').value , this.value ); id('metros_perc').value = String(result.toFixed(2)).formatMoney(); }); } String.prototype.formatMoney = function() { var v = this; if(v.indexOf('.') === -1) { v = v.replace(/([\d]+)/, "$00"); } v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20"); v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2"); v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3"); return v; }; </script> Obrigado!
    • By Thiago Gomes Carlos
      Construir um algoritmo usando o Visual Studio Code, utilizando somente o for
       
      Fulano tem 1,50 metro e cresce 2 centímetros por ano, enquanto Ciclano tem 1,10 metro e cresce 3 centímetros por ano. Construa um algoritmo que calcule e imprima quantos anos serão necessários para que Ciclano seja maior que Fulano.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.