Jump to content
Sign in to follow this  
stingger

Div sobrepor outra div ao clicar e/ou fechar a outra.

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:

< 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>
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>

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
Sign in to follow this  

  • Similar Content

    • By Israel Lira
      Por gentileza, preciso de ajuda! estou iniciando aqui na comunidade e recente no flutter. Tenho uma missão de utilizar o json e controller dos inputs. Preciso pelo botão (ADD) sair da Primeira tela redirecionar para a Segunda tela, salvar ao colocar os inputs e retornar para a primeira mostrando (nome e valor). O formulário da Segunda Tela terá campos: nome, telefone, data e valor. Quero manter a função dismissible para termos o efeito de arrastar o item da lista. Segue o que estou fazendo mais com erros.
       
      Não sei como proceder e apanhando a vários dias!
        
      import 'dart:async'; import 'dart:convert'; import 'dart:io'; import 'package:flutter/material.dart'; import 'package:path_provider/path_provider.dart'; void main(){ runApp(MaterialApp( home: Home(), )); } class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> { final _toDoController = TextEditingController(); List _toDoList = [SegundaRota]; Map<String, dynamic> _lastRemoved; int _lastRemovedPos; @override void initState() { super.initState(); _readData().then((data) { setState(() { _toDoList = json.decode(data); }); }); } void _addToDo() { setState(() { Map<String, dynamic> newToDo = Map(); newToDo["title"] = _toDoController.text; _toDoController.text = ""; newToDo["ok"] = false; _toDoList.add(newToDo); _saveData(); }); } Future<Null> _refresh() async{ await Future.delayed(Duration(seconds: 1)); setState(() { _toDoList.sort((a, b){ if(a["ok"] && !b["ok"]) return 1; else if(!a["ok"] && b["ok"]) return -1; else return 0; }); _saveData(); }); return null; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Lista de Tarefas"), backgroundColor: Colors.blueAccent, centerTitle: true, ), body: Column( children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(17.0, 1.0, 7.0, 1.0), child: Row( children: <Widget>[ RaisedButton( color: Colors.blueAccent, child: Text("ADD"), textColor: Colors.white, onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => SegundaRota()), ); }, ) ], ), ), Expanded( child: RefreshIndicator(onRefresh: _refresh, child: ListView.builder( padding: EdgeInsets.only(top: 10.0), itemCount: _toDoList.length, itemBuilder: buildItem),), ) ], ), ); } Widget buildItem(BuildContext context, int index){ return Dismissible( key: Key(DateTime.now().millisecondsSinceEpoch.toString()), background: Container( color: Colors.red, child: Align( alignment: Alignment(-0.9, 0.0), child: Icon(Icons.delete, color: Colors.white,), ), ), direction: DismissDirection.startToEnd, child: CheckboxListTile( title: Text(_toDoList[index]["title"]), value: _toDoList[index]["ok"], secondary: CircleAvatar( child: Icon(_toDoList[index]["ok"] ? Icons.check : Icons.error),), onChanged: (c){ setState(() { _toDoList[index]["ok"] = c; _saveData(); }); }, ), onDismissed: (direction){ setState(() { _lastRemoved = Map.from(_toDoList[index]); _lastRemovedPos = index; _toDoList.removeAt(index); _saveData(); final snack = SnackBar( content: Text("Tarefa \"${_lastRemoved["title"]}\" removida!"), action: SnackBarAction(label: "Desfazer", onPressed: () { setState(() { _toDoList.insert(_lastRemovedPos, _lastRemoved); _saveData(); }); }), duration: Duration(seconds: 2), ); Scaffold.of(context).removeCurrentSnackBar(); Scaffold.of(context).showSnackBar(snack); }); }, ); } Future<File> _getFile() async { final directory = await getApplicationDocumentsDirectory(); return File("${directory.path}/data.json"); } Future<File> _saveData() async { String data = json.encode(_toDoList); final file = await _getFile(); return file.writeAsString(data); } Future<String> _readData() async { try { final file = await _getFile(); return file.readAsString(); } catch (e) { return null; } } } class SegundaRota extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Segunda Rota (tela)"), ), body: Column( children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(17.0, 1.0, 7.0, 1.0), child: Row( children: <Widget>[ Expanded( child: TextField( controller: _toDoController, decoration: InputDecoration( labelText: "Nova Tarefa", labelStyle: TextStyle(color: Colors.blueAccent) ), ) ), RaisedButton( color: Colors.blueAccent, child: Text("ADD"), textColor: Colors.white, onPressed: _addToDo, ) ], ), ), Expanded( child: RefreshIndicator(onRefresh: _refresh, child: ListView.builder( padding: EdgeInsets.only(top: 10.0), itemCount: _toDoList.length, itemBuilder: buildItem),), ) ], ), body: Center( child: RaisedButton( onPressed: () { Navigator.pop(context); }, child: Text('Retornar !'), ), ), ); } }  

    • 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.
    • By geoleandro
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <div id="dq1"style="display:block"> <br><br> Conteúdo da Div 1 </div> <br><br> <span id = "bdq2" style="display:block" onclick = "divMostrar(2)">Próximo</span><br><br> <div id="dq2"style="display:none"> Conteúdo da Div 2 </div> <br><br> <span id = "bdq3" style="display:none" onclick = "divMostrar(3)">Próximo</span><br><br> <div id="dq3"style="display:none"> Conteúdo da Div 3 </div> <br><br> <span id = "bdq4" style="display:none" onclick = "divMostrar(4)">Próximo</span><br><br> <div id="dq4"style="display:none"> <br><br> Conteúdo da Div 4 </div> <br><br> <span id = "bdq5" style="display:none" onclick = "divMostrar(5)">Próximo</span><br><br> <div id="dq5"style="display:none"> <br><br> Conteúdo da Div 5 </div> <br><br> <span id = "bdq6" style="display:none" onclick = "divMostrar(6)">Próximo</span> <div id="dq6"style="display:none"> Terminou! </div> <script> function divMostrar(qnum){ if (document.getElementById("bdq2").style.display='block'&& qnum==2) { document.getElementById("dq2").style.display='block'; document.getElementById("bdq2").style.display='none'; document.getElementById("bdq3").style.display='block'; } if (document.getElementById("bdq3").style.display='block' && qnum==3){ document.getElementById("bdq3").style.display='none'; document.getElementById("dq3").style.display='block'; document.getElementById("bdq4").style.display='block'; } if (document.getElementById("bdq4").style.display='block' && qnum==4){ document.getElementById("bdq4").style.display='none'; document.getElementById("dq4").style.display='block'; document.getElementById("bdq5").style.display='block'; } if (document.getElementById("bdq5").style.display='block' && qnum==5){ document.getElementById("bdq5").style.display='none'; document.getElementById("dq5").style.display='block'; document.getElementById("bdq6").style.display='block'; } if (document.getElementById("bdq6").style.display='block' && qnum==6){ document.getElementById("bdq6").style.display='none'; document.getElementById("dq6").style.display='block'; } } </script> </body> </head> </html> De que outro modo é possível programar para abrir essas Divs em sequência? Além do uso de IFs e else em JavaScript.
    • By DanielF
      Pessoal Eu Recentemente estava fazendo um gerador de qr-code, e preciso criar um botão que quando a pessoa clique apareça para poder baixar/fazerdownload da imagem gerada, pode me ajuda? to preso nisso faz tempo, e se puderem podem Organizar o codigo para mim? 
       
       
       
       
       
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>QR-Code</title>
          <style type="text/css">
              #qrcode {
                  border: 1pt solid gray;
                  display: inline-block;
              }
          </style>
      </head>
      <body>
          <center>
              <input type="text" name="qrtexto" id="qrtexto" onkeypress="gerarqr();" onkeyup="gerarqr();"><br>
              <br>
              <button onclick="gerarqr();" on>Gerar</button>
              <button onclick="limpar();" on>Limpar</button>
          </center>
          <br>
          <br>
      <center>
          <div id="qrcode"></div>
      </center>
      <br>
      <center>
      <button onclick="baixar();">Baixar (Em Breve)</button>
      </center>
      <script src="qrcode.min.js"></script>
      <script>
          qrcode.innerHTML="<img src='limpo.png'>";
          function gerarqr(){
      var qrcode=document.getElementById('qrcode');
      qrcode.innerHTML=" ";
      var texto=document.getElementById("qrtexto").value;
          var qrcodee = new QRCode(qrcode, {
          text: texto,
          width: 300,
          height: 300,
          colorDark : "#000000",
          colorLight : "#ffffff",
          correctLevel : QRCode.CorrectLevel.H
      });
      }
      function limpar(){
      qrcode.innerHTML="<img src='limpo.png'>";
      }
      function baixar() {
      }
      </script><br><br><br><br><br><br><br>
      <h6 align="center">Feito por Itz_Topz</h6>
      </body>
      </html>
×

Important Information

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