Ir ao conteúdo
  • Cadastre-se

Página se mexe quando "esconde/mostra" formulário css/javascript


Posts recomendados

Olá, eu sou ilustrador e comecei a aprender html/css semana passada. Estou fazendo este site: www.globalutopia.co.nf .

Este é o meu primeiro site, por isso tenho certeza que verão muitas gambiarras, mas em breve vou ter conhecimento suficiente para consertar isso.

 

Como podem ver, ao lado da descrição da pagina coloquei a opção de esconder ou revelar o formulario, que em breve sera um botão. Mas quando eu clico a página desce, como se rolasse para baixo. E cada vez que o formulário é revelado ou escondido isso acontece. Tem como deixar a página fixa onde o usuário esta visualizando quando ele clica no botão?

 

JAVASCRIPT

 


    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

 

 

 

HTML do Formulário

 

<!-- FORMULARIO DE CONTATO -->
                
            <div class="contatocontainer">
                 
               
                
            <div id="contato" style="display:none;">
            
                             <h5 align="center">ENVIE SUA MENSAGEM</h5>
                    
                    <form align="center" >
                        
                         
                        
                        <ul>
                            <li>
                               <input  type="text" name="name" id="name" placeholder="Seu Nome"/>
                            </li>
                            <li>
                                <input type="text" name="assunto" id="assunto" placeholder="Assunto"/>
                            </li>
                            <li>
                                <input type="text" name="email" id="email" placeholder="email"
                            </li>
                              
                            <li>
                                <textarea name="mensagem" id="mensagem" placeholder="Mensagem"></textarea>
                            </li>
                            
                                <button  type="enviar" id="enviar" value="Enviar" />ENVIAR</button>
                            
                        </ul>
                                  
                     </form>

 

CSS do Formulario


 

/* Formulario de Contato */

.contatocontainer{
    position:absolute;
    float:right;
    right:0;
    z-index: 103;
    top:120%;
}
#contato{
    float:right;
    background:black;
    
}
#contato form{
    float:right;
    margin-right:7%;
    
}
#contato h5{
    color:white;
    right:0;
}

#contato li{
    padding-bottom:5% ;
    list-style: none;
    width:100%;
    max-width: 100%;
   
}
#contato input{
    background:#ababab;
    border-bottom:#ababab;
    border-left: #ababab;
    border-right: #ababab;
    padding:1%;
    font-family: 'Times new roman';
}

#mensagem{
    width:12em;
    max-width:12em;
    height:5.8em;
    max-height:12em;
    background:#ababab;
    border-bottom:#ababab;
    border-left: #ababab;
    border-right: #ababab;
    padding:1%; 
    min-width: 12em;
}

#enviar {
    width:100%;
    height:2em;
    background:red;
    color: white;
    border-bottom:red;
    border-top:red;
    border-right:red;
    border-left:red;
    font-family: 'Times new roman';
}
::-webkit-input-placeholder {
   color: #606060;
}
:-moz-placeholder { /* Firefox 18- */
   color: #606060;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #606060;  
}
:-ms-input-placeholder {  
   color: #606060;  
}
/* Fim do Formulario */

(Caso necessário) HTML Completo do Site

 

<!DOCTYPE html>
<html lang="en" align="center">
    
    <head>
        
        <link rel="stylesheet" type="text/css" href="main.css"/>
        
        <script type="text/javascript" src="contato.js"></script>
        
        <meta charset="utf-8">
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Global Utopia</title>
        <meta name="description" content="">
        <meta name="author" content="Leandro">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        
         
    
    </head>
                    
    <body align="center">
        
                     
          <!-- FORMULARIO DE CONTATO -->
                
            <div class="contatocontainer">
                 
               
                
            <div id="contato" style="display:none;">
            
                             <h5 align="center">ENVIE SUA MENSAGEM</h5>
                    
                    <form align="center" >
                        
                         
                        
                        <ul>
                            <li>
                               <input  type="text" name="name" id="name" placeholder="Seu Nome"/>
                            </li>
                            <li>
                                <input type="text" name="assunto" id="assunto" placeholder="Assunto"/>
                            </li>
                            <li>
                                <input type="text" name="email" id="email" placeholder="email"
                            </li>
                              
                            <li>
                                <textarea name="mensagem" id="mensagem" placeholder="Mensagem"></textarea>
                            </li>
                            
                                <button  type="enviar" id="enviar" value="Enviar" />ENVIAR</button>
                            
                        </ul>
                                  
                     </form>
                        
                
            
            </div>
        
            <a href="#" onclick="toggle_visibility('contato');">ESCONDER</a>
            
            </div>
        
        <!-- FIM DO FORMULARIO DE CONTATO  -->
              
       <div class="toptudo"  >
         
           <figure id="logo">         
        <img align="left"  src="imagens/logo.png"  />
               </figure>
               
           <figure class="menu"  align="right">
               
         <a><img align="right"  src="imagens/blog.jpg"/> </a>
               
        <a><img  align="right" src="imagens/diversao.jpg"/></a>
                                     
        <a href="index.html" ><img align="right"  src="imagens/inicio.jpg"/></a>
               
        </figure>
                    
        </div>
        
        
        <figure>
                    
            <img  class="banner"  src="imagens/background.jpg" />
            
          
        </figure>
    
        
    
            
               <!-- conteudo -->
                      
        
     
        <div class="website" >         
            
             
          
                        
               <div class="conteudo" align="center">
                    
                   <h1><img class="imgcruz"  src="imagens/cruz.gif"/>CURSO DE CHINÊS GLOBAL UTOPIA</h1>
                   
                              
             <img  class="img1"  src="imagens/rosto.gif"  />
              
                   
                <p  >  Curso fundado por Ding Huaying, Pós Graduada em Psicologia. Já trabalhou como tradutora, e ensina a crianças e adultos desde 2011. 
                    </p>
                        <p >
                    Antes do curso ser aberto, haviam muitos pedidos para aulas particulares, mas era difícil encontrar um lugar adequado. Além de alunos brasileiros, muitos chineses estavam precisando de aulas de Português. Com a criação do local adequado foi possível ensinar em turmas, assim os alunos que não preferissem aula particular poderiam aprender mandarim de forma mais econômica. O método de aula particular foi mantido, visto que alguns alunos ainda preferem um ambiente mais tranquilo e de receber atenção especial.</p>
                        
    
              
        </div>            
        
       
                   
       <div class="info">
                  
          <iframe   class="map"  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3917.7125920875337!2d-37.05362946399698!3d-10.90943339253919!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x71ab36e347adcc3%3A0x907ead4355579907!2sR.+Geru%2C+480+-+Centro%2C+Aracaju+-+SE%2C+49010-460!5e0!3m2!1sen!2sbr!4v1462421880496"  frameborder="0" style="border:0" allowfullscreen ></iframe>
            </div>
  
            
            <footer class="footer" >
                        <span >&copy; Criado e Ilustrado por:&nbsp;<a href="https://www.leandrodiassis.co.nf" target="_blank">Leandro di Assis.</a></span>
                    </footer>
            
    </div>
    
            
         </body>   
    
  
    
   
    
</html>

 

(Caso Necessario) CSS Completo do Site


 


html,body{   
    font-family: Georgia, serif; background:#f6f6f6; 
    height:auto;
    margin:0; 
    padding:0;
    
}
.menu{
   
    height:auto;
    width:100%;
    right: 5%;
    margin-top:3.7%;
}
.menu img{
  height:auto;
  max-width: 100%;
  padding-right:2%;
   position:relative;
    
    
}
    
}
#logo{
    position:relative;
    float:left;
    left:0%;
    height:auto;
    width:100%;
    max-width:100%;
    
    
}
#logo img {
    position:relative;
    height:95%;
    width:7%;
    height:auto;
}
.toptudo{
    position:fixed;
    top:0%;
    right:0%;
    left:0%;
    background:#f6f6f6;
    width:100%;
    z-index:102;
    height:auto;
    
    
}

.website{
    position:relative;
    z-index:101;
     background:#f6f6f6;
    margin-top:50%;
    max-width:auto;
    
     
     
   
        
}
.banner{
    position:fixed;
    width:100%;
    right:0%;
    top:9%;
    margin-bottom: auto;
    margin-top:auto;
    max-width: 100 ;   
    height:auto;
    
    
}
/* Formulario de Contato */

.contatocontainer{
    position:absolute;
    float:right;
    right:0;
    z-index: 103;
    top:120%;
}
#contato{
    float:right;
    background:black;
    
}
#contato form{
    float:right;
    margin-right:7%;
    
}
#contato h5{
    color:white;
    right:0;
}

#contato li{
    padding-bottom:5% ;
    list-style: none;
    width:100%;
    max-width: 100%;
   
}
#contato input{
    background:#ababab;
    border-bottom:#ababab;
    border-left: #ababab;
    border-right: #ababab;
    padding:1%;
    font-family: 'Times new roman';
}

#mensagem{
    width:12em;
    max-width:12em;
    height:5.8em;
    max-height:12em;
    background:#ababab;
    border-bottom:#ababab;
    border-left: #ababab;
    border-right: #ababab;
    padding:1%; 
    min-width: 12em;
}

#enviar {
    width:100%;
    height:2em;
    background:red;
    color: white;
    border-bottom:red;
    border-top:red;
    border-right:red;
    border-left:red;
    font-family: 'Times new roman';
}
::-webkit-input-placeholder {
   color: #606060;
}
:-moz-placeholder { /* Firefox 18- */
   color: #606060;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #606060;  
}
:-ms-input-placeholder {  
   color: #606060;  
}
/* Fim do Formulario */
.img1 {
   position:absolute;
    bottom:65%;
    left:1%;
    max-width:20%;
    z-index:103;
    margin-left:auto;
         
   
    
    
}

.imgcruz {
   
      
    margin-right:0.3%;
    
}

  
.info{
    position:relative;
    
    margin-top:5%;
    max-height: 100%;
    max-width: 100%;
    height:100%;
    width:auto;
    z-index: 103;
    
    
}
.endereco{
   position:relative;
    color:white;
    top:50%;
    display:block;
   margin:auto;
}
.map{
   
    width:100%;
    height:auto;
   
}
#facebook{
    
    width:0%;
    margin-right:0%;
    bottom:0%;
}
#blogger{
   
    width:0%;
   bottom:0%;
}

.conteudo{
   
    width:auto;
    height:100%;
    padding-top:2%;
}
.conteudo p{
    width:60%;
    
}
.conteudo h1{
    width:60%;
}
   

/* FORMULARIO */
.formulario {
    margin:auto;
    width:35%;
    height:100%;
    max-height:100%;
    max-width: 35%;
}

.input_text {
       
    font-family: 'times new roman';
    width:100%;
    height:100%;
    max-width:100%;
    max-height: 100%;
       
    
    
}
#form{
    
    display:block;
    width:50%;
    max-width: 50%;
    margin-bottom: 2%;
    
   
}

.labelmessage{
  display:block;
   width:50%;
    max-width: 50%;
    margin-bottom: 2%;
    
}

/* FIM DO FORMULARIO */

.footer{
  text-align: left;
  font-family: times new roman;
  font-size:14px;
  background:#f9f9f9;
  margin-top:1%;
  
}
.footer{
    z-index:103;
}
.footer span{
   
    margin-left:1%;
    
    
    
}
::-webkit-input-placeholder {
    
    font:12px verdana,arial,sans-serif;
 
    
}
:-moz-placeholder {
    
    font:12px verdana,arial,sans-serif;
    
}

}

 

Link para o comentário
Compartilhar em outros sites

Outra pessoa me ajudou com isso hoje, vou postar aqui como registro de dados.

Ele me disse que o meu problema é que na tag <a> eu coloquei o link para "#" <a href="#">.

 

o correto seria eu fazer desse jeito: <a href="javascript:void(0);" onclick="toggle_visibility('contato');">ESCONDER</a>

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...