Ir para conteúdo
guilherme.audi

só uma DIV não está obedecendo .display="none/table"

Recommended Posts

Olá, pessoal,

Sou meio-leigo e logo mais serei vesgo... não entendi onde está o problema:

 

Tenho uma situação de submenu bem simples, que deve mostrar (display="table") e esconder (display="none") algumas divs, conforme a seleção do usuário.

No início da página antes do <head> criei a seguinte estrutura:

 

<!-- CONTROLE DE ABAS :: MENU DETALHES -->
<script>
    function SelecCarac() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "table";
        dimensoes.style.display = "none";
        projeto3d.style.display = "none";
        videotutorial.style.display = "none";
        esquemafios.style.display = "none";
    }
    function SelecDimensoes() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "none";
        dimensoes.style.display = "table";
        projeto3d.style.display = "none";
        videotutorial.style.display = "none";
        esquemafios.style.display = "none";
    }
    function Selec3D() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "none";
        dimensoes.style.display = "none";
        projeto3d.style.display = "table";
        videotutorial.style.display = "none";
        esquemafios.style.display = "none";
    }
    function SelecVideo() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "none";
        dimensoes.style.display = "none";
        projeto3d.style.display = "none";
        videotutorial.style.display = "table";
        esquemafios.style.display = "none";
    }
    function SelecEsquemaFios() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "none";
        dimensoes.style.display = "none";
        projeto3d.style.display = "none";
        videotutorial.style.display = "none";
        esquemafios.style.display = "table";
    }
</script>

(ridiculamente extenso, até suponho que haja um caminho menor..)

 

As abas desse "submenu" estão no corpo da página (asp clássico) assim:


<!-- ABAS :: MENU DE DETALHES DO PRODUTO -->
<div class="container-principal" style="text-align: center;">
    <% if Len(VetProd(97,0)) > 5 Then %>
        <div class="detalhe-menu-abas" id="bt_carac" onclick="SelecCarac()" >Características</div>
    <%End if
    if Len(VetProd(11,0)) > 0 Then %>
        <div class="detalhe-menu-abas" id="bt_dimensoes" onclick="SelecDimensoes()">Dimensões</div>
    <%End if
    if Len(VetProd(92,0)) > 1 Then %>
        <div class="detalhe-menu-abas" id="bt_3d" onclick="Selec3D()">Desenho 3D</div>
    <%End if
    if Len(VetProd(135,0)) > 3 Then %>
        <div class="detalhe-menu-abas" id="bt_video" onclick="SelecVideo()">Video tutorial</div>
    <%End if
    if Len(VetProd(22,0)) > 0 Then %>
        <div class="detalhe-menu-abas" id="bt_esquemafios" onclick="SelecEsquemaFios()">Ligação dos fios</div>
    <%End if%>
</div>
<!-- -->

 

..E essas id chamadas "div_carac", "div_dimensoes", "div_3d", "div_video" e "div_esquemafios" estão assim:

 

<!-- DIMENSÕES -->
<div class="container-principal" style="text-align: center; display: none;" id="div_dimensoes">
    <h3 style="text-align: left;">Dimens&otilde;es<span class="letramed2">&nbsp;(mm)</span></h3>
    <a href="admin/imgs/icones/<%= VetProd(11,0) %>" target="_blank"><img src="admin/imgs/icones/<%= VetProd(11,0) %>" alt="Dimens&otilde;es de <%= VetProd(1,0) %> em mm" title="<%= VetProd(136,0) %>&nbsp;<%= VetProd(2,0) %>&nbsp;<%= VetProd(1,0) %>" class="detalhe-dimensoes"/></a>
</div>
<!-- -->

 

<!-- CARACTERÍSTICAS ESPECIAIS -->
<div class="container-principal" id="div_carac">
    <h3>Caracter&iacute;sticas especiais</h3>
    <%= VetProd(97,0)%>
</div>
<!-- -->
    
<!-- VÍDEO INCORPORADO  -->
<div style="background-color: #000000; width: 100%; display: none;" id="div_video">
    <div class="container-principal" style="background-color: black; text-align: center; padding: 1% 0;">
        <iframe class="detalhe-video" src="<%= VetProd(135,0) %>" frameborder="0" allowfullscreen></iframe><br />
        <a href="https://www.youtube.com/user/weightechbrasil/search?query=<%=VetProd(1,0)%>" style="color:#FFFFFF;" title="Veja mais em Youtube/WeightechBrasil" target="_blank" class="submenu"><img src="http://www.weightech.com.br/imgs/site/Logo_Youtube_color_horizontal.png" height="30" title="Canal WeightechBrasil no Youtube" alt="Youtube.com/WeightechBrasil" style="margin-bottom:5px;"/><br>Youtube.com/WeightechBrasil</a>
    </div>
</div>
<!-- -->

 

<!-- PROJETO 3D -->
<% if Len(VetProd(92,0)) > 1 Then %>
    <div class="container-principal" style="text-align: center; margin-top: 20px; display: none;" id="div_3d">
        <iframe style="width: 100%; height: 680px;" src="<%=VetProd(92,0)%>" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe>
    </div>
<%End if%>
<!-- -->

 

<!-- ESQUEMA DE LIGAÇÃO -->
<div class="container-principal" style="display: none;" id="div_esquemafios">
    <h3>Esquema de liga&ccedil;&atilde;o dos fios</h3>
    <img src="admin/imgs/icones/<%= VetProd(22,0) %>" alt="Esquema de liga&ccedil;&atilde;o" title="<%= VetProd(136,0) %>&nbsp;<%= VetProd(2,0) %>&nbsp;<%= VetProd(1,0) %>" style="width:90%; max-width:400px;"/>
</div>
<!-- -->

 

Tudo funciona, exceto o VÍDEO INCORPORADO (id="div_video").

Por quê?!

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pra ficar simples e eficiente.

HTML

<div class="container-principal" style="text-align: center;">
        <div class="detalhe-menu-abas" id="carac" >Características</div>
        <div class="detalhe-menu-abas" id="dimensoes">Dimensões</div>
        <div class="detalhe-menu-abas" id="3d">Desenho 3D</div>
        <div class="detalhe-menu-abas" id="video">Video tutorial</div>
        <div class="detalhe-menu-abas" id="esquemafios">Ligação dos fios</div>
</div>

<div class="container-principal menu" style="text-align: center; display: none;" id="div_dimensoes">    dimensoes</div>
<div class="container-principal menu" id="div_carac" style="text-align: center; display: none;">    Caracteristicas especiais</div>
<div class=" menu" style="background-color: #000000; width: 100%; display: none;" id="div_video">   video</div>
<div class="container-principal menu" style="text-align: center; margin-top: 20px; display: none;" id="div_3d">        projeto 3d    </div>
<div class="container-principal menu" style="display: none;" id="div_esquemafios">    fios</div>

 

JS usando jquery

$(".detalhe-menu-abas").click(function(){
 $(".menu").hide();
 $("#div_"+ $(this).attr("id")).show();
});


Exemplo acima funcionando: https://jsfiddle.net/ivanteles/xpvt214o/873490/

Compartilhar este post


Link para o post
Compartilhar em outros sites

@guilherme.audi Primeiro vamos a questão de performasse.

Você não precisa varrer o DOM toda vez que que precisar manipular algum elemento.

Pode simplesmente só armazenar os elementos em variáveis fora do escopo das funções que as mesmas reconhecem a variável pois ela passa a ser global.

 

Para que o javascript encontre elementos, os mesmo já deve ter sido devidamente carregados, ou seja atrasar o script através de métodos load ou executar as buscas no final do documento o que você ganha em muito na performasse também.

 

Para exibir elementos você pode optar por editar-los in-line usando a propriedade 'block' ou alterar seus atributos de class.

 

Primeiro o exemplo in-line assim como você está querendo fazer

Spoiler

<div id="div-a" style="display: none">div A</div>
<div id="div-b" style="display: none">div B</div>

<button onclick="mostra_exemplo_a()">Mostrar / esconder</button>

<script>
    var status = 0;
    var divA = document.getElementById('div-a');
    var divB = document.getElementById('div-b');

    function mostra_exemplo_a() {
        if (status == 1) {
            divA.style.display = 'none';
            divB.style.display = 'none';
            status = 0;
        } else {
            divA.style.display = 'block';
            divB.style.display = 'block';
            status = 1;
        }
    }
</script>

 

Perceba que o script está escrito depois dos elementos html, então o javascript só é carregado depois dos elementos html.

E somente busco por esses elementos uma única vez ganhando em muito na performasse.

 

Agora veja uma outra foma das diversas que pode fazer.

Spoiler

<style>
    .esconde {display: none}
    .esconde.mostra {display: block}
</style>

<div id="div-c" class="esconde">div A</div>
<div id="div-d" class="esconde">div B</div>

<button onclick="mostra_exemplo_b()">Mostrar / esconde</button>

<script>
    var divC = document.getElementById('div-c');
    var divD = document.getElementById('div-d');

    function mostra_exemplo_b() {
        divC.classList.toggle('mostra');
        divD.classList.toggle('mostra');
    }
</script>

 

Esse exemplo combinei o html > javascript > CSS. Para mostrar ou ocultar os elementos.

 

E o melhor em ambos casos só usa puro e simples javascript sem depender de nada externo ganhando muito, mas muito mesmo em performasse do que usar outra coisa.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Gustavo2503
      Eu estou criando uma classe que cria modais usando React, eu preciso criar um modal dentro de um modal, para isso, eu quero chamar a mesma função dentro dela mesma. O modal é criado, mas o problema é que ele não abre, abre o modal principal (#modal-1), mas não abre o sub modal (#modal-2), veja como ficou meu código:
      index.html
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="js/modal.js" type="text/babel"></script> <link rel="stylesheet" href="css/modal.css"> </head> <body> <div align="center"> <h1>Modal</h1> </div> <button type="button" data-modal="modal-1">Open Modal</button> <div id="modal-content"></div> <script type="text/babel"> const contentSub = [ <h2>Title SubModal 1</h2>, <p>SubModal</p>, <small>Rodapé submodal 1</small> ]; const idSub = "modal-2"; const content = [ <h2>Title 1</h2>, <section> <button type="button" data-modal="modal-2">Open SubModal</button> <Modal id={idSub} content={contentSub}/> </section>, <small>Rodapé 1</small> ]; const id = "modal-1"; ReactDOM.render( <Modal id={id} content={content}/>, document.getElementById('modal-content') ); </script> </body> </html> js/modal.js
      class Modal extends React.Component{ constructor(props) { super(props); this.id = this.props.id; this.backgroudColorHeader = this.props.backgroudColorHeader === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorHeader; this.textColorHeader = this.props.textColorHeader === undefined ? '#fff' : this.props.textColorHeader; this.backgroudColorBody = this.props.backgroudColorBody === undefined ? 'rgba(255, 255, 255, 1)' : this.props.backgroudColorBody; this.textColorBody = this.props.textColorBody === undefined ? '#000' : this.props.textColorBody; this.backgroudColorFooter = this.props.backgroudColorFooter === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorFooter; this.textColorFooter = this.props.textColorFooter === undefined ? '#fff' : this.props.textColorFooter; this.borderRadius = this.props.borderRadius === undefined ? '8px' : this.props.borderRadius; this.content = this.props.content === undefined ? [<h2>header content</h2>, <p>body content</p>, <p>footer content</p>] : this.props.content; this.size = this.props.size === undefined ? 3 : this.props.size; } closeModal = () => { $('#'+this.id).removeClass("show"); $('body').removeClass("overflow-hidden"); }; render(){ $(`[data-modal]`).click( function () { var id = $(this).attr("data-modal"); var el = document.getElementById(id); $(el).addClass("show"); $('body').addClass("overflow-hidden"); }); var background, text; background = this.backgroudColorHeader; text = this.textColorHeader; const transparencyBackgroundHeader = background.substring(background.length-2,background.length-1) -.1; const backgroundColorHeader = `${background.substring(0,background.length-2)}${transparencyBackgroundHeader})`; const styleColorHeader = { backgroundColor: backgroundColorHeader, color: text, borderBottom: `1px solid ${background}` }; background = this.backgroudColorBody; text = this.textColorBody; const styleColorBody = { backgroundColor: background, color: text }; background = this.backgroudColorFooter; text = this.textColorFooter; const transparencyBackgroundFooter = background.substring(background.length-2,background.length-1) -.1; const backgroundColorFooter = `${background.substring(0,background.length-2)}${transparencyBackgroundFooter})`; const styleColorFooter = { backgroundColor: backgroundColorFooter, color: text, borderTop: `1px solid ${background}` }; const styleBorderRadius = {borderRadius: this.borderRadius}; const eDivision = ['h', 'b', 'f']; const eContent = this.content; var div = []; for (var i=0;i<eContent.length;i++){ const part = eDivision[i].replace('h', 'header').replace('b', 'body').replace('f', 'footer')+"-modal"; const closeModal = i === 0 ? <span onClick={this.closeModal} className="close-modal"><i className="material-icons">close</i></span> : "" ; var style; if (i===0) style = styleColorHeader; else if (i===1) style = styleColorBody; else style = styleColorFooter; div.push(<div key={i+1} className={part} style={style}> {closeModal} {eContent[i]} </div>); } const eSize = this.size; const s = ['s', 'm-s', 'm', 'm-l', 'l']; const size = s[eSize-1]; const classModal = (size !== "s" && size !== "m-s" && size !== "m" && size !== "m-l" && size !== "l") ? 'modal-modal modal-m' : "modal-modal modal-"+size; return <div id={this.id} className={classModal}> <div className="overflow-modal"> <div className="container-modal" style={styleBorderRadius}> {div} </div> </div> </div>; } }  
    • Por rossgellen
      Boa noite pessoal, preciso fazer com que seja carregado somente a informação dentro de uma determinada div, pois ela deve atualizar quando for alterada a informação no BD. Carregar a pagina inteira a cada 5 segundos seria ruim pois provavelmente o usuário estranharia, fiz da seguinte forma, conforme os prints.
       
      Deu certo, porém a informação foi alterada a partir da alteração feita no banco de dados, porém, dentro da div, apareceu outra página igual, gerando duplicidade sobreposta.
      Aguardo sugestões.

      nox

    • Por Henrique Flausino
      Olá.
      Preciso ocultar uma DIV que está dentro de um IFRAME, porém não consigo.
      Esta DIV está identificada por um ID, porém mesmo montando um CSS especifico para ocultar ela, a mesma continua aparecendo.

      Estou usando o seguinte CSS.
      <style type="text/css"> #topo-conteudo { display: none } </style> Alguém poderia me dar uma luz de como posso ocultar está DIV?
      Meu IFRAME carrega uma página de outro site.
    • Por MateusOFCZ
      Olá, eu criei uma página de publicidade, porém não fluiu como eu queria, então coloquei essa página em uma DIV, alguém poderia me informar se irá funcionar caso eu faça um sistema para ocultar essa DIV depois de 10 segundos?
      <!--- Publicidade ------> <div id="publicidadediv"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title><?= $config['hotelName'] ?> - Publicidade</title> <script src="/templates/GalaxyServers/client/js/jquery-latest.js" type="text/javascript"></script> <script src="/templates/GalaxyServers/client/js/jquery-ui.js" type="text/javascript"></script> <script src="/templates/GalaxyServers/client/js/spacehotel2018.js"></script> <script src="/templates/GalaxyServers/client/js/flash_detect_min.js"></script> <script src="/templates/GalaxyServers/client/js/client.js" type="text/javascript"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="icon" type="image/png" href="<?= $config["favicon"];?>"> </head> <body> <body style="background-color:black;"> <center><img src="https://i.imgur.com/kHdzpqq.png" style="width:396px;height:91px;"></center> <center><?php $imagens = array(); $imagens[] = '<a href="https://hobbyhotel.club/hotel?room=255" target="_blank"><img src="https://i.imgur.com/O0gSito.png" style="width:330px;height:250px;"></a>'; $imagens[] = '<a href="https://hobbyhotel.club/hotel?room=255" target="_blank"><img src="https://i.imgur.com/O0gSito.png" style="width:330px;height:250px;"></a>'; $chave = array_rand($imagens); $imagem = $imagens[$chave]; echo $imagem; ?></center> <center><img src="https://i.imgur.com/9FH4A5O.png" style="width:396px;height:91px;"></center> </body> </div> <!--- Publicidade ------> Gostaria de sabem também como faço para ocultar tudo isso após X segundos...
    • Por luisdiascb
      ola pessoal eu queria por exemplo, eu tenho + de 4 mil visitas por dia no site mas nem todos dão um click para eu ganhar eu uso PoPADS.NET e por isso eles tende clicar.....
      Queria algo que podece usar no codigo index ou nas postagens dentro de uma div ou algo parecido e que automaticamente daria um click dentro da pagina em qualquer lugar para abrir o anuncio....
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.