The Divs don’t fit when I open a Summary

Asked

Viewed 62 times

0

.parallax2{
    height: 16vw;
    margin-bottom: 0;
    background: transparent;
    background-color: red;

}

#submete{
    height: 100%;
    padding-left: 19vw;
    padding-right: 19vw;
    background: url(imgs/tech.png);
    background-size: cover;
    background-position: center;
}

#submetetext{
    font-size: 1vw;
    padding-top: 2vw;
    text-align: justify;
    text-indent: 3vw;
}

#submetetext h4{
    display: inline-block;
    font-size: 1.5vw;
}

#submetetext h2{
    padding-top: 2vw;
    text-align: center;
    padding-bottom: 2vw;
    font-size: 3vw;
    text-indent: 0; 
}

#submetetext h3{
    font-size: 2.5vw;
    text-indent: 3vw;
    text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="parallax.js-1.5.0\parallax.min.js"></script>
 
 <section id="submete">
        <div id="submetetext">
            
            <h2>Guião de Texto</h2>
            <h3>Directrizes de Submissão</h3>
                <p>Os autores devem enviar um documento em inglês, verificando cuidadosamente a gramática e a ortografia corretas, abordando uma ou várias das áreas ou tópicos da conferência</p>

                <p>Cada artigo deve indicar claramente a natureza da contribuição técnica / científica e os problemas, domínios ou ambientes a que é aplicável.</p>

                <p>Para facilitar o método de avaliação do papel em dupla ocultação, os autores são obrigados a produzir e fornecer o documento sem qualquer referência a nenhum dos autores, incluindo os detalhes pessoais dos autores, a seção de reconhecimento do documento e qualquer outra referência que possa divulgar o documento. identidade dos autores.</p>

                <p>Somente os documentos originais devem ser enviados. Os autores são aconselhados a ler as normas éticas do INSTICC em relação ao plágio e ao autoplagismo antes de enviar e devem certificar-se de que suas submissões não se sobrepõem substancialmente ao trabalho que foi publicado em outro lugar ou simultaneamente submetido a uma revista ou a outra conferência com os procedimentos. Os documentos que contenham qualquer forma de plágio serão rejeitados sem comentários.</p>
                
                <p>Todos os documentos devem ser enviados através da plataforma de apresentação on-line PRIMORIS e devem seguir as instruções e os modelos fornecidos nos documentos aqui, que também são os modelos para a submissão da câmera. Após a apresentação do documento ter sido concluída com sucesso, os autores receberão um e-mail de confirmação automático.Todos os trabalhos apresentados no local da conferência estarão disponíveis na Biblioteca Digital SCITEPRESS. É planejado publicar uma pequena lista de versões revisadas e estendidas de artigos apresentados com Springer em um livro da Série LNAI.</p>
            
            <h3>Processo de Revisão</h3>
                <p>Todas as revisões são baseadas em envios de artigos completos (não resumos) após um processo em dupla ocultação. Todos os artigos estão sujeitos a análise de plágio usando uma ferramenta de software antes da revisão.</p>
                
                <p>Todos os trabalhos regulares são revisados ??por pelo menos dois revisores, mas geralmente por três ou mais, e avaliado considerando: Relevância, Originalidade, Qualidade Técnica, Importância e Apresentação. Os revisores também são convidados a responder um grupo de perguntas que podem ajudar os autores a melhorar o papel.</p>
                
                <p>Finalmente, os revisores podem fornecer algumas observações de texto livre que foram entregues aos autores e também algumas observações privadas de texto livre, disponibilizadas apenas para a cadeira do programa. Avaliações conflitantes podem exigir a atribuição de um novo revisor. No final, as cadeiras do programa decidem. O autor tem um período de refutação, o que desencadeia um fluxo de trabalho envolvendo as cadeiras e os revisores, se necessário. Todas as réplicas são respondidas, mas as decisões são finais.</p>
            
                <p>Os documentos de posição seguem um processo semelhante, mas os critérios utilizados para a classificação são ligeiramente diferentes, a fim de explicar a natureza desses documentos, ou seja, idéias especulativas e / ou trabalhos em andamento ainda não totalmente validados.</p>
                
            <h3>Formatos de papel de conferência, incluindo sessões e workshops especiais</h3>

                <p>Os autores podem enviar seu trabalho sob a forma de um Documento Regular, representando pesquisa completa e validada, ou como Documento de Posição, retratando trabalhos em andamento ou uma opinião discutível sobre um problema.</p>
                
            <details><summary><h4>Papéis Regulares</h4></summary>
                
                <p><b>Envio:</b> Recomenda-se que os Documentos regulares sejam submetidos a revisão com cerca de 8 a 10 páginas, com o tamanho da fonte e o formato da página apropriados, incluindo referências, tabelas, gráficos, imagens e apêndices. As inscrições com menos de 4 páginas ou mais de 13 páginas serão automaticamente rejeitadas.</p>
                
                <p><b>Aceitação:</b> Após uma revisão de pares duplo-cega, os documentos periódicos qualificados podem ser aceitos como documentos completos ou papéis curtos.</p>
                
                <p><b>Apresentação:</b> os trabalhos regulares classificados como papéis completos recebem um espaço de 30 minutos para uma apresentação oral na conferência. Os papéis regulares classificados como Papéis curtos recebem um espaço de 20 minutos para uma apresentação oral ou atribuídos a um presente em uma sessão de cartazes. Os autores que receberam uma apresentação oral, completa ou curta, podem, no entanto, optar por apresentar uma Sessão de cartaz, em vez disso, se preferirem.</p>
                
                <p><b>Publicação:</b> os documentos regulares classificados como Papéis completos receberão um limite de 12 páginas nos Procedimentos da Conferência, enquanto os Documentos regulares classificados como Papéis Curtos têm um limite de 8 páginas. Se for absolutamente necessário, os autores podem aumentar o número total de páginas por um máximo de 4 páginas extras, por uma taxa adicional. O número total de páginas a considerar é o número obtido após o papel ter sido formatado corretamente de acordo com o modelo apropriado. Os Procedimentos da Conferência serão publicados sob um número ISBN pela SCITEPRESS e incluirão versões finais de todos os documentos aceitos, ajustados para satisfazer as recomendações dos revisores. Eles serão obtidos em suporte de papel e CD-Rom, e disponibilizados para consulta on-line na Biblioteca Digital SCITEPRESS. A publicação on-line é exclusiva de artigos que foram publicados e apresentados no evento.</p>
                
                <p><b>Indexação:</b> Os procedimentos serão submetidos ao Índice de Citação de Processos da Conferência da Thomson Reuters (CPCI / ISI), INSPEC, DBLP, EI (Elsevier Engineering Village Index) e Scopus para indexação.</p></details>
                
            <details><summary><h4>Papéis Posicionados</h4></summary>
                <p><b>Apresentação:</b> os documentos de posição devem ser submetidos para revisão com cerca de 6 ou 7 páginas, com o tamanho da fonte e o formato da página apropriados, incluindo referências, tabelas, gráficos, imagens e apêndices. As inscrições com menos de 4 páginas ou mais de 9 páginas serão automaticamente rejeitadas.</p>

                <p><b>Aceitação:</b> Após uma revisão de pares duplo-cega, os Documentos de Posição qualificados serão aceitos como Documentos Curtos.</p>

                <p><b>Apresentação:</b> os papéis de posição recebem um espaço de 20 minutos para uma apresentação oral ou atribuídos a um presente em uma sessão de cartazes. Os autores que receberam uma apresentação oral podem, no entanto, optar por apresentar uma Sessão de cartaz, em vez disso, se preferirem.</p>

                <p><b>Publicação:</b> os documentos de posição receberão um limite de 8 páginas nos Procedimentos da Conferência, que incluirão versões finais de todos os documentos aceitos, ajustados para satisfazer as recomendações dos revisores. Se for absolutamente necessário, os autores podem aumentar o número total de páginas por um máximo de 4 páginas extras, por uma taxa adicional. O número total de páginas a considerar é o número obtido após o papel ter sido formatado corretamente de acordo com o modelo apropriado. Os Procedimentos da Conferência serão publicados sob um número ISBN pela SCITEPRESS, em suporte de papel e CD-ROM, e disponibilizados para consulta on-line na Biblioteca Digital SCITEPRESS. A publicação on-line é exclusiva de artigos que foram publicados e apresentados no evento.</p>

                <p><b>Indexação:</b> Os procedimentos serão submetidos ao Índice de Citação de Processos da Conferência da Thomson Reuters (CPCI / ISI), INSPEC, DBLP, EI (Elsevier Engineering Village Index) e Scopus para indexação.</p></details>
        </div>
    </section>
    
    <div class="parallax2" data-parallax="scroll" data-image-src="imgs\galeriaparalax.jpg">
        <h1 id="titulogaleria">Galeria</h1>
    </div>

Good morning, I’m doing a job and opening my own summary the information is superimposed on a div that I have as Parallax.

How do I make for the div adjust to the opening of the summary?

As you can see the gallery paragraph fits when Summary opens, but in my project I have a background in the div with class parallax2 and this image is static, making Summary text on top of the image. I want the picture to walk down like the gallery paragraph.

Before opening the Summary: inserir a descrição da imagem aqui After opening the Summary: inserir a descrição da imagem aqui As you can see the image has become static and the text Gallery has adjusted to Summary: inserir a descrição da imagem aqui

  • 1

    Welcome Boom. Please include in your question all the code you have of HTML and CSS, so it is easier to give you an accurate answer.

  • In the Snippet you posted the Summary opens normal and pushes the Gallery down. It would be like you post an image of the Error on the screen?

  • @hugocsl already posted the images

1 answer

1

How Parallax converts the div fixed, that div tends not to follow the fluidity of the elements when they are changed dynamically. However, there is a way to force the plugin to readjust by forcing the div going down.

Whereas Parallax detects events like scroll and resize, just you add a Listener in the window detecting the click and the scroll and firing a phony resize, by inserting a simple jQuery code into the page:

$(window).on("click scroll",function(){
   $(window).resize();
});

See working:

$(window).on("click scroll",function(){
   $(window).resize();
});
.parallax2{
    height: 16vw;
    margin-bottom: 0;
    background: transparent;
    sbackground-color: red;

}

#submete{
    height: 100%;
    padding-left: 19vw;
    padding-right: 19vw;
    background: url();
    background-size: cover;
    background-position: center;
}

#submetetext{
    font-size: 1vw;
    padding-top: 2vw;
    text-align: justify;
    text-indent: 3vw;
}

#submetetext h4{
    display: inline-block;
    font-size: 1.5vw;
}

#submetetext h2{
    padding-top: 2vw;
    text-align: center;
    padding-bottom: 2vw;
    font-size: 3vw;
    text-indent: 0; 
}

#submetetext h3{
    font-size: 2.5vw;
    text-indent: 3vw;
    text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<section id="submete">
        <div id="submetetext">
            
            <h2>Guião de Texto</h2>
            <h3>Directrizes de Submissão</h3>
                <p>Os autores devem enviar um documento em inglês, verificando cuidadosamente a gramática e a ortografia corretas, abordando uma ou várias das áreas ou tópicos da conferência</p>

                <p>Cada artigo deve indicar claramente a natureza da contribuição técnica / científica e os problemas, domínios ou ambientes a que é aplicável.</p>

                <p>Para facilitar o método de avaliação do papel em dupla ocultação, os autores são obrigados a produzir e fornecer o documento sem qualquer referência a nenhum dos autores, incluindo os detalhes pessoais dos autores, a seção de reconhecimento do documento e qualquer outra referência que possa divulgar o documento. identidade dos autores.</p>

                <p>Somente os documentos originais devem ser enviados. Os autores são aconselhados a ler as normas éticas do INSTICC em relação ao plágio e ao autoplagismo antes de enviar e devem certificar-se de que suas submissões não se sobrepõem substancialmente ao trabalho que foi publicado em outro lugar ou simultaneamente submetido a uma revista ou a outra conferência com os procedimentos. Os documentos que contenham qualquer forma de plágio serão rejeitados sem comentários.</p>
                
                <p>Todos os documentos devem ser enviados através da plataforma de apresentação on-line PRIMORIS e devem seguir as instruções e os modelos fornecidos nos documentos aqui, que também são os modelos para a submissão da câmera. Após a apresentação do documento ter sido concluída com sucesso, os autores receberão um e-mail de confirmação automático.Todos os trabalhos apresentados no local da conferência estarão disponíveis na Biblioteca Digital SCITEPRESS. É planejado publicar uma pequena lista de versões revisadas e estendidas de artigos apresentados com Springer em um livro da Série LNAI.</p>
            
            <h3>Processo de Revisão</h3>
                <p>Todas as revisões são baseadas em envios de artigos completos (não resumos) após um processo em dupla ocultação. Todos os artigos estão sujeitos a análise de plágio usando uma ferramenta de software antes da revisão.</p>
                
                <p>Todos os trabalhos regulares são revisados ??por pelo menos dois revisores, mas geralmente por três ou mais, e avaliado considerando: Relevância, Originalidade, Qualidade Técnica, Importância e Apresentação. Os revisores também são convidados a responder um grupo de perguntas que podem ajudar os autores a melhorar o papel.</p>
                
                <p>Finalmente, os revisores podem fornecer algumas observações de texto livre que foram entregues aos autores e também algumas observações privadas de texto livre, disponibilizadas apenas para a cadeira do programa. Avaliações conflitantes podem exigir a atribuição de um novo revisor. No final, as cadeiras do programa decidem. O autor tem um período de refutação, o que desencadeia um fluxo de trabalho envolvendo as cadeiras e os revisores, se necessário. Todas as réplicas são respondidas, mas as decisões são finais.</p>
            
                <p>Os documentos de posição seguem um processo semelhante, mas os critérios utilizados para a classificação são ligeiramente diferentes, a fim de explicar a natureza desses documentos, ou seja, idéias especulativas e / ou trabalhos em andamento ainda não totalmente validados.</p>
                
            <h3>Formatos de papel de conferência, incluindo sessões e workshops especiais</h3>

                <p>Os autores podem enviar seu trabalho sob a forma de um Documento Regular, representando pesquisa completa e validada, ou como Documento de Posição, retratando trabalhos em andamento ou uma opinião discutível sobre um problema.</p>
                
            <details><summary><h4>Papéis Regulares</h4></summary>
                
                <p><b>Envio:</b> Recomenda-se que os Documentos regulares sejam submetidos a revisão com cerca de 8 a 10 páginas, com o tamanho da fonte e o formato da página apropriados, incluindo referências, tabelas, gráficos, imagens e apêndices. As inscrições com menos de 4 páginas ou mais de 13 páginas serão automaticamente rejeitadas.</p>
                
                <p><b>Aceitação:</b> Após uma revisão de pares duplo-cega, os documentos periódicos qualificados podem ser aceitos como documentos completos ou papéis curtos.</p>
                
                <p><b>Apresentação:</b> os trabalhos regulares classificados como papéis completos recebem um espaço de 30 minutos para uma apresentação oral na conferência. Os papéis regulares classificados como Papéis curtos recebem um espaço de 20 minutos para uma apresentação oral ou atribuídos a um presente em uma sessão de cartazes. Os autores que receberam uma apresentação oral, completa ou curta, podem, no entanto, optar por apresentar uma Sessão de cartaz, em vez disso, se preferirem.</p>
                
                <p><b>Publicação:</b> os documentos regulares classificados como Papéis completos receberão um limite de 12 páginas nos Procedimentos da Conferência, enquanto os Documentos regulares classificados como Papéis Curtos têm um limite de 8 páginas. Se for absolutamente necessário, os autores podem aumentar o número total de páginas por um máximo de 4 páginas extras, por uma taxa adicional. O número total de páginas a considerar é o número obtido após o papel ter sido formatado corretamente de acordo com o modelo apropriado. Os Procedimentos da Conferência serão publicados sob um número ISBN pela SCITEPRESS e incluirão versões finais de todos os documentos aceitos, ajustados para satisfazer as recomendações dos revisores. Eles serão obtidos em suporte de papel e CD-Rom, e disponibilizados para consulta on-line na Biblioteca Digital SCITEPRESS. A publicação on-line é exclusiva de artigos que foram publicados e apresentados no evento.</p>
                
                <p><b>Indexação:</b> Os procedimentos serão submetidos ao Índice de Citação de Processos da Conferência da Thomson Reuters (CPCI / ISI), INSPEC, DBLP, EI (Elsevier Engineering Village Index) e Scopus para indexação.</p></details>
                
            <details><summary><h4>Papéis Posicionados</h4></summary>
                <p><b>Apresentação:</b> os documentos de posição devem ser submetidos para revisão com cerca de 6 ou 7 páginas, com o tamanho da fonte e o formato da página apropriados, incluindo referências, tabelas, gráficos, imagens e apêndices. As inscrições com menos de 4 páginas ou mais de 9 páginas serão automaticamente rejeitadas.</p>

                <p><b>Aceitação:</b> Após uma revisão de pares duplo-cega, os Documentos de Posição qualificados serão aceitos como Documentos Curtos.</p>

                <p><b>Apresentação:</b> os papéis de posição recebem um espaço de 20 minutos para uma apresentação oral ou atribuídos a um presente em uma sessão de cartazes. Os autores que receberam uma apresentação oral podem, no entanto, optar por apresentar uma Sessão de cartaz, em vez disso, se preferirem.</p>

                <p><b>Publicação:</b> os documentos de posição receberão um limite de 8 páginas nos Procedimentos da Conferência, que incluirão versões finais de todos os documentos aceitos, ajustados para satisfazer as recomendações dos revisores. Se for absolutamente necessário, os autores podem aumentar o número total de páginas por um máximo de 4 páginas extras, por uma taxa adicional. O número total de páginas a considerar é o número obtido após o papel ter sido formatado corretamente de acordo com o modelo apropriado. Os Procedimentos da Conferência serão publicados sob um número ISBN pela SCITEPRESS, em suporte de papel e CD-ROM, e disponibilizados para consulta on-line na Biblioteca Digital SCITEPRESS. A publicação on-line é exclusiva de artigos que foram publicados e apresentados no evento.</p>

                <p><b>Indexação:</b> Os procedimentos serão submetidos ao Índice de Citação de Processos da Conferência da Thomson Reuters (CPCI / ISI), INSPEC, DBLP, EI (Elsevier Engineering Village Index) e Scopus para indexação.</p></details>
        </div>
    </section>
    
    <div class="parallax2" data-parallax="scroll"  data-image-src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <h1 id="titulogaleria">Galeria</h1>
    </div>

  • I’m having the same problem, when using your @dvd solution I came across a small problem, the image of Parallax only fits after scrolling or clicking, there is no way it fits right when opening Summary?!

  • introduced this script into the html page within <script> </script> but the problem continues, the image only fits after scroll or click

  • you need to click yes to open Summary, but on this click the script does not work, only on the first click/scroll after Summary opens

  • I put the script at the end of html, I should put it at the beginning?!

  • I put this at the end of html and it’s still the same :( <script> $(window).on("load click scroll",function(){ $(window).resize(); });</script>

  • with this code the Parralax already adjusts but when Summary opens the text is still over the image until I give scroll or click, so it has helped a lot, thanks

  • remained in the same , only do resize in the first scroll/click after Summary is open, I must have some code piece that conflicts with this

  • I have more than a thousand lines of code, I don’t want to give so much analysis work, I will use a little trick to disguise, putting the Summary further away from Parallax so when opening nobody notices the bug and giving scroll the bug already disappear ;)

  • as I’ve already used the trick and the delivery time is very close I’ll try it after delivery and I’ll tell you what gave

Show 4 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.